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.
The header element is a container that can include a heading such as the title of an article or any para.
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.
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> tag is used as a heading in <details> tag. On clicking the heading, the details will be displayed.
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.