Spanish  
eSYNTAX Logo

HTML5 semantic tags give meaning to the structure of a web page, improving accessibility, SEO, and readable code.

We Power Your Business!

Our Services

Responsive Website DesignMarketing StrategiesCloud Development

Our Company

Blog PostsAbout eSYNTAXClients' PortfolioWeb Design Portfolio
 
Home Page
html-5-semantic-tags.jpg

HTML 5: Semantic Tags

HTML
esyntax.jpg  eSYNTAX    |    Aug 18, 2025

HTML5 semantic tags are special labels that tell browsers and developers what each part of a webpage is for. They're much better than generic <div> tags because they add meaning to your code, which helps with accessibility and search engine optimization (SEO).

Structural Tags

These tags are for building the basic layout of a webpage. Think of them as the blueprint for your house.

  • <header>: This is the introduction or heading of a document or a section. It can hold a site's logo, a main heading, and navigation links. A webpage can have multiple <header> tags.
  • <nav>: This tag is for a set of important navigation links. Use it to wrap your site's main menu, a table of contents, or a set of links that help users move around.
  • <main>: This is the primary content of the page. It's the unique part that is visited, like a blog post or a product description. A document should only have one <main> tag.
  • <article>: Use this for a complete, standalone piece of content that could be read on its own. Examples include a blog post, a news story, or a forum comment.
  • <section>: This is for a general section of a document. It groups related content together and almost always has a heading to explain what it's about. For example, a "Services" or "Contact Us" section on a homepage.
  • <aside>: This tag is for content that is related to the main content but is not essential to understanding it. It's typically used for sidebars, pull quotes, or advertisements.
  • <footer>: This tag is for a footer of a document or a section. It often contains copyright information, contact details, or links to related documents. A webpage can have multiple <footer> tags.

Content-Specific Tags

These tags give meaning to specific pieces of content within your page.

  • <figure> and <figcaption>: A <figure> tag is for self-contained content, like an image, a diagram, or a code block. The optional <figcaption> tag provides a caption for that content.
  • <mark>: This tag highlights or marks text that is of particular interest or relevance.
  • <time>: This tag represents a specific date, time, or a time range. It's great for marking up publication dates or event times.
  • <details> and <summary>: The <details> tag creates a disclosure widget that a user can click to show or hide content. The <summary> tag provides the visible heading or title for the widget.
  • <address>: Use this tag to provide contact information for the author or owner of a document or an article.

Main Benefits

The benefits of using HTML5 semantic tags are primarily improved accessibility (helps people who use assistive technologies like screen readers), better search engine optimization (SEO), and enhanced code readability. They give meaning to your code, which makes it easier for both humans and machines to understand.

HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog Post</title>
</head>
<body>
    <header>
        <h1>My Awesome Blog</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <header>
                <h2>HTML5 Semantic Tags</h2>
                <p>Published on August 20, 2025</p>
            </header>
            <p>HTML5 semantic tags like <main>, <article>, and <section>
            make your code more meaningful and readable.</p>
            <section>
                <h3>Structural Benefits</h3>
                <p>Using these tags helps search engines and screen readers
                understand the structure of your content. This improves SEO
                and accessibility.</p>
            </section>
            <aside>
                <h4>About the Author</h4>
                <p>John Doe is a web developer who loves writing about HTML,
                CSS, and JavaScript.</p>
            </aside>
            <figure>
                <img src="path-to-image" alt="Screenshot of code." />
                <figcaption>A simple code example.</figcaption>
            </figure>
            <footer>
                <p>Categorized under: HTML, Web Development</p>
            </footer>
        </article>
    </main>
    <footer>
        <p>&copy; 2025 My Awesome Blog. All rights reserved.</p>
    </footer>
</body>
</html>

You can find more examples at w3schools

cPANEL