We use cookies to enhance your experience on the site

Semantic HTML and Accessibility

In Ancient Egypt, hieroglyphs had strictly defined meanings - each symbol served a specific function. It is similar with semantic HTML - each tag carries information about the role and meaning of the content, which is crucial for assistive technologies.

Why Is Semantics So Important?

Screen readers do not "see" the page - they read the HTML structure. When you use

<div>

for everything, the reader does not know what is navigation, what is a heading, and what is the main content.

1<!-- BAD - "div soup" -->
2<div class="header">
3    <div class="nav">
4        <div class="nav-item">Home</div>
5        <div class="nav-item">About Us</div>
6    </div>
7</div>
8<div class="content">
9    <div class="title">Welcome to the museum</div>
10    <div class="text">Exhibition description...</div>
11</div>
12
13<!-- GOOD - semantic HTML -->
14<header>
15    <nav aria-label="Main navigation">
16        <ul>
17            <li><a href="/">Home</a></li>
18            <li><a href="/about">About Us</a></li>
19        </ul>
20    </nav>
21</header>
22<main>
23    <h1>Welcome to the museum</h1>
24    <p>Exhibition description...</p>
25</main>

Key Semantic Tags

Sectioning Elements

1<header>  <!-- Page or section header -->
2<nav>     <!-- Navigation -->
3<main>    <!-- Main page content (only one per page!) -->
4<article> <!-- Standalone content (post, article) -->
5<section> <!-- Thematic content group -->
6<aside>   <!-- Supplementary content (sidebar) -->
7<footer>  <!-- Page or section footer -->

Heading Hierarchy

Headings create the document structure - screen readers allow users to navigate by headings, so their hierarchy must be correct.

1<!-- BAD - skipped h2 level -->
2<h1>Egyptian Museum</h1>
3<h3>Permanent Exhibitions</h3>     <!-- Should be h2! -->
4<h4>Treasures of the Pharaohs</h4> <!-- Should be h3! -->
5
6<!-- GOOD - correct hierarchy -->
7<h1>Egyptian Museum</h1>
8<h2>Permanent Exhibitions</h2>
9<h3>Treasures of the Pharaohs</h3>
10<h3>Royal Mummies</h3>
11<h2>Temporary Exhibitions</h2>
12<h3>Gold of Tutankhamun</h3>

Lists

1<!-- Navigation as a list - the reader will say "list, 4 items" -->
2<nav>
3    <ul>
4        <li><a href="/">Home</a></li>
5        <li><a href="/exhibitions">Exhibitions</a></li>
6        <li><a href="/tickets">Tickets</a></li>
7        <li><a href="/contact">Contact</a></li>
8    </ul>
9</nav>
10
11<!-- Definition list -->
12<dl>
13    <dt>Scarab</dt>
14    <dd>Sacred beetle symbolizing rebirth</dd>
15    <dt>Ankh</dt>
16    <dd>Symbol of eternal life</dd>
17</dl>

Landmark Roles

Semantic HTML tags automatically create so-called landmarks (orientation points), which screen reader users can quickly navigate:

| HTML Tag | Landmark Role | Description | |:---|:---|:---| |

<header>

| banner | Page header | |

<nav>

| navigation | Navigation | |

<main>

| main | Main content | |

<aside>

| complementary | Supplementary content | |

<footer>

| contentinfo | Footer | |

<section>

| region* | Thematic section | |

<form>

| form* | Form |

*Requires an

aria-label

aria-labelledby

attribute.

Practical Example

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Ancient Egypt Museum</title>
6</head>
7<body>
8    <header>
9        <h1>Ancient Egypt Museum</h1>
10        <nav aria-label="Main navigation">
11            <ul>
12                <li><a href="/">Home</a></li>
13                <li><a href="/exhibitions">Exhibitions</a></li>
14            </ul>
15        </nav>
16    </header>
17
18    <main>
19        <article>
20            <h2>Exhibition: Treasures of Tutankhamun</h2>
21            <p>Discover incredible artifacts...</p>
22            <figure>
23                <img src="mask.jpg" alt="Golden death mask of Tutankhamun">
24                <figcaption>Death mask of Tutankhamun, c. 1323 BCE.</figcaption>
25            </figure>
26        </article>
27    </main>
28
29    <aside aria-label="Additional information">
30        <h2>Opening Hours</h2>
31        <p>Mon-Fri: 9:00-17:00</p>
32    </aside>
33
34    <footer>
35        <p>Ancient Egypt Museum 2024</p>
36    </footer>
37</body>
38</html>

Common Semantic Mistakes

Avoid these frequent errors:

1<!-- BAD: div instead of button -->
2<div onclick="submit()">Submit</div>
3
4<!-- GOOD: native button -->
5<button onclick="submit()">Submit</button>
6
7<!-- BAD: span as heading -->
8<span class="big-text">Important Title</span>
9
10<!-- GOOD: proper heading -->
11<h2>Important Title</h2>
12
13<!-- BAD: br for creating spacing -->
14<br><br><br>
15
16<!-- GOOD: CSS margin/padding -->
17<p style="margin-top: 2rem;">Text with spacing</p>

Validating Semantics

You can check the semantics of your page using:

W3C Validator - checks HTML correctness
WAVE - analyzes page accessibility
Lighthouse - accessibility audit in Chrome DevTools

Semantic HTML is the foundation of accessibility - just as solid pyramid foundations ensure its durability for millennia, so correct semantics ensures that the page will be accessible to all users. Every HTML element should match its role - a heading should be a heading, navigation should be navigation, and a button should be a button.

Go to CodeWorlds→