What are Semantic Tags in HTML?

What are semantic tags?

Semantic tags are HTML elements that describe the meaning and purpose of content.

Instead of simply grouping elements together like a generic <div>, semantic tags explain what the content actually represents.

Why are semantic tags important?

Semantic HTML helps:

• Search engines understand page structure
• Screen readers navigate content more easily
• Developers read and maintain code
• Browsers interpret content correctly

Before semantic HTML became popular, developers often built entire websites using only <div> elements.

Common semantic tags

HTML provides many semantic elements.

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

What does each semantic tag do?

<header>

Represents introductory content such as:

• Logos
• Site titles
• Navigation menus

<header>
  <h1>My Website</h1>
</header>

<nav>

Defines navigation links.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main>

Contains the primary content of the page.

A page should usually have only one <main> element.

<section>

Represents a thematic section of content.

Examples:

• Features section
• FAQ section
• Testimonials section

<article>

Represents self-contained content that can stand on its own.

Examples:

• Blog posts
• News articles
• Forum posts

<aside>

Contains secondary or related content.

Examples:

• Sidebars
• Advertisements
• Related links

<footer>

Represents footer information such as:

• Copyright text
• Contact information
• Footer navigation

Semantic tags vs div elements

One of the biggest beginner questions is:

Why use semantic tags instead of <div>?

<!-- Generic structure -->
<div class="header">
  ...
</div>


<!-- Semantic structure -->
<header>
  ...
</header>

Both approaches work visually, but semantic tags provide meaning.

Benefits of semantic HTML

• Cleaner code structure
• Better accessibility
• Improved SEO understanding
• Easier maintenance
• Better screen reader support

Example of a semantic page layout

<header>
  ...
</header>

<nav>
  ...
</nav>

<main>

  <section>
    ...
  </section>

  <article>
    ...
  </article>

</main>

<footer>
  ...
</footer>

Common beginner mistakes

• Using only <div> elements everywhere
• Using semantic tags incorrectly
• Using multiple <main> elements
• Replacing every container with <section>

Summary

Semantic tags are HTML elements that describe the meaning and purpose of content.

They improve:

• Accessibility
• SEO
• Readability
• Maintainability

Modern websites combine semantic elements with regular <div> containers to create clean, accessible page structures.

Ready to learn modern HTML properly? Our free course covers semantic HTML, accessibility, forms, SEO, and real-world page layouts step-by-step.