Interactive HTML Learning Guide

An explorable guide to the fundamental building blocks of the web. Use the sidebar to navigate or scroll to explore.

Your Progress

This chart shows the categories of tags you've learned.

1. Introduction to HTML

HTML stands for HyperText Markup Language. It's the standard language used to create and structure web pages. Think of it as the skeleton of a website.

You use HTML "tags" (like <p> for a paragraph) to wrap your content and tell the browser what each part is. For example, the browser knows to display <h1> as a large heading and <p> as a regular paragraph.

2. Basic HTML Document Structure

This is the skeleton of every web page. It tells the browser it's an HTML5 document (<!DOCTYPE html>) and separates metadata (<head>) from the visible content (<body>).

Example: The Basic Skeleton

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

Example: Head Tags (Link, Style, Script)

The <head> contains "meta" information. This includes <link> to add CSS files, <style> to write CSS directly, <script> to add JavaScript, and <base> to set a base URL for all relative links on the page.

<head>
  <title>My Page</title>

  <<!-- Link to an external CSS file -->
  <link rel="stylesheet" href="style.css">
  
  <<!-- Set a base URL -->
  <base href="https://www.example.com/assets/">

  <<!-- Embed internal CSS -->
  <style>
    h1 { color: blue; }
  </style>
  
  <<!-- Embed internal JavaScript -->
  <script>
    console.log("Hello from the head!");
  </script>
  
  <<!-- Fallback content for no-script users -->
  <noscript>
    <p>Please enable JavaScript for this site.</p>
  </noscript>
</head>
<body>
  <h1>Check the style!</h1>
  <p>This text will be blue.</p>
</body>

3. Text Formatting Tags

These tags give meaning and structure to your text. Use <h1>-<h6> for headings, <p> for paragraphs, and other tags like <strong>, <em>, and <code> to style parts of your text.

Example: Headings & Paragraphs

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<p>This is a standard paragraph of text.</p>
<p>This is another paragraph.</p>

Example: Semantic & Style Formatting

<p>This text is <strong>important (strong)</strong>.</p>
<p>This text is <em>emphasized (em)</em>.</p>
<p>This text is just <b>bold (b)</b>.</p>
<p>This text is just <i>italic (i)</i>.</p>
<p>This text is <u>underlined (u)</u>.</p>
<p>This text is <mark>highlighted (mark)</mark>.</p>
<p>This is <small>small text (small)</small>.</p>
<p>Price: <s>$99 (s)</s> <span>Price: <del>$99 (del)</del> <ins>$75 (ins)</ins></span></p>
<p>H<sub>2</sub>O (sub) and E=mc<sup>2</sup> (sup).</p>

Example: Blockquote, Cite, & Address

<blockquote>
  "This is a long quote (blockquote) from another source. 
  It is usually indented."
</blockquote>
<p>He said, <q>This is a short quote (q)</q>.</p>
<p>My favorite book is <cite>Dune</cite> (cite).</p>

<address>
  Written by John Doe.<br> <span class="comment"><!-- (br) is a line break -->
  Visit us at: example.com
</address>

Example: Code, Pre, & Technical

<p>Inline <code>console.log()</code> tag.</p>

<pre>
<code>
function hello() {
  // (pre) preserves whitespace
  return "Hello!";
}
</code>
</pre>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> (kbd).</p>
<p>Program output: <samp>File not found.</samp> (samp).</p>
<p>The equation is <var>x</var> + <var>y</var> (var).</p>
<p>This is a long<wbr>word (wbr) that can break.</p>

Example: Abbr, Time, Dfn, & Direction

<p>I'm learning <abbr title="HyperText Markup Language">HTML</abbr> (abbr).</p>
<p>We open at <time datetime="10:00">10 AM</time> (time).</p>
<p>The <dfn>browser</dfn> (dfn) is a software app.</p>
<hr> <span class="comment"><!-- (hr) is a horizontal rule -->
<p>This text is normal.</p>
<p><bdo dir="rtl">This text is right-to-left (bdo).</bdo></p>
<p>User <bdi>مرحبا</bdi> (bdi) scores 10 points.</p>
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp> (ruby, rt, rp)
</ruby>

