Semantic HTML tags and their proper usage for accessibility
Introductory content or navigation
<header>
<h1>Site Title</h1>
<nav>...</nav>
</header>
Main content of the document
<main>
<article>...</article>
<section>...</section>
</main>
Footer content or site information
<footer>
<p>© 2024 Company</p>
</footer>
Navigation section
<nav>
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
Self-contained composition
<article>
<h2>Blog Post Title</h2>
<p>Content...</p>
</article>
Thematic grouping of content
<section>
<h2>About Us</h2>
<p>Description...</p>
</section>
Content related to main content
<aside>
<h3>Related Articles</h3>
<ul>...</ul>
</aside>
Generic container (use sparingly)
<div class="wrapper">
<p>Generic content</p>
</div>
Heading hierarchy
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
Paragraph of text
<p>This is a paragraph of text.</p>
Quoted content
<blockquote>
<p>Quote text here</p>
<cite>- Author Name</cite>
</blockquote>
Preformatted text
<pre><code>console.log("Hello World");</code></pre>
Inline code
<p>Use <code>console.log()</code> to debug.</p>
Unordered list
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered list
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
List item
<li>List item content</li>
Description list
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
Form container
<form action="/submit" method="post">
<input type="text" name="username">
</form>
Group form controls
<fieldset>
<legend>Personal Info</legend>
<input type="text" name="name">
</fieldset>
Fieldset caption
<legend>Contact Information</legend>
Form control label
<label for="username">Username:</label>
<input id="username" type="text">
Image with alt text
<img src="image.jpg" alt="Description" width="300" height="200">
Self-contained content
<figure>
<img src="chart.png" alt="Sales Chart">
<figcaption>Monthly sales data</figcaption>
</figure>
Figure caption
<figcaption>Image description</figcaption>
Video content
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
Audio content
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
Data table
<table>
<thead>...</thead>
<tbody>...</tbody>
</table>
Table header group
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
Table body group
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
</tbody>
Table header cell
<th scope="col">Column Header</th>
Table data cell
<td>Cell data</td>
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>© 2024 Company Name</p>
</footer>
</body>
</html>
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>
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>
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>
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