Semantic HTML — An overview

If you have just started learning HTML language, this article might be a free and rich tutorial for you. To become a good Front-end web developer, we must know how and where to use the semantic elements in our script. This article contains almost everything we need to know about semantic elements in HTML.

What is Semantic?

If you are not new to programming, you must know about the term semantic errors, i.e. logical errors. In simpler terms, if we are in search of the literal meaning of a word, we go for the semantics or logical meaning of that particular word.

We are good to dive deep now.

What are Semantic HTML elements?

Semantic elements add logical meaning to every section of an HTML page so that web browsers can understand them in terms of content.

Fig 1. Designing a web document using Semantic HTML elements like section, footer, etc.

If we view Fig 1, we can see some tags like header, footer, section, etc. Going by their names, their role in every document is exactly how they are named. As a collective, they are nothing but called the Semantic elements in HTML.

Fig 2. HTML Semantic elements — W3Schools

In Fig 2, we can see how the semantic elements in HTML divide a web page into respective partitions. It’s easy for us to at least guess the functionalities of those elements and what purpose each and everyone solves. When we add Semantic elements, we add meaning to the contents of an HTML document.

Some important Semantic HTML elements:

* header:

Fig 3. <header> tag containing <h1> and <h2> tags

* nav:

Fig 4. The two <a> tag-links are enclosed by the <nav> tag

We should use nav tag outside header tag for our browsers to understand web pages better and improve overall script flow.

* section:

Fig 5. There are two <section> elements containing two distinct paragraphs

* figure:

Fig 6. The <figure> tag containing a <figcaption> tag inside it

* article:

Fig 7. There are two <article> tags representing two distinct articles

* aside:

Fig 8. Representation of <aside> element nested under body tag

* footer:

Fig 9. The <footer> tag is kept just before the ending of the body tag