HTML Semantic Elements

Semantic HTML tags and their proper usage for accessibility

Document Structure

<header>

Introductory content or navigation

<header> <h1>Site Title</h1> <nav>...</nav> </header>

<main>

Main content of the document

<main> <article>...</article> <section>...</section> </main>

<footer>

Footer content or site information

<footer> <p>&copy; 2024 Company</p> </footer>

<nav>

Navigation section

<nav> <ul> <li><a href="/">Home</a></li> </ul> </nav>

Content Sections

<article>

Self-contained composition

<article> <h2>Blog Post Title</h2> <p>Content...</p> </article>

<section>

Thematic grouping of content

<section> <h2>About Us</h2> <p>Description...</p> </section>

<aside>

Content related to main content

<aside> <h3>Related Articles</h3> <ul>...</ul> </aside>

<div>

Generic container (use sparingly)

<div class="wrapper"> <p>Generic content</p> </div>

Text Content

<h1> - <h6>

Heading hierarchy

<h1>Main Title</h1> <h2>Section Title</h2> <h3>Subsection</h3>

<p>

Paragraph of text

<p>This is a paragraph of text.</p>

<blockquote>

Quoted content

<blockquote> <p>Quote text here</p> <cite>- Author Name</cite> </blockquote>

<pre>

Preformatted text

<pre><code>console.log("Hello World");</code></pre>

<code>

Inline code

<p>Use <code>console.log()</code> to debug.</p>

Lists

<ul>

Unordered list

<ul> <li>Item 1</li> <li>Item 2</li> </ul>

<ol>

Ordered list

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

<li>

List item

<li>List item content</li>

<dl>

Description list

<dl> <dt>Term</dt> <dd>Definition</dd> </dl>

Forms & Inputs

<form>

Form container

<form action="/submit" method="post"> <input type="text" name="username"> </form>

<fieldset>

Group form controls

<fieldset> <legend>Personal Info</legend> <input type="text" name="name"> </fieldset>

<legend>

Fieldset caption

<legend>Contact Information</legend>

<label>

Form control label

<label for="username">Username:</label> <input id="username" type="text">

Media & Embedding

<img>

Image with alt text

<img src="image.jpg" alt="Description" width="300" height="200">

<figure>

Self-contained content

<figure> <img src="chart.png" alt="Sales Chart"> <figcaption>Monthly sales data</figcaption> </figure>

<figcaption>

Figure caption

<figcaption>Image description</figcaption>

<video>

Video content

<video controls> <source src="video.mp4" type="video/mp4"> Your browser does not support video. </video>

<audio>

Audio content

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

Data & Tables

<table>

Data table

<table> <thead>...</thead> <tbody>...</tbody> </table>

<thead>

Table header group

<thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead>

<tbody>

Table body group

<tbody> <tr> <td>John</td> <td>30</td> </tr> </tbody>

<th>

Table header cell

<th scope="col">Column Header</th>

<td>

Table data cell

<td>Cell data</td>

Common Patterns

Basic Page Structure

Standard semantic HTML page layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <header>
    <h1>Site Title</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content...</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2024 Company Name</p>
  </footer>
</body>
</html>

Blog Post Structure

Semantic structure for blog posts

<article>
  <header>
    <h1>Blog Post Title</h1>
    <time datetime="2024-01-15">January 15, 2024</time>
    <address>By <a href="/author">Author Name</a></address>
  </header>

  <section>
    <h2>Introduction</h2>
    <p>Introduction paragraph...</p>
  </section>

  <section>
    <h2>Main Content</h2>
    <p>Main content paragraphs...</p>
    
    <blockquote>
      <p>Important quote here</p>
      <cite>- Quote Author</cite>
    </blockquote>
  </section>

  <footer>
    <p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/semantic">Semantic</a></p>
  </footer>
</article>

Form Structure

Accessible form with semantic elements

<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    
    <div>
      <label for="firstname">First Name:</label>
      <input type="text" id="firstname" name="firstname" required>
    </div>
    
    <div>
      <label for="lastname">Last Name:</label>
      <input type="text" id="lastname" name="lastname" required>
    </div>
    
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>
    
    <div>
      <label for="newsletter">
        <input type="checkbox" id="newsletter" name="newsletter">
        Subscribe to newsletter
      </label>
    </div>
  </fieldset>

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

Data Table

Accessible data table structure

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$10,000</td>
      <td>+5%</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$12,000</td>
      <td>+20%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$22,000</td>
      <td>+12.5%</td>
    </tr>
  </tfoot>
</table>

Tips & Best Practices

Use semantic elements instead of generic <div> when possible

Always include alt attributes for images

Use proper heading hierarchy (h1 → h2 → h3)

Associate form labels with inputs using for and id

Use lang attribute on the <html> element