DEV Community

Nicolás Vazquez
Nicolás Vazquez

Posted on

9 1

Semantic 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>
Enter fullscreen mode Exit fullscreen mode

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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (4)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

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

Collapse
 
bretbernhoft profile image
Bret Bernhoft

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.

Collapse
 
omerlahav profile image
Omer Lahav

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 :)

Collapse
 
babar1532 profile image
ANKIT KUMAR

Thanks, I get revised (I forget all this whenever I am writing an HTML document)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay