Why Should You Use HTML Semantic Elements?

HTML was originally created to share documents at the early stage of internet. As the internet and technologies developed, there are some HTML elements changes and updates for multi purpose.

Although the current version of HTML is version 5.3, the half of websites over internet are still using some non-semantic HTML elements. Before we talk about semantic elements, let’s talk about the semantic.

What is semantic?

The word “Semantic” means the study of reference, describing the meaning or truth. Semantic refers to all subfields of several subjects including computer science, physics, philosophy and etc.

Semantic HTML element means the elements used in HTML document are easy to understand by human language and the elements have definite meaning or purpose to tell web browsers and search engines. Check the following examples.

<div> ... </div>
<article> ... </article>

Both elements are block level elements and showed same result in browser. But the meaning of these two elements are different.

<div> element has no definite meaning and we all used <div> element as block level element and later redesign using CSS.

But <article> element has definite meaning and it shows the content inside <article> elements are article type. This mean that the content inside HTML document is semantic and search engines can understand the content type inside the HTML documents. If we use <div> element instead of <article> element, search engine can’t easily understand the content type inside the HTML document.

There are the advantages of HTML5 semantic elements.

• It shows the meaning of HTML document.
• It allows accessibility software to understand the HTML document.
• It improves your website rank in search engine results (SEO)
• Easy to read by human language ( Good communication between web designers for teamwork projects )

Check the following examples. In this example, we are going to create a navigation menu.

Non-Semantic Code

<div class="nav">
        <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Products</a><li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact Us</a></li>
        </ul>
 </div>

Semantic Code

<nav>
      <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Products</a><li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact Us</a></li>
        </ul>
</nav>

Although both result are shown as same in browsers, semantic code is clean and easy to understand and the search engines can easily know the code inside the HTML document is about navigation.

If we still use non-semantic HTML element, the search engine can’t know about the navigation and search engine will define as listing elements.

The purpose of this example code is to create navigation menu in the HTML document and so we should use semantic elements to tell navigation menu to search engines for SEO purpose.

It is easy to maintain the code

Semantic syntax are easy to understand by human and computing machines. If a web developer transfers his/her project to another developer, clean semantic markup code is the best way to reduce wasting time, easy to read and maintain the project.

Improve your site ranking in search engines

The correct usage of semantic elements provide better ranking result in search engines. For example, if you use <article> element in the HTML document, search engine crawlers can know the HTML document type as article document. SEO plays essential role to get right audience, customers and users for a website.

Accessibility

In order to support better web experience for disabilities people, there are some technologies to assist disabilities such as screen reader, color, text-to-speech translator, etc. Those assistive technologies can read the context, content and meaning of HTML and assist the disabilities people. If you aren’t using semantic elements, your content in HTML document may broke in some parts for accessibility features.

Check the following layout.

There are three main parts in HTML document.

1. Header
2. Main
3. Footer

Website logo and navigation menu are parts of header and blog post, articles and sidebar content are parts of main. Site maps, some links ( privacy policy , contact us, about us, etc.) and social media icons are parts of footer.

You can wisely use semantic elements in the HTML documents and it is easy to learn. An article contains heading, paragraphs, link attribution, credit words and media assets ( images and videos). Aside is used to show indirectly related content in the HTML document.

Here are the list of major semantic elements in HTML5.

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

These are major semantic structural elements in HTML5 and here we are not talking detailed usage of HTML semantic elements and learn more about detail in Mozilla developer resources.

Conclusion

The purpose of semantic elements is to describe the HTML web page type to search engines, better communication ( easy to read by human language), maintainability, accessibilities for disabled people.