Semantics Tags in HTML

#webdev #html #programming #productivity

What are HTML Semantics?

HTML semantics refer to the practice of using HTML tags in a way that conveys meaningful information about the content they enclose. Semantic HTML emphasizes on providing structure and context to a website. By using the right semantic tags, developers can better describe the making it easy for both humans and machines to understand the content's significance.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article>- Clearly defines its content.

Why do we use them?

• Code Readability:
Semantic HTML enhances the readability and maintainability of code. The use of semantic tags in our code allows our code to make more sense and as our project grows, it helps us orient ourselves.
• Makes our site more accessible:
Semantic HTML tags have imbedded accessibility constructs that enable users with disabilities to make use assistive technologies such as screen readers and screen magnifiers.
• Content Organization:
Semantic HTML helps in organizing the content of the site in a meaningful order with the use of appropriate tags. Developers can structure the content hierarchically, making it easier for users to grasp information

HTML Semantic elements

Tags	Explanation
article	The element specifies independent, self-contained content.
nav	The element defines a set of navigation links.
aside	The element defines some content aside from the main content it is placed in (like a sidebar).
section	It represents the section of the document.
details	It specifies the tag for additional details.
header	The element represents a container for introductory content or a set of navigational links.
footer	The element defines a footer for a document or section
main	This specifies the main page content and should be unique
summary	This specifies a header for the element.
mark	This specifies the text that is highlighted.

Examples and when they are used

• Article:

<body>
    <article>
        <h1>Article Title</h1>
        <p>This is the content of the article.</p>
        <p>It can have multiple paragraphs and other elements.</p>
    </article>
</body>

The element is used to explain a self-contained piece of content, like a blog post or news article.

• Header and Nav:

<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>

The element is used to define the header section of a webpage, typically containing the site's title, logo, and main navigation and the element represents a navigation menu and contains links to different sections or pages of a website.

• Aside:

<body>
    <aside>
        <h2>Related Articles</h2>
        <ul>
            <li><a href="/article1">Article 1</a></li>
            <li><a href="/article1">Article 2</a></li>
        </ul>
    </aside>
</body>

The element is used for content that is not related to the main content but provides some information.

• Details and Summary:

<body>
    <details>
        <summary>Click to expand</summary>
        <p>Hidden content revealed when the details are expanded.</p>
    </details>
</body>

This element allows us to create accordions. It's particularly useful for displaying a list of items, conserving screen space and providing a neat way to organize and present information.

• Footer:

    <p>Contact us at contact@example.com</p>
    <nav>
        <ul>
            <li><a href="/privacy">privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
        </ul>
    </nav>
</footer>

The element represents the footer section of a webpage, typically containing contact information, copyright notices, and secondary navigation.

• Main:

    <main>
        <h1>Main Content</h1>
        <p>This is the main content of the webpage.</p>
    </main>
</body>

The element is used to define the main content area of a webpage, excluding headers, footers, and sidebars. There can only be one main element on the page.

Sample layout:

<html>

<head>
    <title>Semantic HTML layout</title>
</head>

<body>

    <header>

    </header>

    <main>

    </main>

    <footer>

    </footer>

</body>

</html>

By using the appropriate semantic elements, web developers can create more meaningful and well-organized documents for both humans and assistive technologies.