🧱 Phase 1 · HTML 🟢 Beginner MODULE 01

Introduction to HTML

⏱️ 30 min

📖 Theory + Code

🧩 5 Questions

🏗️ 1 Challenge

Phase 1 progress0%

🎯 What you'll learn: What HTML is and how browsers use it, the structure of every HTML document, how to write your very first webpage, tags vs elements vs attributes, the DOCTYPE declaration, and the essential head/body split.

Section 1

What is HTML?

HTML (HyperText Markup Language) is the language that gives structure to every webpage on the internet. It's not a programming language — it doesn't calculate or make decisions. It's a markup language: it wraps content in tags to tell the browser what each piece of content is.

When you visit any website, your browser downloads an HTML file, reads its tags, and renders the content you see. Everything you see on the web — headings, paragraphs, images, buttons, forms — all start with HTML.

🌐

HTML is 35 years old — and still runs the web

Tim Berners-Lee invented HTML in 1989 at CERN to share research documents. Today, HTML5 (the current version) powers 5.4 billion websites. No matter how advanced frameworks like React or Vue get, they all ultimately output HTML. Knowing raw HTML makes you understand the web at its foundation.

The relationship between the three web languages is simple: HTML is the skeleton (structure), CSS is the skin (appearance), and JavaScript is the muscles (behaviour). This course covers HTML and CSS — the foundation every web developer builds on.

Section 2

Anatomy of an HTML Element

An HTML element consists of an opening tag, content, and a closing tag. Tags are written in angle brackets < >. The closing tag has a forward slash before the tag name. Some elements are self-closing (void elements) — they have no content and no closing tag.

<p class="intro">Hello, BitWithBite!</p>

↑ Opening tag

↑ Attribute name

↑ Attribute value

↑ Closing tag

elements.html

HTML

<!-- Elements with content (need closing tag) -->
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<a href="https://bwb.com">Click here</a>

<!-- Void elements (self-closing, no content) -->
<img src="photo.jpg" alt="My photo">
<br>           <!-- line break -->
<hr>           <!-- horizontal rule -->
<input type="text">

<!-- Attributes give extra info to elements -->
<p id="intro" class="lead-text">Styled paragraph</p>
<img src="logo.png" alt="Site logo" width="200">

✨

Tags are not case-sensitive — but always use lowercase

<P> and <p> both work, but lowercase is the HTML5 standard and universal best practice. Always write your tags in lowercase to keep your code clean, consistent, and compatible with all tools and validators.

Section 3

The HTML Document Structure

Every HTML file follows the same basic structure. This boilerplate is so important that every code editor has a shortcut to generate it instantly (type ! and press Tab in VS Code). Let's understand each part:

index.html — complete boilerplate

HTML

<!-- 1. DOCTYPE: tells browser this is HTML5 -->
<!DOCTYPE html>

<!-- 2. Root element: wraps everything -->
<html lang="en">

<!-- 3. HEAD: metadata, title, links (not visible) -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>

<!-- 4. BODY: all visible content goes here -->
<body>
  <h1>Hello, World! 👋</h1>
  <p>Welcome to my first webpage.</p>
</body>

</html>

<!DOCTYPE html>

Document Type

Always the very first line. Tells the browser to use the modern HTML5 rendering mode. Without it, browsers enter "quirks mode" with unpredictable behaviour.

Root Element

Every other element lives inside this. The lang attribute helps screen readers, search engines, and translation tools understand the page language.

<head>

Document Head

Contains metadata — invisible to the user but vital for browsers, search engines, and social media. Holds the title, CSS links, fonts, and charset.

Character Encoding

UTF-8 supports every character on Earth — including Urdu, Arabic, emoji, and all Latin scripts. Always include this first inside <head>.

Viewport Meta

Tells mobile browsers not to zoom out and fake a desktop screen. Essential for every responsive website. Without it, mobile layouts break completely.

<body>

Document Body

Everything the user actually sees lives here — headings, paragraphs, images, buttons, forms, navigation, footer. The entire visible web page.

💡

VS Code shortcut: type ! + Tab

In VS Code (or any editor with Emmet support), create a new .html file, type an exclamation mark ! on the first line, and press Tab. The entire boilerplate is generated instantly. This is how every professional starts a new HTML file.

Section 4

