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.
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.
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.
* 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.
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
.
* 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.
* 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.
* 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.
* 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.