Semantic Elements in HTML

What are the Semantic Elements?

Semantic elements are elements that have a meaning, which defines the purpose of the elements.
Semantic elements help the browser and the developers understand the meaning of content.
It helps the search engine to retrieve information faster.
Non-semantic elements: These are elements with no meaning, they can contain any kind of information.
Forex: <div> tag, it explains nothing what kind of information it can contain.

Semantic elements: Elements with meaning.
For ex : <article>, <header>, <nav> etc.
You can easily identify between semantic and non-semantic elements, as semantic are those which have complete meaning in their name.

HTML5 Semantic Elements :

Here are some of the Semantic elements of HTML5.
  • <header>
  • <footer>
  • <nav>
  • <article>
  • <aside>
  • <section>
  • <summary>
<header> element
The header element is a container that can include a heading such as the title of an article or any para.
<nav> element 
The <nav> tag is a simple element using which you can define Navigation Bar for a Home Page or any page. Basically, you can create a Navbar to navigate to different pages.
<footer> element
A footer element can be used to display content which is at the bottom, it can contain information such as copyright information, the arrow for going to the top of the page, your contact details, and many.
<summary> element
<summary> tag is used as a heading in <details> tag. On clicking the heading, the details will be displayed.
<section> element
The section is used to display details section-wise.

Why use Semantic elements in HTML5?

As their name suggests they are used for semantic purposes only. It helps in improvising the automated processing of documents.
And also it makes it easier for website developers and browsers to better understanding and also well-structured HTML code will have a semantic meaning for a wide range of users.

2 thoughts on “Semantic Elements in HTML”

Leave a Comment

Your email address will not be published. Required fields are marked *