Semantic elements defines “elements with a meaning.”
With HTML5, There are few elements added to the HTML5 tag libraries and as element name defines the purpose/meaning of the tag/element, it is known as Semantic elements.
Examples of non-semantic elements:
<div> <span> <p> <br> <td> <tr>
Examples of semantic elements:
<form> <table>
HTML5 offers new semantic elements to define different parts of a web page:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Why elements needs to be Semantic ?
Purpose behind using semantic elements so that search engines can search for the contents easier and precisely using the semantic elements instead of searching with element IDs which was happening in HTML4.
As per W3C, Semantic Web: “Allows data to be shared and reused across applications, enterprises, and communities.”