Semantic HTML

#webdev #html

Hey! Today I want to talk to you about Semantic HTML, an important technique for web development that is rarely given the importance it deserves.

Semantic HTML is a technique of writing HTML code that uses appropriate tags for each content, giving it a clear and structured semantic meaning. Instead of using meaningless tags or giving the same meaning to different tags, you should use a specific tag for each piece of content.

Some of the most common semantic HTML tags are:

<header> Used to represent the header of a web page or section of content.
<nav> Used to represent a navigation section within a web page.
<main> It is used to represent the main content of a web page.
<section> Used to group related content together.
<article> Used to represent an article or standalone piece of content.
<aside> Used to represent secondary content, such as a sidebar.
<footer> It is used to represent the footer of a web page.

The use of semantic HTML is important for several reasons. First of all, it improves the accessibility of the website for people with visual or hearing disabilities. This is because semantic tags provide additional information to screen readers, making the content easier to understand.

Second, semantic HTML can also help improve search engine positioning. Search engines can better understand the structure and content of the web page, which can result in better positioning in search results.

Another benefit of semantic HTML is that it makes it easier to maintain and update the web page. A clear and well-defined structure makes it easier to understand and modify the HTML code. Also, by using semantic tags, a precise meaning can be given to content, which helps prevent style and design issues.

To conclude with the post, here is an example of how semantic HTML can be used in the structure of a web page:

<!DOCTYPE html>
<html>
<head>
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Website Title</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>
        <section>
            <h2>Main section</h2>
            <p>This is the main content of the web page.</p>
            <article>
                <h3>Article 1</h3>
                <p>This is the content of the first article.</p>
            </article>
            <article>
                <h3>Article 2</h3>
                <p>This is the content of the second article.</p>
            </article>
        </section>

        <aside>
            <h3>Sidebar</h3>
            <p>This is the content of the sidebar.</p>
        </aside>
    </main>

    <footer>
        <p>Copyright © 2023 Website Title</p>
    </footer>
</body>
</html>

In summary, the use of semantic HTML is a recommended practice to improve the accessibility, the positioning in search engines and the maintainability of a web page. I hope this information is useful to you and helps you improve your web development skills.

Top comments (4)

Jon Randy 🎖️ • Mar 22 '23 • Edited

Most HTML tags are semantic - that is the whole point of HTML. The ones you mention are just recent additions.

Bret Bernhoft • Mar 22 '23

Semantic HTML is certainly underrated, both casually and professionally, by too large a portion of the Frontend Web Development community. Thank you for pointing that out, and reaffirming my own observations.

Omer Lahav • Mar 26 '23

Thank you for talking about this topic!
As mentioned in the comments, it sometimes feels those HTML5 tags are underrated so I'm glad more people are using it :)