Ayu Adiati

Posted on Feb 10, 2021 • Edited on Feb 16, 2021 • Originally published at adiati.com

Semantic Tags In HTML5: The What And Why

#html #beginners #codenewbie #webdev

Hello Fellow Codenewbies 👋

There are many tweets and articles to raise awareness towards accessibility on web development. They are explaining the importance of thinking about accessibility first and apply things that help people with disabilities to access the web world.

I am aware of this as well, but I honestly have not applied accessibility aspects as much as I should in my projects.
I have no chance yet to squeeze in extra time to learn more about it.
But really, it should not be an excuse for not making time to learn and apply those aspects.

So lately, I do more research on accessibility aspects and do my best to apply it whenever it's needed.
One of them that I will talk about in this post is "semantic tags in HTML".

Semantic Tags In HTML5

Semantics is the study of meanings in a language
-- Cambridge Dictionary

To write semantic HTML tags means to use HTML tags that have meaning and we can interpret, even without being well explained.

For example, prior to HTML5, <b> and <i> are used to make a text bold and italic.

In HTML5, <strong> and <em> are used to achieve the same result, but with much more meaning. They add importance and emphasis to the text.

When we create a boilerplate of HTML5, we definitely will see this structure:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

We are seeing semantic tags in this boilerplate.

<html>: Encloses the whole page.
<head>: Contains all necessary information to render the page.
<body>: The contents of the page.
<title>: The title of the page.
<meta>: The metadata, to provide additional important information.

The Benefits of Semantic Tags In HTML

Accessibility

People with visual disabilities are depending on screen readers to use a computer and to access the web.

Semantic tags can distinguish sections and are readable for screen readers.

📝 Sidenotes:
I highly recommend you to watch this 4 minutes video about how screen readers work to get a picture and understand more about the importance of semantic tags and how they benefit people with visual disability.

Lighter and maintainable code

Light and clear codes are easier to maintain because they are easier to read.
Let's see below example without semantic tags:

<div>
   <p><b>Cheese Kingdom</b></p>
   <p>Some recipes with cheese:</p>
   <div>
     <p>1. Cheese burger</p>
     <div>
       <p>
         - Cheese
         <br>
         - Burger's bread
         <br>
         - Beef burger
      </p>
    </div>
    <p>2. Mac and cheese</p>
    <div>
      <p>
        - Cheese
        <br>
        - Macaroni
        <br>
        - Roasted Chicken
      </p>
    </div>
   </div>
</div>

And with semantic tags:

<article>
    <h1>Cheese Kingdom</h1>
    <p>Some recipes with cheese:</p>
    <ol>
      <li>Cheese burger
        <ul>
          <li>Cheese</li>
          <li>Burger's bread</li>
          <li>Beef burger</li>
        </ul>
      </li> 
      <li>Mac and cheese
        <ul>
          <li>Cheese</li>
          <li>Macaroni</li>
          <li>Roasted Chicken</li>
        </ul>
      </li> 
    </ol>
</article>

Which one is easier to read and to interpret?
I believe you've known the answer 😊

Search Engine Optimization (SEO)

Semantic tags help in providing richer information for search engines.
When search engines cannot read a website properly, then the website cannot be ranked properly. This can cause bad performance and lower its chance to reach a bigger audience.

Structured Semantic Tags HTML5

In a webpage, we usually see a structure of a header, body of the page, a footer, and sometimes also sidebars.

<header>

The header of a page. Navigation is usually included in the header.
<nav>

For navigation bar.
<main>

For the dominant content in a page, including <article> and <section>. There should be only one main tag on a page.
<article>

For articles, like blog posts.
<section>

For breaking down an article into sections. It can help users to find what they're looking for in an article.
<aside>

A tag that focuses on less important (secondary) content such as sidebars.
<footer>

The footer of a page. It might include navigation.

I provide a playground on Codepen below as an example.

Conclusion

We learned that using semantic tags in HTML5 benefits everybody and is very important for accessibility, maintaining larger and cleaner codes, and also powerful for a webpage's performance in SEO.
Therefore, we better start to learn and use the correct semantic tags from now on.