HTML Examples

Use these practical HTML examples as copy-friendly references when building real pages. Each snippet demonstrates a common pattern used in projects.

HTML Examples Overview

This page covers beginner-to-intermediate examples for structure, text, links, media, forms, semantic layout, and accessibility-friendly markup.

1. Basic HTML Page Example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample Page</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <p>This is a simple page example.</p>
  </body>
</html>

2. Text and Formatting Example

<h2>Article Heading</h2>
<p>
  This paragraph has <strong>important text</strong> and
  <em>emphasized text</em>.
</p>
<p>Use <mark>highlight</mark> for key points.</p>

3. Link and Navigation Example

<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/contact/">Contact</a>
</nav>

4. Image and Figure Example

<figure>
  <img src="/images/mountains.jpg" alt="Snowy mountain range" width="800" height="450" />
  <figcaption>Mountain landscape at sunrise.</figcaption>
</figure>

5. List Example

<h3>Frontend Skills</h3>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h3>Learning Steps</h3>
<ol>
  <li>Learn structure</li>
  <li>Practice examples</li>
  <li>Build projects</li>
</ol>

6. Table Example

<table>
  <caption>Weekly Study Plan</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Topic</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>HTML Basics</td>
    </tr>
  </tbody>
</table>

7. Form Example

<form action="/subscribe" method="post">
  <label for="email">Email Address</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="topic">Favorite Topic</label>
  <select id="topic" name="topic">
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
  </select>

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

8. Semantic Layout Example

<header>Site Header</header>
<nav>Main Nav</nav>

<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>Post summary...</p>
  </article>

  <aside>Related resources</aside>
</main>

<footer>Site Footer</footer>

9. Audio and Video Example

<audio controls>
  <source src="/media/podcast.mp3" type="audio/mpeg" />
  Your browser does not support audio.
</audio>

<video controls width="640" height="360">
  <source src="/media/intro.mp4" type="video/mp4" />
  Your browser does not support video.
</video>

10. Responsive Image Example

<img
  src="/images/cover-800.jpg"
  srcset="/images/cover-400.jpg 400w, /images/cover-800.jpg 800w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Course cover"
  loading="lazy"
/>

Common Mistakes in HTML Examples

Missing alt text on images.
Using headings out of order.
Forgetting form labels.
Using <div> everywhere instead of semantic tags.
Using invalid table markup for non-tabular content.

Key Takeaways

Start with semantic structure, then add content and interactivity.
Use labels, alt text, and headings for accessibility.
Use examples as reusable templates for real projects.
Validate your markup before shipping.

Pro Tip

Keep your own snippet library. Reusing tested HTML patterns saves time and reduces layout and accessibility bugs.