🎓 A1Learner
🔍

HTML Semantic Elements

A semantic element is an element whose tag name states what its content means. That meaning helps tools find parts of a page.

A name that says nothing

The div element groups content. Its name says nothing about the content.

<div class="top">
  <h1>City Bakery</h1>
</div>

A name that states the job

The header element names the top area of a page. The tag name states the job.

<header>
  <h1>City Bakery</h1>
</header>

A page built from named parts

Each tag name below states what its part holds. The names carry the meaning.

<header>City Bakery</header>
<nav>Home Shop Contact</nav>
<main>Fresh bread every morning.</main>
<footer>Open daily from 7am.</footer>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>City Bakery</title>
</head>
<body>
<header>
  <h1>City Bakery</h1>
  <p>Fresh bread every morning.</p>
</header>
<nav>Home Shop Contact</nav>
<main>
  <p>Today the ovens run from dawn.</p>
</main>
<footer>Open daily from 7am.</footer>
</body>
</html>

Key points

  • Semantic: a word for meaning carried in a name
  • header: the top area of a page or a section
  • nav: a set of main links
  • main: the main content of a page
  • footer: the bottom area of a page or a section

In this example, the header element holds the bakery name and a short line. The nav element holds three short link words. The main element holds the main sentence of the page. The footer element holds the opening hours. Each tag name states what its part holds.

Note

A semantic element usually looks plain until CSS styles it.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which element name states that its content is the main content of a page?