Your First Complete Webpage

Let's build a real, complete webpage right now. Save this as index.html, open it in your browser, and you have a functioning website — no server, no framework, no tools needed.

index.html — your first webpage

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ali's Webpage</title>
</head>
<body>

  <h1>Hi, I'm Ali! 👋</h1>

  <p>I'm a student learning web development at
  <strong>BitWithBite</strong>. This is my very first webpage.</p>

  <h2>My Interests</h2>
  <ul>
    <li>🐍 Python Programming</li>
    <li>🌐 Web Development</li>
    <li>📊 Data Science</li>
  </ul>

  <p>Contact me:
    <a href="mailto:ali@example.com">ali@example.com</a>
  </p>

</body>
</html>

Save this file as index.html anywhere on your computer. Double-click it — your browser opens and displays your webpage. No internet connection needed. This is how all web development begins.

⚠️

Always save as .html — not .txt

If you're using Notepad on Windows, it will try to save as .txt by default. In the "Save As" dialog, change "Save as type" to "All Files" and type the filename as index.html. Or better — install VS Code (free) which handles this automatically and gives you syntax highlighting.

Section 5

How Browsers Render HTML

When you open an HTML file, the browser reads it top-to-bottom and builds a DOM (Document Object Model) — a tree of all the elements on the page. Then it paints the tree onto the screen. Understanding this process helps you write better HTML and debug rendering issues.

Nesting — elements inside elements

HTML

<!-- Correct nesting: inner closes before outer -->
<p>This is <strong>very important</strong> text.</p>

<!-- WRONG: overlapping tags break the DOM -->
<!-- <p>This is <strong>wrong</p></strong> -->

<!-- Indentation shows nesting visually -->
<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <h1>Welcome</h1>
    <p>Page content here.</p>
  </main>
</body>

🔍

Right-click → Inspect on any webpage

Every browser has DevTools. Right-click anything on any website and click "Inspect" (or press F12). You can see the live HTML of any page on the internet. Hover over elements in DevTools and they highlight on the page. This is how developers learn from real websites — and it's one of the most powerful learning tools available for free.

🧩 Knowledge Check

5 questions — Introduction to HTML

1. What does HTML stand for?

2. What is the purpose of the <!DOCTYPE html> declaration?

3. Which section of an HTML document contains what the user actually sees?

4. Which of these is a self-closing (void) element?

5. What does the lang="en" attribute on the <html> tag do?

🏗️

Challenge — Build Your About Page

Apply every concept from this lesson in one file

Task: Create a complete about-me.html file from scratch (no copy-pasting the boilerplate from memory — type it!) that includes:

1. A proper HTML5 boilerplate with correct DOCTYPE, html, head, and body
2. A meaningful <title> tag (your name + "| About Me")
3. A correct <meta charset> and <meta viewport>
4. In the body: an <h1> with your name, a <p> about yourself, an <h2> "My Skills", an unordered list <ul> with at least 3 skills
5. A paragraph with a clickable email link using <a href="mailto:...">
6. An HTML comment explaining what each major section does

💡 Show hints

Start with ! + Tab in VS Code, or type the boilerplate from memory
Title: <title>Ali Hassan | About Me</title>
Email link: <a href="mailto:you@email.com">you@email.com</a>
HTML comment: 
Open in browser: double-click the .html file

about-me.html — Sample Solution

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ali Hassan | About Me</title>
</head>
<body>

  <!-- Main heading with my name -->
  <h1>Hi, I'm Ali Hassan 👋</h1>

  <!-- Short introduction paragraph -->
  <p>
    I'm a 20-year-old student from Lahore, Pakistan. I'm passionate about
    technology and building things for the web. Currently learning
    <strong>HTML, CSS, and Python</strong> at BitWithBite.
  </p>

  <!-- Skills section -->
  <h2>My Skills</h2>
  <ul>
    <li>🐍 Python Programming</li>
    <li>🌐 HTML & CSS</li>
    <li>📊 Data Analysis</li>
    <li>🔧 Problem Solving</li>
  </ul>

  <!-- Contact information -->
  <h2>Contact Me</h2>
  <p>
    Feel free to reach out:
    <a href="mailto:ali@example.com">ali@example.com</a>
  </p>

</body>
</html>

Phase 1 · HTMLLesson 1 of 4