Welcome to our tutorials on semantic HTML! This guide will help you understand the importance of using semantic tags to create well-structured and accessible web pages.

What is Semantic HTML?

Semantic HTML is a set of HTML tags that convey the meaning of the content they wrap. Unlike non-semantic tags, which are often used for presentation, semantic tags focus on the content itself.

Benefits of Semantic HTML

  • Improved Accessibility: Semantic tags help screen readers and other assistive technologies understand the structure of a web page.
  • Better SEO: Search engines use semantic tags to understand the content of a web page, which can improve your website's search engine rankings.
  • Easier Maintenance: With clear semantic structure, it's easier to update and maintain your website.

Common Semantic Tags

Here are some of the most commonly used semantic tags:

  • <header>: Represents introductory content or a set of navigational links.
  • <nav>: Defines a section of navigation links.
  • <main>: Specifies the main content of a document.
  • <article>: Represents a self-contained composition in a document.
  • <section>: Defines a section in a document.
  • <aside>: Represents content aside from the content it is placed in.
  • <footer>: Defines a footer for a document or section.

Example

Here's an example of how semantic tags can be used to structure a simple web page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Example</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <ul>
        <li><a href="/en/tutorials/semantic-html">Tutorials</a></li>
        <li><a href="/en/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Introduction to Semantic HTML</h2>
      <p>This article explains the importance of using semantic tags to create well-structured and accessible web pages.</p>
    </article>
    <section>
      <h2>Common Semantic Tags</h2>
      <ul>
        <li><code>&lt;header&gt;</code></li>
        <li><code>&lt;nav&gt;</code></li>
        <li><code>&lt;main&gt;</code></li>
        <li><code>&lt;article&gt;</code></li>
        <li><code>&lt;section&gt;</code></li>
        <li><code>&lt;aside&gt;</code></li>
        <li><code>&lt;footer&gt;</code></li>
      </ul>
    </section>
  </main>
  <footer>
    <p>Copyright © 2023 My Website</p>
  </footer>
</body>
</html>

Learn More

If you're interested in learning more about semantic HTML, we recommend checking out our comprehensive guide on HTML Structure.

HTML5