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?

Wikipedia says, “Semantic is the study of meaning, reference, or truth”.

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?

Just like other HTML elements and tags, Semantic elements serve their own important roles in terms of defining, viewing, and rendering an HTML document. They help to divide and format an HTML page in a hierarchical manner by adding a literal meaning to every section of the page.

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:

This tag represents the block that contains the headings of an HTML page. The h1, h2, etc. tags reside inside the header semantic tags.

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

* nav:

The nav tag is solely responsible to enclose and represent the navigation bar of an HTML page. It defines a set of links redirected to other resources over the web.

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:

When we write an HTML document, we provide a lot of content in our scripts. The section element helps us to better arrange and divide the contents provided in our HTML file in terms of blocks. The closest alternative to this tag is the non-semantic element div .

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

* figure:

This tag embodies independent pictures, images, screenshots, illustrations, etc. The figure tag might be able to help to identify any kind of imagery content in an HTML document.

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

* article:

When we write content, we tend to put it inside a article tag. This tag is mostly used to demonstrate content mostly in blog pages or media sites. Any meaningful writings or contents on a blog page are to be enclosed inside article tags. The article tag helps our browsers to identify any descriptive content from a page.

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

* aside:

The aside tag is used when we want to display something in the sidebar of our web page. The advertisements on a blog page are mostly put inside the aside elements. We often use this tag to present content horizontally away from the main flow of our content.

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

* footer:

We all have noticed addresses, maps, site maps, etc. at the bottom of almost every web sites. The footer tag embodies those data inside it and no other object which doesn’t represent the bottom of a web page is kept inside it. The footer element marks the bottom of a web page just like the header tag marks the top.

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