HTML5 Semantic Elements.

Introduction

When writing Html, we are most familiar with using tags such as <div>, <h1>, <p> to wrap around the contents of a web page. These tags get the job done and are still very much in use. Why then do we use semantic elements?

This article will help you better understand the html5 semantic elements, why it is essential to use them in building modern-day websites, and how to use them. So, ensure to read till the end.

• What are Html5 semantic elements?

• Some of the most used semantic tags.

• Why use html5 semantic elements?.

• Summary.

What are Html5 semantic elements?

Html5 semantic elements are tags that clearly describe the different parts of a web page. They state the literal meaning of a particular part of the web page to the browser to understand the best way to render them on the pages. To further explain semantic elements, below are two tags:

• <div id = footer>This is a non-semantic tag </div>
• <footer> This is a semantic tag </footer>

Both tags above describe the footer of a web page, but one is more literal than the other. The formal might require some styling for the page to render adequately; the browser already knows how to generate the latter.

Some of the most used semantic elements.

Here are some commonly used semantic tags

• <header></header> : This defines the header of a webpage.

• <nav></nav> : This defines the navigation and links of a web page.

• <main></main> : This defines the main section of a web page, other semantic elements can be contained in the <main><\main> element.

• <section></section> : This defines a specific section of a webpage. For example, it could describe a person or be used to display a person's work.

• <aside></aside>:This defines content aside from the main content of a webpage.

• <figure></figure>: This defines contents such as images, illustration, code blocks etc.

• <figcaption></figcaption>:This gives a detailed description of a figure.

• <summary></summary>:This summarizes a web content.

• <table></table>: This defines table content. Table contents are in a tabular form of rows and columns with a table head.

• <audio></audio>: This defines audio files such as music.

• <footer></footer>: This defines the footer of a web page or the last section of a web page as the name implies. It can also display links to some other website pages or an external file.

Below is a pictorial representation of how the browser renders the tags.

Why use html5 semantic elements?

• HTML5 semantic elements help structure our code to make them more readable and easy to maintain.
• They help improve the accessibility of our web pages.
• When codes become complex, developers might find it challenging to understand what they have written. The use of html5 semantics makes it relatively easier to fully grasp what each part of the web page stands for.

Summary

As a newbie, it is best to try as much as possible to use HTML5 semantics where necessary instead of divs.