Convert divs to semantic HTML elements for better accessibility and SEO
<header>Represents introductory content or navigational aids
When to use: Use for site header, article header, or section header
<header>
<h1>Site Title</h1>
<nav>...</nav>
</header>WCAG 2.1 - 1.3.1 Info and Relationships
<nav>Represents a section with navigation links
When to use: Use for major navigation blocks (main menu, breadcrumbs, table of contents)
<nav aria-label="Main Navigation">
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>WCAG 2.1 - 2.4.1 Bypass Blocks
<main>Represents the dominant content of the document
When to use: Use once per page for the primary content. Skip link target.
<main id="main-content">
<h1>Page Title</h1>
<article>...</article>
</main>WCAG 2.1 - 2.4.1 Bypass Blocks
<article>Represents a self-contained composition
When to use: Use for blog posts, news articles, forum posts, comments
<article>
<h2>Article Title</h2>
<p>Content...</p>
</article>WCAG 2.1 - 1.3.1 Info and Relationships
<section>Represents a thematic grouping of content
When to use: Use for chapters, tabbed content, numbered sections. Should have heading.
<section aria-labelledby="heading">
<h2 id="heading">Section Title</h2>
<p>Content...</p>
</section>WCAG 2.1 - 1.3.1 Info and Relationships
<aside>Represents content tangentially related to main content
When to use: Use for sidebars, pull quotes, ads, related links
<aside aria-label="Related Articles">
<h3>Related</h3>
<ul>...</ul>
</aside>WCAG 2.1 - 1.3.1 Info and Relationships
<footer>Represents footer for its nearest sectioning content
When to use: Use for site footer or article/section footer
<footer>
<p>© 2024 Company</p>
<nav aria-label="Footer">...</nav>
</footer>WCAG 2.1 - 1.3.1 Info and Relationships
<h1>-<h6>Represents section headings
When to use: Use to create document outline. Don't skip levels.
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>WCAG 2.1 - 1.3.1 Info and Relationships + 2.4.6 Headings and Labels
<button>Represents a clickable button
When to use: Use for any interactive control that triggers an action
<button type="button" onclick="handleClick()">
Click Me
</button>WCAG 2.1 - 4.1.2 Name, Role, Value
<a>Represents a hyperlink
When to use: Use for navigation to another page or location
<a href="/about">About Us</a>WCAG 2.1 - 2.4.4 Link Purpose
<figure> & <figcaption>Represents self-contained content with optional caption
When to use: Use for images, diagrams, code snippets with captions
<figure>
<img src="chart.png" alt="Sales data">
<figcaption>Q4 2024 Sales</figcaption>
</figure>WCAG 2.1 - 1.3.1 Info and Relationships
<time>Represents a specific period in time
When to use: Use for dates and times
<time datetime="2024-10-08">October 8, 2024</time>WCAG 2.1 - 1.3.1 Info and Relationships
Help others discover this tool!
