Thou shall not div everything

Semantic HTML for beginners

What is Semantic Html?

I love how web.dev describes this term.

Writing semantic HTML means using HTML elements to structure your content based on each element's meaning, not its appearance.

Meaning not appearance! While one is excited about slapping divs everywhere, styling the page and showing off what one has built. It's important especially as beginners to learn the habit of writing semantic HTML in our web development journey as it gives meaning to our content and also aids readability. There are more than a hundred HTML elements available to help semantically mark up our content better.

Why Semantic HTML?

The first thing to take away from this article is, <div> and <span> elements are not semantic elements therefore they give no meaning to their contents.

Giving meaning to content is important. For example, compare these code snippets

<div>
    <span>Logo</span>
    <div>
        <a> one </a>
        <a> two </a>
        <a> three </a>
    </div>
</div>
<div>
    <div>top</div>
    <div>First</div>
    <div> Second </div>
    <div> Third </div>
</div>
<div>
    Our address
</div>

Looking at the snippet above, it's hard to know what is what.

<header>
    <a>Logo</a>
    <nav>
        <a> feature </a>
        <a> contact </a>
        <a> service </a>
    </nav>
</header>
<main>
    <h1>The Main Content Header</h1>
    <section>
        <p> First </p>
    </section>
    <section>
         <p> Second </p> 
    </section>
    <section>
         <p> Third </p> 
    </section>
</main>
<footer>
    Our address
</footer>

Compared to the first snippet, this gives meaning to your content and it's also readable.

While you are itching to div or span everything, several HTML elements may better serve your purpose. Here is a list of HTML tags.

Here are other advantages

  • Maintainability: your code becomes easily maintainable.

  • Readability: pages made with semantic elements are much easier to read.

  • Accessibility: It offers a better user experience, especially for assistive devices.

  • Improves web page and search engine interaction.

Conclusion.

We have covered how using semantics HTML helps give meaning to our content which then opens a world of possibilities for our website.

Do you have content you want to place in your header? instead of a div use the <header></header> tag. Heading title? use your h1 and h2's. Navigation? use your <nav></nav>

Hopefully, you imbibe writing in semantics from now on, on your web development journey.