1.6 Semantic Tags and Page Structure
By now you can fill a page with content using various tags. But one step remains: how do you organize a whole page into a coherent structure? That's what semantic tags are for.
The lab below expresses the same page layout with "a pile of divs" versus "semantic tags," and you can toggle back and forth to compare.
div is the "universal box," but too generic
<div> is a "generic container" with no specific meaning — just a box. You can build any layout from a pile of <div>s:
<div class="header">Site title</div>
<div class="nav">Navigation</div>
<div class="main">Main content</div>
<div class="footer">Footer</div>This works, but there's a problem: to browsers, search engines, and screen readers these are all "identical boxes" — they can't tell which is navigation and which is main content.
Semantic tags: give the box a meaningful name
HTML5 provides a set of semantic tags that look and behave just like <div>, but whose names declare their purpose:
<header>Site title</header>
<nav>Navigation</nav>
<main>
<article>An article</article>
<aside>Sidebar</aside>
</main>
<footer>Footer</footer>Common semantic tags:
| Tag | Represents |
|---|---|
<header> | Page header (top — title, logo) |
<nav> | Navigation links area |
<main> | The page's primary content (one per page) |
<article> | A self-contained piece (article, post) |
<section> | A thematic section |
<aside> | Sidebar, related links, supporting content |
<footer> | Page footer (bottom — copyright, contact) |
Why semantic tags are worth it
They look no different from <div> (default styles are nearly identical), but bring three concrete benefits:
- SEO: search engines understand the page structure better and know which block is the main content.
- Accessibility: screen readers let visually impaired users "jump to main content" or "jump to navigation" because they recognize
<main>and<nav>.
- Readability: for you and your teammates,
<nav>is obviously clearer than<div class="nav">.
<div> when no semantic tag fits.Chapter summary
You've mastered the core of HTML:
- Page skeleton:
<!DOCTYPE>,<html>,<head>,<body>.
- Content tags: headings, paragraphs, emphasis, lists.
- Attributes: configure elements with
name="value"; links usehref, images usesrc/alt.
- Forms:
<input>and itstype, checkbox vs radio,<label>.
- Tables:
<table>,<tr>,<th>,<td>, and<caption>for tabular data.
- Semantic tags: give structure meaning.
But right now your page is probably quite plain — black text on white. The next chapter uses CSS to give it a beautiful look.