Semantic HTML

What Is It?

Semantic HTML uses tag names that explain what each part of a page does.

What the Tags Mean

• header: introduction.
• nav: navigation links.
• main: the main content.
• section: a topic.
• article: a self-contained item.
• aside: related information.
• footer: closing information.

Example 1

Save each example as index.html and open it in your browser. Each code block is a complete page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML</title>
 
</head>
<body>
<header><h1>My blog</h1></header>
<main>
  <h2>My first post</h2>
  <p>Today I learned HTML.</p>
</main>
<footer>Written by Asha</footer>
</body>
</html>

What you see: The page has a title, a main content area, and a footer. These tags do not add a fancy layout by themselves.

Example 2: Another Use

Use article for a post that can stand on its own.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML</title>
 
</head>
<body>
<article>
  <h2>A day at the library</h2>
  <p>I found a useful book.</p>
</article>
</body>
</html>

Simple Tip

Use one main element for the page’s main content.

Try It Yourself

Add a nav element with a link to a section of your page.