HTML Semantic Tags

 
Semantic tags in HTML5 add meaning to a webpage’s structure. They help browsers and developers understand the purpose of each part of the page. Using these tags improves accessibility. They allow screen readers and assistive technologies to interpret content better. This makes navigation easier for users with disabilities. Semantic tags also boost SEO. They help search engines understand the content and layout of a page. This can lead to higher search rankings. These tags create cleaner and more understandable code. Developers can quickly see how different sections are organized and  what they do. Semantic tags make web content more user-friendly and efficient.

Common Semantic Tags

  1. <header>: Defines a header for a document or a section.
  2. <nav>: Defines a set of navigation links.
  3. <main>: Specifies the main content of a document.
  4. <section>: Defines a section in a document.
  5. <article>: Represents an independent piece of content.
  6. <aside>: Defines content aside from the main content (like sidebars).
  7. <footer>: Defines a footer for a document or section.
  8. <figure>: Specifies self-contained content, like images with captions.
  9. <figcaption>: Provides a caption for a <figure> element.
  10. <mark>: Highlights or marks text.

Basic Structure Using Semantic Tags

<!DOCTYPE html><html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Semantic HTML5 Example</title>
</head>
<body>
    <header>
        <h1>Website Title</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>
    <main>
        <article>
            <header>
                <h2>Article Title</h2>
                <p>Published on <time datetime=”2024-07-10″>July 10, 2024</time></p>
            </header>
            <section>
                <h3>Section 1</h3>
                <p>This is the first section of the article.</p>
            </section>
            <section>
                <h3>Section 2</h3>
                <p>This is the second section of the article.</p>
            </section>
            <footer>
                <p>Written by <a href=”#author”>Author Name</a></p>
            </footer>
        </article>
        <aside>
            <h2>Related Content</h2>
            <p>Links to related articles or ads.</p>
        </aside>
    </main>
    <footer>
        <p>&copy; 2024 Website Name</p>
    </footer>
</body>
</html>

Output

Website Title

Article Title

Published on

Section 1

This is the first section of the article.

Section 2

This is the second section of the article.

© 2024 Website Name

Scroll to Top