6 topics · Real markup patterns · Zero setup

HTML, the skeleton of the web.

A practical HTML guide with real examples for content structure, forms, tables, media, and semantic page layouts. Every example runs live in the Preview tab.

Start Learning ↓ Open Editor →

🏷️ Elements ⚙️ Attributes 📐 Semantic 📝 Forms 📊 Tables 🖼️ Media

🏷️

Elements

The building blocks of every HTML page.

HTML is made of elements that describe headings, paragraphs, links, lists, cards, forms, media, and sections of a page. Good HTML is not just valid markup, it gives structure that designers, JavaScript, search engines, and assistive tech can all understand.

Marketing copy blocks▶ Try it

<h1>Main heading</h1>
<h2>Sub heading</h2>
<h3>Smaller heading</h3>

<p>A paragraph of text.</p>

<strong>Bold text</strong>
<em>Italic text</em>
<mark>Highlighted</mark>

Feature checklist▶ Try it

<!-- Unordered -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<!-- Ordered -->
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

CTA links & inline text▶ Try it

<a href="https://example.com">
  Click here
</a>

<br> <!-- line break -->
<hr> <!-- horizontal rule -->

<code>inline code</code>
<abbr title="HyperText">HTML</abbr>

⚙️

Attributes

Extra information added to elements.

Attributes add detail and behavior to markup: where a link goes, what an image describes, which field is required, or which class a component uses. They are small, but they control accessibility, linking, validation, and styling hooks across real interfaces.

Product card attributes▶ Try it

<!-- id — unique identifier -->
<div id="header">…</div>

<!-- class — for CSS styling -->
<p class="highlight bold">Text</p>

<!-- title — tooltip on hover -->
<span title="More info">Hover me</span>

<!-- style — inline CSS -->
<p style="color: red;">Red text</p>

Navigation & external links▶ Try it

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

<!-- Anchor (jump to section) -->
<a href="#section-id">Jump down</a>

Form state attributes▶ Try it

<!-- disabled — no value needed -->
<button disabled>Can't click</button>

<!-- checked checkbox -->
<input type="checkbox" checked>

<!-- required field -->
<input type="text" required placeholder="Required">

📐

Semantic HTML

Tags that describe meaning, not just appearance.

Semantic elements describe what a part of the page actually is: navigation, main content, an article, a sidebar, a footer. That clarity helps accessibility, SEO, and teamwork. When the markup says what the content means, the whole project becomes easier to maintain.

Landing page skeleton▶ Try it

<header>
  <nav>Navigation links</nav>
</header>

<main>
  <article>
    <h1>Post title</h1>
    <p>Post content…</p>
  </article>

  <aside>Sidebar content</aside>
</main>

<footer>Footer info</footer>

Feature section & figure▶ Try it

<section id="about">
  <h2>About us</h2>
  <p>We build cool things.</p>
</section>

<figure>
  <img src="https://picsum.photos/id/1025/600/400" alt="A friendly dog in a field">
  <figcaption>Photo caption</figcaption>
</figure>

Replace generic div wrappers▶ Try it

<!-- ❌ Not semantic -->
<div class="header">
  <div class="nav">…</div>
</div>

<!-- ✅ Semantic -->
<header>
  <nav>…</nav>
</header>

Responsive navbar markup▶ Try it

<header>
  <nav aria-label="Main navigation">
    <a href="#">LiveJS</a>
    <button type="button" aria-expanded="false">Menu</button>
    <ul>
      <li><a href="#features">Features</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

Pricing section structure▶ Try it

<section id="pricing">
  <h2>Simple pricing for every team</h2>
  <div>
    <article>
      <h3>Starter</h3>
      <p>$0 / month</p>
      <ul>
        <li>3 projects</li>
        <li>Basic themes</li>
      </ul>
    </article>
  </div>
</section>

📝

Forms

Collect real user input with fields, groups and validation.

Forms are how users sign up, search, send messages, and complete checkouts. A <form> wraps related controls, and each <label> should point to its input using for + id. Common real-world form features include validation, grouped fields, placeholders, helper text, and accessible buttons.

Newsletter signup form▶ Try it

<form>
  <label for="name">Name</label>
  <input
    type="text"
    id="name"
    placeholder="Your name"
    required
  >

  <label for="email">Email</label>
  <input type="email" id="email">

  <button type="submit">Submit</button>