5. Lists

HTML provides three types of lists: <ul> (unordered list), <ol> (ordered list), and <dl> (description list). All use <li> for list items, except for <dl> which uses <dt> (term) and <dd> (description).

Example: Unordered & Ordered Lists

<h3>Unordered List (ul, li)</h3>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h3>Ordered List (ol, li)</h3>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Example: Description List

<h3>Description List (dl, dt, dd)</h3>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

6. Tables

Tables are used to display data in rows and columns. The main tags are <table>, <tr> (row), <th> (header cell), and <td> (data cell). You can group rows with <thead>, <tbody>, and <tfoot>.

Example: Basic Table

<style>
  /* Basic table styles for the preview */
  table, th, td { border: 1px solid #ccc; border-collapse: collapse; }
  th, td { padding: 8px; text-align: left; }
  caption { font-weight: bold; margin-bottom: 8px; }
</style>

<table>
  <caption>Monthly Savings</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Example: Column Groups (colgroup, col)

<style>
  table, th, td { border: 1px solid #ccc; border-collapse: collapse; }
  th, td { padding: 8px; text-align: left; }
</style>

<table>
  <colgroup>
    <<!-- (col) styles the first column -->
    <col style="background-color: #f0f0f0">
    <<!-- (span) makes this apply to 2 columns -->
    <col span="2">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

7. Forms

Forms are used to collect user input. The <form> tag wraps all the controls, like <input>, <textarea>, <select>, and <button>. Use <label> for accessibility.

Example: Basic Form (form, label, input, button)

<style>
  form div { margin-bottom: 10px; }
  label { display: inline-block; width: 80px; }
  input, textarea, select { border: 1px solid #ccc; padding: 4px; }
</style>

<form action="#" method="get">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="user_pass">
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

Example: Fieldset, Legend, Textarea

<style>
  fieldset { border: 1px solid #ccc; padding: 10px; }
  legend { font-weight: bold; }
  textarea { vertical-align: top; }
</style>

<form>
  <fieldset>
    <legend>User Details</legend>
    <div>
      <label for="msg">Message:</label>
      <textarea id="msg" rows="3" cols="30"></textarea>
    </div>
  </fieldset>
</form>

Example: Select, Datalist, & Input Types

<style>
  form div { margin-bottom: 10px; }
</style>

<form>
  <div>
    <label for="cars">Choose a car (select):</label>
    <select id="cars">
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div>
    <label for="browser">Browser (datalist):</label>
    <input list="browsers" id="browser">
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
    </datalist>
  </div>
  
  <div>
    <input type="radio" id="html" value="HTML">
    <label for="html">HTML</label>
    <input type="checkbox" id="css" value="CSS">
    <label for="css">CSS</label>
  </div>
</form>

Example: Output, Progress, & Meter

<h3>Output (for calculations)</h3>
<form oninput="x.value=parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="50"> +
  <input type="number" id="b" value="50"> =
  <output name="x" for="a b">100</output>
</form>

<h3>Progress (task completion)</h3>
<label for="file">Downloading:</label>
<progress id="file" value="70" max="100"> 70% </progress>

<h3>Meter (a gauge)</h3>
<label for="disk">Disk Usage:</label>
<meter id="disk" value="6" min="0" max="10">6 out of 10</meter>

8. Semantic Layout Tags

Semantic tags describe their meaning. This is better than using <div> everywhere. They help with accessibility and SEO. Use <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to structure your page.

Example: Page Layout

<style>
  body { padding: 0; margin: 0; font-family: sans-serif; }
  header { background: #eee; padding: 10px; }
  nav { background: #333; padding: 5px; }
  nav a { color: white; margin: 5px; }
  main { background: #fff; padding: 10px; }
  section { margin-bottom: 10px; border-bottom: 1px solid #ccc; }
  article { font-style: italic; }
  aside { float: right; width: 30%; background: #f9f9f9; padding: 10px; }
  footer { background: #333; color: white; padding: 10px; text-align: center; }
  div { border: 2px dashed blue; padding: 5px; margin-top: 5px; }
</style>

<header>
  <h1>My Website (header)</h1>
</header>

<nav>
  <a href="#">Home (nav)</a>
  <a href="#">About</a>
</nav>

<aside>
  <h4>Sidebar (aside)</h4>
  <p>Related links.</p>
</aside>

<main>
  <h2>Main Content (main)</h2>
  <section>
    <h3>Section 1</h3>
    <article>
      <p>This is an article. (article)</p>
    </article>
  </section>
  <div>This is just a (div) container.</div>
</main>

<footer>
  <p>Copyright 2025 (footer)</p>
</footer>

Example: Details, Dialog, Data, Template

<h3>Details & Summary</h3>
<details>
  <summary>Click to expand</summary>
  <p>Here is the hidden content!</p>
</details>

<h3>Data (links content to machine value)</h3>
<ul>
  <li><data value="21053">Cherry Tomato</data></li>
</ul>

<h3>Dialog (modal window)</h3>
<dialog id="myDialog">
  <p>This is a dialog window.</p>
  <button id="closeBtn">Close</button>
</dialog>
<button id="openBtn">Open Dialog</button>

<h3>Template (hidden content for JS)</h3>
<template id="myTemplate">
  <p>This is a new paragraph!</p>
</template>
<button id="addBtn">Add from template</button>
<div id="templateTarget"></div>

<script>
  // JS for Dialog
  const openBtn = document.getElementById('openBtn');
  const closeBtn = document.getElementById('closeBtn');
  const dialog = document.getElementById('myDialog');
  openBtn.addEventListener('click', () => dialog.showModal());
  closeBtn.addEventListener('click', () => dialog.close());

  // JS for Template
  const addBtn = document.getElementById('addBtn');
  const template = document.getElementById('myTemplate');
  const target = document.getElementById('templateTarget');
  addBtn.addEventListener('click', () => {
    const clone = template.content.cloneNode(true);
    target.appendChild(clone);
  });
</script>

9. HTML Final Project: Build a Blog Post

Let's combine all the HTML tags we've learned. Your goal is to structure a complete blog post. Use semantic tags for the layout, headings and paragraphs for the text, an image, and a list for key points.

This editor is pre-filled with the final code. Try deleting it and writing it from scratch!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Blog Post</title>
  <style>
    /* Simple styles for the preview */
    body { font-family: sans-serif; line-height: 1.6; padding: 20px; max-width: 700px; margin: auto; }
    header { border-bottom: 2px solid #eee; padding-bottom: 10px; }
    img { max-width: 100%; border-radius: 8px; }
    ul { background: #f9f9f9; border-left: 3px solid #5E35B1; padding-left: 40px; }
    footer { margin-top: 20px; padding-top: 10px; border-top: 1px solid #eee; font-size: 0.9em; color: #777; }
  </style>
</head>
<body>

  <header>
    <h1>My First Blog Post</h1>
    <p>Published on <time datetime="2025-10-22">October 22, 2025</time></p>
  </header>

  <main>
    <article>
      <h2>Learning HTML is Fun</h2>
      <p>
        Today I'm building a web page using all the HTML tags I've learned.
        HTML is the skeleton of every website, and getting the structure
        right is the most important step.
      </p>
      
      <figure>
        <img src="https://placehold.co/600x300/EDE7F6/311B92?text=My+Blog+Image" alt="A placeholder image">
        <figcaption>A placeholder for my blog.</figcaption>
      </figure>
      
      <h3>Key Takeaways</h3>
      <ul>
        <li>Use <strong>semantic tags</strong> like <code>&lt;header&gt;</code> and <code>&lt;main&gt;</code>.</li>
        <li>Structure text with <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code>.</li>
        <li>Use <code>&lt;img&gt;</code> for images and <code>&lt;ul&gt;</code> for lists.</li>
      </ul>
    </article>
  </main>

  <footer>
    <address>
      Contact: <a href="mailto:me@example.com">me@example.com</a>
    </address>
    <p>&copy; 2025 My Learning Website</p>
  </footer>

</body>
</html>

10. Live Practice Editor

Use this space to experiment. Type any HTML in the box on the left, and see it render live in the preview on the right. Try to build something new!

HTML Code

Live Preview