Last updated
Semantic Score Breakdown
- Page structure elements (header, main, footer, nav) — 25 points
- Heading hierarchy correctness — 20 points
- Meaningful use of article, section, aside — 15 points
- Proper use of figure, time, address, abbr — 15 points
- Appropriate ARIA usage (not redundant) — 15 points
- Semantic inline elements (em, strong, mark, cite) — 10 points
The checker provides a semantic score out of 100 and a prioritized list of improvements. Fixing heading hierarchy and adding landmark elements (header, main, nav, footer) typically has the biggest impact on both accessibility and SEO.
Examples
Example 1: Page Structure — Non-Semantic vs Semantic
Non-semantic (div soup):
<div id="header">
<div id="logo">My Site</div>
<div id="nav">
<div class="nav-item"><a href="/">Home</a></div>
<div class="nav-item"><a href="/about">About</a></div>
</div>
</div>
<div id="main">
<div class="post">
<div class="post-title">Article Title</div>
<div class="post-body">Content here...</div>
</div>
</div>
<div id="footer">Copyright 2026</div>
Semantic equivalent (checker recommendation):
<header>
<a href="/" class="logo">My Site</a>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Content here...</p>
</article>
</main>
<footer><p>Copyright 2026</p></footer>
Example 2: Heading Hierarchy Violations
The checker flags skipped heading levels:
<!-- VIOLATION: jumps from h1 to h3, skipping h2 -->
<h1>Page Title</h1>
<h3>Section Title</h3> <!-- should be h2 -->
<h4>Subsection</h4> <!-- should be h3 -->
Corrected heading hierarchy:
<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
Example 3: Images with Captions
Non-semantic image with caption:
<div class="image-wrapper">
<img src="chart.png" alt="Sales chart">
<div class="caption">Figure 1: Q1 Sales Data</div>
</div>
Semantic replacement using figure and figcaption:
<figure>
<img src="chart.png" alt="Bar chart showing Q1 sales by region">
<figcaption>Figure 1: Q1 Sales Data</figcaption>
</figure>