</form>

Support request fields▶ Try it

<select name="color">
  <option value="red">Red</option>
  <option value="blue" selected>Blue</option>
  <option value="green">Green</option>
</select>

<textarea
  rows="4"
  placeholder="Write something…"
></textarea>

Preferences & plan choice▶ Try it

<!-- Checkboxes -->
<input type="checkbox" id="js">
<label for="js">JavaScript</label>

<input type="checkbox" id="css" checked>
<label for="css">CSS</label>

<!-- Radio buttons (pick one) -->
<input type="radio" name="level" value="beginner">
<input type="radio" name="level" value="pro">

Fieldset & validation▶ Try it

<form>
  <fieldset>
    <legend>Billing details</legend>

    <label for="company">Company</label>
    <input id="company" type="text" minlength="2">

    <label for="vat">VAT ID</label>
    <input id="vat" type="text" pattern="[A-Z0-9]{6,}" required>
  </fieldset>

  <button type="submit">Save billing info</button>
</form>

Auth form layout▶ Try it

<form>
  <h2>Sign in</h2>
  <p>Access your projects and saved workspaces.</p>

  <label for="auth-email">Email</label>
  <input id="auth-email" type="email" required>

  <label for="auth-password">Password</label>
  <input id="auth-password" type="password" minlength="8">

  <button type="submit">Continue</button>
</form>

📊

Tables

Display structured data in rows and columns.

Use <table> for data — not for layout. A table has a <thead> for the header row, a <tbody> for the data rows, and optionally a <tfoot>. Each row is a <tr>, header cells are <th>, and data cells are <td>.

Team metrics table▶ Try it

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Mihai</td>
      <td>87</td>
    </tr>
  </tbody>
</table>

colspan & rowspan▶ Try it

<table>
  <tr>
    <!-- spans 2 columns -->
    <th colspan="2">Full Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Popescu</td>
    <td>95</td>
  </tr>
</table>

Revenue report table▶ Try it

<table>
  <caption>Q1 Results</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Jan</td><td>$12k</td></tr>
    <tr><td>Feb</td><td>$18k</td></tr>
  </tbody>
</table>

Dashboard stat cards markup▶ Try it

<section aria-label="Dashboard summary">
  <article>
    <h3>Active users</h3>
    <p>1,240</p>
  </article>

  <article>
    <h3>Projects</h3>
    <p>86</p>
  </article>

  <article>
    <h3>Uptime</h3>
    <p>99.98%</p>
  </article>
</section>

🖼️

Media

Images, video, audio and embeds for real pages.

HTML supports embedding images, video, audio, and third-party content natively. In real pages, you will often add captions, lazy loading, responsive sizing, and descriptive fallback text so media stays accessible and loads efficiently.

Hero images▶ Try it

<!-- Basic image -->
<img
  src="https://picsum.photos/id/1015/800/600"
  alt="A scenic mountain view"
  width="800"
  height="600"
>

<!-- Responsive image -->
<img
  src="https://picsum.photos/id/1039/900/500"
  alt="A calm lake at sunset"
  style="max-width: 100%; height: auto;"
>

Product demo video▶ Try it

<video
  width="640"
  controls
  autoplay
  muted
  loop
>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  Your browser doesn't support video.
</video>

Podcast clip & map embed▶ Try it

<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mp3">
</audio>

<!-- Embed a webpage / map -->
<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=26.08%2C44.42%2C26.14%2C44.45&layer=mapnik"
  width="100%"
  height="400"
  title="Embedded map"
></iframe>

Responsive article media▶ Try it

<figure>
  <img
    src="https://picsum.photos/id/1040/900/520"
    alt="City skyline at dusk"
    loading="lazy"
    decoding="async"
  >
  <figcaption>Hero image used on the homepage.</figcaption>
</figure>

<picture>
  <source media="(min-width: 768px)" srcset="banner-large.webp">
  <img src="banner-mobile.webp" alt="Promo banner">
</picture>

Ready to practice HTML?

Open the editor and practice real HTML patterns for landing pages, forms, tables, and media. Keep the Preview open and iterate on your own content.

⚡ Launch Editor ← Back to Learn

All examples work in the Preview tab · Free forever