HTML Tutorial for Beginners (2025): Learn HTML Step by Step

HTML is the foundation of every website on the internet. Every page you visit — Google, YouTube, Amazon — is built with HTML. This tutorial takes you from zero to writing real web pages, with no prior experience required.

What you'll learn

Topic	What you'll be able to do
Setup	Write HTML in any text editor, view in browser
Document structure	Create valid HTML pages
Text elements	Format headings, paragraphs, and text
Links & images	Connect pages and embed media
Lists	Create ordered and unordered lists
Tables	Display data in rows and columns
Forms	Build contact forms and input fields
Semantic HTML5	Write accessible, SEO-friendly pages
Projects	Build 3 real web pages

HTML version used: HTML5 (current standard)

Part 1 — Why HTML?

HTML stands for HyperText Markup Language. It's not a programming language — it's a markup language that tells browsers how to structure and display content.

What HTML does	Example
Structure content	Headings, paragraphs, lists
Embed media	Images, videos, audio
Create links	Connect pages together
Build forms	Collect user input
Define meaning	Semantic structure for SEO + accessibility

HTML is always used with CSS (styling) and JavaScript (behavior). But HTML comes first — it's the skeleton.

HTML  → Structure (what's on the page)
CSS   → Style (how it looks)
JS    → Behavior (how it acts)

Part 2 — Setup

HTML needs zero installation. You need:

A text editor — VS Code (recommended), Notepad, or any editor
A web browser — Chrome, Firefox, or Edge

Your first HTML file

Open VS Code
Create a new file called index.html
Type the code below
Open the file in your browser (double-click or drag into browser)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>My first HTML page.</p>
</body>
</html>

You should see "Hello, World!" in your browser. That's it — you're writing HTML.

VS Code tip: Install the Live Server extension. It auto-refreshes your browser when you save.

Part 3 — HTML Document Structure

Every HTML page has the same skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta information — not visible on page -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title — Shows in browser tab</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Everything visible goes here -->
  <h1>Visible content</h1>
</body>
</html>

Part	Purpose
`<!DOCTYPE html>`	Tells browser this is HTML5
`<html lang="en">`	Root element, sets language
`<head>`	Meta info — title, charset, CSS links
`<meta charset="UTF-8">`	Supports all characters/emoji
`<meta name="viewport">`	Makes page mobile-responsive
`<title>`	Text in browser tab and search results
`<body>`	Everything the user sees

How HTML tags work

<tagname attribute="value">content</tagname>

<!-- Opening tag -->
<p>

<!-- Content -->
Hello world

<!-- Closing tag -->
</p>

<!-- Self-closing tag (no content) -->
<img src="photo.jpg" alt="A photo">
<br>
<input type="text">

Part 4 — Text Elements

Headings

HTML has 6 heading levels. Use them in order — don't skip from h1 to h4.

<h1>Main title — use once per page</h1>
<h2>Section heading</h2>
<h3>Subsection heading</h3>
<h4>Sub-subsection</h4>
<h5>Rarely used</h5>
<h6>Almost never used</h6>

Rule: One <h1> per page (important for SEO).

Paragraphs and text formatting

<p>This is a paragraph. HTML collapses whitespace,
so line breaks in your code don't matter.</p>

<p>Use multiple p tags for multiple paragraphs.</p>

<!-- Text formatting -->
<strong>Bold — important text</strong>
<em>Italic — emphasized text</em>
<u>Underline</u>
<s>Strikethrough</s>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<code>Inline code</code>
<sub>Subscript H<sub>2</sub>O</sub>
<sup>Superscript x<sup>2</sup></sup>

Tag	Meaning	Renders as
`<strong>`	Important text	Bold
`<em>`	Emphasized	Italic
`<b>`	Stylistically bold (no meaning)	Bold
`<i>`	Stylistically italic (no meaning)	Italic
`<mark>`	Highlighted	Yellow background
`<code>`	Code snippet	Monospace font

Line breaks and horizontal rules

<p>Line one<br>Line two — forced break</p>

<hr>  <!-- Horizontal divider line -->

Use <br> sparingly — prefer separate <p> tags for new paragraphs.

Part 5 — Links

The anchor tag <a> creates links.

<!-- External link -->
<a href="https://google.com">Visit Google</a>

<!-- Opens in new tab -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
  Open in new tab
</a>

<!-- Link to another page in your site -->
<a href="about.html">About</a>

<!-- Link to a section on the same page -->
<a href="#contact">Jump to Contact</a>

<!-- The target section needs an id -->
<section id="contact">
  <h2>Contact</h2>
</section>

<!-- Email link -->
<a href="mailto:hello@example.com">Send email</a>

<!-- Phone link (mobile) -->
<a href="tel:+1234567890">Call us</a>

<!-- Download link -->
<a href="document.pdf" download>Download PDF</a>

Attribute	Purpose
`href`	URL or path to navigate to
`target="_blank"`	Open in new tab
`rel="noopener noreferrer"`	Security — always use with `_blank`
`download`	Force browser to download file

Part 6 — Images

<!-- Basic image -->
<img src="cat.jpg" alt="A grey cat sitting on a chair">

<!-- Image from URL -->
<img src="https://example.com/photo.jpg" alt="Description">

<!-- Image with dimensions -->
<img src="logo.png" alt="Company logo" width="200" height="100">

<!-- Responsive image (CSS handles sizing) -->
<img src="hero.jpg" alt="Hero image" style="max-width: 100%;">

<!-- Image with a link -->
<a href="https://example.com">
  <img src="banner.jpg" alt="Click to visit Example">
</a>

Always write alt text. It:

Helps screen readers (accessibility)
Shows if image fails to load
Improves SEO

Attribute	Required?	Purpose
`src`	Yes	File path or URL
`alt`	Yes	Description of image
`width` / `height`	No	Avoid layout shift
`loading="lazy"`	No	Defer off-screen images

Image formats quick reference

Format	Best for
`.jpg` / `.jpeg`	Photos
`.png`	Graphics with transparency
`.svg`	Logos, icons (scales perfectly)
`.webp`	Modern format — smaller than jpg/png
`.gif`	Simple animations

Part 7 — Lists

Unordered list (bullets)

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Ordered list (numbered)

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<!-- Start at a different number -->
<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
</ol>

<!-- Different numbering style -->
<ol type="A">  <!-- A, B, C... -->
<ol type="i">  <!-- i, ii, iii... -->

Nested lists

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

Description list

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — structures web pages</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — styles web pages</dd>
</dl>

Part 8 — Tables

Tables display data in rows and columns. Don't use tables for page layout — use CSS Grid or Flexbox instead.

<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>Year</th>
      <th>Use case</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Python</td>
      <td>1991</td>
      <td>AI, data, web</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>1995</td>
      <td>Web browsers</td>
    </tr>
    <tr>
      <td>Java</td>
      <td>1995</td>
      <td>Enterprise, Android</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">3 popular languages</td>
    </tr>
  </tfoot>
</table>

Tag	Purpose
`<table>`	Creates the table
`<thead>`	Header section
`<tbody>`	Body section
`<tfoot>`	Footer section
`<tr>`	Table row
`<th>`	Header cell (bold, centered by default)
`<td>`	Data cell
`colspan="2"`	Cell spans 2 columns
`rowspan="2"`	Cell spans 2 rows

Part 9 — Forms

Forms collect user input. The data is sent to a server (or handled with JavaScript).

<form action="/submit" method="POST">

  <!-- Text input -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Your name" required>

  <!-- Email input -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <!-- Password -->
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="8" required>

  <!-- Number -->
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="1" max="120">

  <!-- Date -->
  <label for="dob">Date of birth:</label>
  <input type="date" id="dob" name="dob">

  <!-- Textarea (multi-line) -->
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="5" cols="40" placeholder="Your message..."></textarea>

  <!-- Dropdown select -->
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="">-- Select --</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
  </select>

  <!-- Checkboxes -->
  <p>Interests:</p>
  <label>
    <input type="checkbox" name="interest" value="html"> HTML
  </label>
  <label>
    <input type="checkbox" name="interest" value="css"> CSS
  </label>

  <!-- Radio buttons -->
  <p>Experience:</p>
  <label>
    <input type="radio" name="exp" value="beginner"> Beginner
  </label>
  <label>
    <input type="radio" name="exp" value="advanced"> Advanced
  </label>

  <!-- File upload -->
  <label for="photo">Upload photo:</label>
  <input type="file" id="photo" name="photo" accept="image/*">

  <!-- Hidden field -->
  <input type="hidden" name="source" value="homepage">

  <!-- Submit button -->
  <button type="submit">Send</button>
  <button type="reset">Clear</button>

</form>

Input types reference

`type`	Purpose	Example
`text`	Single-line text	Name, city
`email`	Email address (validated)	hello@example.com
`password`	Masked text	Login forms
`number`	Numeric value	Age, quantity
`date`	Date picker	Birthday
`time`	Time picker	Appointment
`url`	URL (validated)	Website
`tel`	Phone number	+1 555 1234
`checkbox`	Toggle on/off	Interests
`radio`	Pick one from many	Gender
`file`	File upload	Profile photo
`range`	Slider	Volume 0-100
`color`	Color picker	Theme color
`search`	Search field	Search bar
`hidden`	Not visible	Tracking data
`submit`	Submit button	Send form

Form validation attributes

<input required>                    <!-- Must be filled -->
<input minlength="3" maxlength="50"> <!-- Length limits -->
<input min="0" max="100">           <!-- Number range -->
<input pattern="[A-Za-z]{3,}">     <!-- Regex pattern -->

Part 10 — Semantic HTML5

Semantic tags describe what the content means, not just what it looks like. They help:

Search engines understand your page structure
Screen readers navigate for visually impaired users
Developers understand the code

Old way (non-semantic)

<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div class="article">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

New way (semantic HTML5)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>

  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Blog Post Title</h2>
      <p>Published: <time datetime="2025-01-15">January 15, 2025</time></p>
      <p>Post content goes here...</p>

      <section>
        <h3>Section within article</h3>
        <p>More content...</p>
      </section>
    </article>

    <aside>
      <h3>Related Posts</h3>
      <ul>
        <li><a href="/post-2">Another post</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Website. All rights reserved.</p>
  </footer>

</body>
</html>

Semantic elements reference

Tag	Purpose
`<header>`	Page or section header
`<nav>`	Navigation links
`<main>`	Main content (one per page)
`<article>`	Self-contained content (blog post, news)
`<section>`	Thematic grouping of content
`<aside>`	Sidebar, related content
`<footer>`	Page or section footer
`<figure>`	Image with caption
`<figcaption>`	Caption for `<figure>`
`<time>`	Date or time
`<address>`	Contact information
`<mark>`	Highlighted/relevant text
`<summary>` / `<details>`	Expandable section
`<dialog>`	Modal dialog

Part 11 — HTML Attributes

Attributes add extra information to tags.

<!-- Global attributes (work on any tag) -->
<div id="unique-id">Only one per page</div>
<div class="reusable card">Can repeat</div>
<div style="color: red;">Inline styles (avoid)</div>
<div title="Tooltip text">Hover me</div>
<div hidden>Not visible</div>
<div tabindex="0">Keyboard focusable</div>
<div contenteditable="true">User can edit this</div>

<!-- data-* custom attributes -->
<button data-user-id="42" data-action="delete">Delete</button>

<!-- Accessibility attributes -->
<img src="chart.png" alt="Sales chart showing 20% growth">
<button aria-label="Close menu">×</button>
<div role="alert">Error message</div>
<input aria-describedby="hint">
<p id="hint">Enter at least 8 characters</p>

<!-- Language -->
<p lang="fr">Bonjour le monde</p>

Attribute	Purpose
`id`	Unique identifier — one per page
`class`	Reusable — multiple per element, multiple elements
`style`	Inline CSS — avoid in favour of stylesheets
`title`	Tooltip on hover
`hidden`	Hides element
`data-*`	Custom data for JavaScript
`alt`	Image description
`href`	Link destination
`src`	Resource path (img, script)
`lang`	Language of content

Part 12 — HTML Entities

Some characters have special meaning in HTML (<, >, &). Use entities to display them.

<!-- Reserved characters -->
&lt;   →  <
&gt;   →  >
&amp;  →  &
&quot; →  "
&apos; →  '

<!-- Common symbols -->
&copy;  →  ©
&reg;   →  ®
&trade; →  ™
&nbsp;  →  non-breaking space
&mdash; →  —
&ndash; →  –
&euro;  →  €
&pound; →  £
&yen;   →  ¥

<!-- Example usage -->
<p>Use &lt;p&gt; for paragraphs.</p>
<p>&copy; 2025 My Company</p>
<p>Price: &euro;29.99</p>

Part 13 — Meta Tags

Meta tags go in <head> and provide information about the page.

<head>
  <!-- Character encoding — always first -->
  <meta charset="UTF-8">

  <!-- Mobile responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO description (shows in Google results) -->
  <meta name="description" content="Learn HTML from scratch. Complete beginner guide with examples.">

  <!-- Keywords (less important now, but harmless) -->
  <meta name="keywords" content="html tutorial, learn html, html for beginners">

  <!-- Author -->
  <meta name="author" content="Your Name">

  <!-- Prevent search engine indexing -->
  <meta name="robots" content="noindex, nofollow">

  <!-- Social sharing — Open Graph (Facebook, LinkedIn) -->
  <meta property="og:title" content="HTML Tutorial for Beginners">
  <meta property="og:description" content="Learn HTML from scratch.">
  <meta property="og:image" content="https://example.com/thumbnail.jpg">
  <meta property="og:url" content="https://example.com/html-tutorial">
  <meta property="og:type" content="article">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML Tutorial for Beginners">
  <meta name="twitter:description" content="Learn HTML from scratch.">
  <meta name="twitter:image" content="https://example.com/thumbnail.jpg">

  <!-- Page refresh (redirect after 5 seconds) -->
  <meta http-equiv="refresh" content="5;url=https://example.com">

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- Page title -->
  <title>HTML Tutorial | MySite</title>
</head>

Part 14 — HTML + CSS

HTML structures content. CSS styles it. They work together.

Linking CSS

<!-- External stylesheet (recommended) -->
<link rel="stylesheet" href="style.css">

<!-- Internal stylesheet -->
<style>
  h1 { color: blue; }
  p { font-size: 18px; }
</style>

<!-- Inline style (avoid — hard to maintain) -->
<p style="color: red; font-size: 20px;">Red text</p>

Your first CSS file (`style.css`)

/* Reset default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 2rem;
  color: #1a1a2e;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

Part 15 — 3 Real Projects

Project 1: Personal Profile Page

Build a basic "about me" page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jane Doe — Web Developer</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; }
    img { border-radius: 50%; width: 150px; height: 150px; object-fit: cover; }
    h1 { margin-top: 20px; }
    .skills { display: flex; gap: 10px; flex-wrap: wrap; }
    .skill { background: #e0e7ff; padding: 4px 12px; border-radius: 20px; }
  </style>
</head>
<body>

  <header>
    <img src="https://via.placeholder.com/150" alt="Jane Doe profile photo">
    <h1>Jane Doe</h1>
    <p>Web Developer based in London 🇬🇧</p>
    <nav>
      <a href="#about">About</a> |
      <a href="#skills">Skills</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>Hi! I'm Jane, a self-taught web developer with a passion for building clean, accessible websites. I specialize in HTML, CSS, and JavaScript.</p>
    </section>

    <section id="skills">
      <h2>Skills</h2>
      <div class="skills">
        <span class="skill">HTML5</span>
        <span class="skill">CSS3</span>
        <span class="skill">JavaScript</span>
        <span class="skill">React</span>
        <span class="skill">Git</span>
      </div>
    </section>

    <section id="experience">
      <h2>Experience</h2>
      <article>
        <h3>Frontend Developer — Acme Corp</h3>
        <p><time datetime="2023-01">January 2023</time> – Present</p>
        <ul>
          <li>Built responsive landing pages</li>
          <li>Reduced page load time by 40%</li>
          <li>Collaborated with designers using Figma</li>
        </ul>
      </article>
    </section>
  </main>

  <footer id="contact">
    <h2>Contact</h2>
    <p>Email: <a href="mailto:jane@example.com">jane@example.com</a></p>
    <p>&copy; 2025 Jane Doe</p>
  </footer>

</body>
</html>

What you practice: Semantic HTML, links, lists, images, sections, nav

Project 2: Contact Form

Build a working contact form (with HTML5 validation).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 40px auto; padding: 20px; }
    label { display: block; margin-top: 15px; font-weight: bold; }
    input, textarea, select { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
    textarea { height: 120px; resize: vertical; }
    button { margin-top: 20px; padding: 12px 30px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
    button:hover { background: #0052a3; }
    .required { color: red; }
  </style>
</head>
<body>

  <h1>Contact Us</h1>
  <p>Fill in the form and we'll get back to you within 24 hours.</p>

  <form action="/submit-form" method="POST">

    <label for="name">
      Full Name <span class="required">*</span>
    </label>
    <input type="text" id="name" name="name"
           placeholder="Jane Doe"
           required minlength="2" maxlength="100">

    <label for="email">
      Email Address <span class="required">*</span>
    </label>
    <input type="email" id="email" name="email"
           placeholder="jane@example.com"
           required>

    <label for="phone">Phone Number</label>
    <input type="tel" id="phone" name="phone"
           placeholder="+1 555 123 4567">

    <label for="subject">Subject <span class="required">*</span></label>
    <select id="subject" name="subject" required>
      <option value="">-- Please select --</option>
      <option value="general">General inquiry</option>
      <option value="support">Technical support</option>
      <option value="billing">Billing question</option>
      <option value="other">Other</option>
    </select>

    <label for="message">
      Message <span class="required">*</span>
    </label>
    <textarea id="message" name="message"
              placeholder="How can we help you?"
              required minlength="10"></textarea>

    <label>
      <input type="checkbox" name="newsletter" value="yes">
      Subscribe to our newsletter
    </label>

    <button type="submit">Send Message</button>
    <button type="reset" style="background:#666; margin-left: 10px;">Clear</button>

  </form>

</body>
</html>

What you practice: All form elements, labels, validation, accessibility

Project 3: Product Comparison Table

Build a pricing/feature comparison page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Plans</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
    h1 { text-align: center; }
    p.subtitle { text-align: center; color: #666; margin-bottom: 30px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #ddd; }
    th { background: #1a1a2e; color: white; }
    tr:hover { background: #f5f5f5; }
    .check { color: green; font-size: 1.2em; }
    .cross { color: red; font-size: 1.2em; }
    .highlight { background: #fff3cd; font-weight: bold; }
    .price { font-size: 1.5em; font-weight: bold; color: #0066cc; }
    caption { caption-side: bottom; margin-top: 10px; color: #666; font-size: 0.9em; }
  </style>
</head>
<body>

  <h1>Choose Your Plan</h1>
  <p class="subtitle">All plans include a 14-day free trial. No credit card required.</p>

  <table>
    <caption>Prices in USD per month, billed annually</caption>
    <thead>
      <tr>
        <th>Feature</th>
        <th>Free</th>
        <th>Pro</th>
        <th class="highlight">Business</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Price</strong></td>
        <td><span class="price">$0</span></td>
        <td><span class="price">$9</span></td>
        <td class="highlight"><span class="price">$29</span></td>
      </tr>
      <tr>
        <td>Projects</td>
        <td>3</td>
        <td>25</td>
        <td class="highlight">Unlimited</td>
      </tr>
      <tr>
        <td>Team members</td>
        <td>1</td>
        <td>5</td>
        <td class="highlight">Unlimited</td>
      </tr>
      <tr>
        <td>Storage</td>
        <td>1 GB</td>
        <td>20 GB</td>
        <td class="highlight">100 GB</td>
      </tr>
      <tr>
        <td>Custom domain</td>
        <td><span class="cross">✗</span></td>
        <td><span class="check">✓</span></td>
        <td class="highlight"><span class="check">✓</span></td>
      </tr>
      <tr>
        <td>Analytics</td>
        <td><span class="cross">✗</span></td>
        <td>Basic</td>
        <td class="highlight">Advanced</td>
      </tr>
      <tr>
        <td>Priority support</td>
        <td><span class="cross">✗</span></td>
        <td><span class="cross">✗</span></td>
        <td class="highlight"><span class="check">✓</span></td>
      </tr>
      <tr>
        <td>API access</td>
        <td><span class="cross">✗</span></td>
        <td><span class="check">✓</span></td>
        <td class="highlight"><span class="check">✓</span></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td><a href="/signup">Get started</a></td>
        <td><a href="/signup-pro">Try Pro free</a></td>
        <td class="highlight"><a href="/signup-business">Try Business free</a></td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

What you practice: Tables, colspan/rowspan, CSS table styling, tfoot, caption

Learning Path

Stage	Topics	Time
1. HTML basics	Tags, attributes, text, links, images	1–2 days
2. Lists & tables	`ul`, `ol`, `table`	1 day
3. Forms	All input types, validation	1–2 days
4. Semantic HTML	`header`, `main`, `article`, `nav`	1 day
5. Meta & SEO	Head tags, Open Graph	1 day
6. HTML + CSS	Link stylesheets, basic CSS	1 week
7. HTML + JavaScript	DOM manipulation	2+ weeks
8. Build projects	Portfolio, forms, blog	Ongoing

After HTML → learn: CSS (layout, animations) → then JavaScript (interactivity)

Common Mistakes

Mistake	Wrong	Right
Forgetting `alt` on images	`<img src="cat.jpg">`	`<img src="cat.jpg" alt="Cat">`
Multiple `<h1>` per page	3 h1 tags	1 h1, then h2/h3
Skipping heading levels	`<h1>` then `<h4>`	`<h1>` → `<h2>` → `<h3>`
Using `<div>` for everything	`<div id="nav">`	`<nav>`
`<br>` instead of `<p>`	Line1`<br><br>`Line2	`<p>`Line1`</p><p>`Line2`</p>`
Using tables for layout	Table-based grid	CSS Grid/Flexbox
Missing `<!DOCTYPE html>`	No doctype	Always start with DOCTYPE
`<b>` instead of `<strong>`	`<b>Important!</b>`	`<strong>Important!</strong>`

HTML vs Related Technologies

Term	What it is	Relation to HTML
HTML	Markup language — structure	Foundation
CSS	Style language — appearance	Styles HTML elements
JavaScript	Programming language — behavior	Manipulates HTML
HTML5	Current HTML version (since 2014)	What you're learning
DOM	Document Object Model	JS's view of HTML as a tree
JSX	HTML-like syntax in React	Compiles to JS, not real HTML
Markdown	Lightweight text format	Converts to HTML
XML	Strict markup language	HTML is loosely based on it
XHTML	Strict version of HTML	Mostly replaced by HTML5
Emmet	Code shorthand for editors	Generates HTML quickly

Frequently Asked Questions

Is HTML a programming language? No. HTML is a markup language — it describes structure and content. It has no variables, functions, or logic. Programming languages (JavaScript, Python) have those. You need both HTML and JavaScript to build interactive pages.

Do I need to memorize all HTML tags? No. There are 100+ HTML tags, but you'll use about 20–30 regularly. You'll naturally memorize those. For the rest, MDN Web Docs (developer.mozilla.org) is your reference.

What's the difference between HTML4 and HTML5? HTML5 (2014) added semantic elements (<article>, <section>, <nav>), native video/audio, the Canvas API, local storage, form input types (date, color, range), and removed obsolete tags like <font> and <center>.

Should I learn HTML before CSS and JavaScript? Yes. HTML provides the structure that CSS styles and JavaScript controls. Learn them in order: HTML → CSS → JavaScript. Trying to learn all three at once is overwhelming.

How long does it take to learn HTML? Basic HTML in 2–3 days. Comfortable with all tags and forms in 1–2 weeks. Truly proficient after building a few real projects. HTML is one of the fastest things to learn in web development.

Do I need a web server to use HTML? No — for learning, just open .html files directly in your browser. For deployment (sharing your site with others), you'll need hosting (GitHub Pages, Netlify, or Vercel are free options).