In any language, semantics is used to study the meaning of words and phrases. i.e. semantic elements= elements with a meaning.
Semantic elements have a simple and clear meaning for both, the browser and the developer.
<div>, <span> etc. are non-semantic elements. They don't tell anything about its content. On the other hand, <form>, <table>, and <article> etc. are semantic elements because they clearly define their content.
HTML5 semantic elements are supported by all major browsers.
Why to use semantic elements?
Semantic elements are used in HTML5 because in HTML4, developers have to use their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.This is so difficult for search engines to identify the correct web page content. Now in HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier. It now allows data to be shared and reused across applications, enterprises, and communities."
Semantic Elements in HTML5
Some important semantic elements in HTML5
HTML5 <article> Element
HTML5 <section> Element
Nesting <article> tag in <section> tag or Vice Versa?
We know that the<article> element specifies independent, self-contained content and the <section> element defines section in a document.
In HTML, we can use <section> elements within <article> elements, and <article> elements within <section> elements.
We can also use <section> elements within <section> elements, and <article> elements within <article> elements.
In a newspaper, the sport <article> in the sport section, may have a technical section in each <article>.
HTML5 Header Element
HTML5 Footer Element
HTML5 <nav> Element
The HTML <nav> element is used to define a set of navigation links.
Example:Test it Now
HTML5 <aside> Element
HTML5 <figcaption> Element