Skip to content

Semantic HTML

HTML5 introduced a set of semantic elements that provide meaningful information about the content they wrap, making web pages more readable for both developers and machines (like search engines or screen readers). Below is an example of a basic web page utilizing several common HTML5 semantic tags, along with explanations of when and why each tag is used.

Example HTML5 Page with Semantic Tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example HTML5 Page</title>
</head>
<body>

<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<section id="home">
    <h2>Welcome to My Website</h2>
    <p>This is a paragraph explaining what my website is about.</p>
</section>

<article>
    <h2>Blog Post Title</h2>
    <p>Posted on <time datetime="2023-04-01">April 1, 2023</time></p>
    <p>This is a blog post. It contains interesting content about a certain topic.</p>
</article>

<aside>
    <h2>About Me</h2>
    <p>This section provides information about the website owner or related links.</p>
</aside>

<footer>
    <p>Contact information and copyright notice goes here.</p>
</footer>

</body>
</html>

Explanations of Semantic Tags

  • When to use: For introductory content or navigation links at the top of a section or page.
  • Why: Helps identify the top part of a page or section, often containing the website's logo, navigation links, or titles.
  • When to use: For navigation links.
  • Why: Indicates a section with navigation links to other pages or parts of the page. Search engines and screen readers can identify the navigation structure of a site more easily.

<section>

  • When to use: For a thematic grouping of content, typically with a heading.
  • Why: Organizes the page content into thematic groups for easier understanding and navigation. Each <section> should ideally represent a standalone part of the page.

<article>

  • When to use: For self-contained, independent pieces of content that could be distributed and reused, like blog posts or news articles.
  • Why: Marks content as being a complete, self-contained piece of the page's content. It's important for syndication and when separating document sections that could stand alone or be reused.

<aside>

  • When to use: For tangentially related content to the main content, such as sidebars.
  • Why: Differentiates side content from the main content, making it clear that it's supplementary. Good for sidebars, advertising, or content that complements the main content.
  • When to use: For footer content at the bottom of a section or page.
  • Why: Contains information about the author, copyright notices, contact information, etc. It marks the end of a section or document.

<time>

  • When to use: To represent a specific period (a date or time).
  • Why: Provides a standard way to encode dates and times in HTML, making it easier for machines to interpret datetime values in a human-readable format.

These semantic elements are crucial for creating a well-structured and accessible webpage, improving both user experience and SEO.