HTML Semantics
Semantic HTML means picking elements that describe their meaning, not their appearance. A semantic page is easier to style, easier to read with assistive tech, and easier for search engines to understand.
Common semantic elements
| Element | Use for |
|---|---|
<header> | Top of the page or a section. |
<nav> | Primary navigation links. |
<main> | Unique page content. One per page. |
<article> | A self-contained piece — blog post, comment, card. |
<section> | Grouped content with its own heading. |
<aside> | Tangential or supplementary content. |
<footer> | Bottom of the page or section. |
<figure> + <figcaption> | Self-contained illustration with a caption. |
<time> | A date or time — machine-readable. |
<mark> | Highlighted text — relevant to the current context. |
Why bother? Screen readers can let users jump straight to
<main>. Search engines weight content inside <article> differently than a sidebar. CSS can target nav a without you adding extra classes. Semantics costs nothing and pays back forever.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Semantics</title>
</head>
<body>
<h1>HTML Semantics</h1>
<p>This is a demo page for the "HTML Semantics" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Replace this div with the semantic element for an independent article.
<
>
<h2>News</h2>
</
>
Same word as a newspaper piece.
Discussion
Loading…