Semantic HTML: elements that mean something

Introduction

You could build a whole page out of div elements, and with CSS it would look perfect. But to a screen reader or a search engine, it would be a long, undifferentiated pile of text. Semantic elements tell them what each region of the page is for, and they cost nothing to use.

How it works

Think of the page regions that nearly every site has:

These are landmarks. A screen reader user can open a list of them and jump straight to the main content, without hearing the entire menu on every page. Search engines use the same structure to work out what is the actual content and what is decoration around it.

Choosing between article, section and div. Ask two questions. Could this be taken out and make sense somewhere else, like in a news feed? Then it is an article. Is it a distinct part of the topic, with a heading? Then it is a section. Do you just need a wrapper to style? Then use a div. A div is not wrong: it is the right choice precisely when no other element describes the content. span is the inline version, for styling a few words.

Some other useful elements: time gives a date in a form programs can read (<time datetime="2030-03-26">26 March</time>), blockquote marks a long quotation, code marks code, and address gives contact details for the page or article.

Buttons and links are semantics too. A real button can be focused with the keyboard and activated with Enter or Space, and it is announced as a button. A div with a click handler has none of that unless you rebuild it by hand, and people rarely do.

Syntax

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

Example

Line by line

1. header holds the site title.
2. nav holds the main links, and a screen reader can jump to it.
3. main wraps what is unique to this page.
4. article is the news item, which would make sense on its own.
5. time gives programs a machine-readable date, while people see "26 March".
6. aside holds related content, and footer closes the page.

Expected result

The page looks plain, because semantic elements have almost no default style. That is expected: they change what the page means, and CSS changes how it looks.

In the real world

Rich search results, browser "reader" views and voice assistants rely on structure to find the real content in a page. Many countries require public websites to be accessible, and landmarks are one of the first things an accessibility audit looks for.

Common mistakes

• Using several main elements that are visible at once.
• Using section as a styling wrapper, when a div is what you mean.
• Wrapping every small group of links in nav. Keep it for major navigation.
• A clickable div in place of a button.

Best practices

• Sketch the regions of the page before you write it.
• Give each section a heading.
• Reach for a semantic element first, and for a div when none fits.

Summary

Semantic elements name the regions of a page. Landmarks give assistive technology a map, and search engines a clearer picture. article stands alone, section is a part with a heading, and div and span are right when nothing else fits.

Mark lesson complete