Semantic HTML Elements
In HTML Semantic Elements are the Elements that clearly describes it’s meaning to both the browser and the developer.
<form>, <table>, <article> are some elements that clearly describes their meaning, so these are Semantic Elements. On the other hand elements like <div>, <span> are meaning less elements and don’t tell anything about their content, so these are non-semantic elements.
Use of Semantic Elements
In HTML4, we have to use <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. In that case, it becomes so difficult for search engines to find the right web page content. Now in HTML5 there are Semantic Elements that can be used to define different parts of a web page:
For Example
| S.NO. | Semantic Tag | Description |
| 1. | <header> | Defines the header of a web page. |
| 2. | <nav> | Specifies a set of navigational links. |
| 3. | <section> | Defines a section in a document. |
| 4. | <article> | Defines an independent content. |
| 5. | <aside> | Defines a content aside from the main content. |
| 6. | <summary> | Specifies a visible heading for a <details> element. |
| 7. | <footer> | Defines a footer for a web page. |
Learn more about these important semantic elements in our HTML Layout Tutorial.
Other Semantic Elements are:
<details>, <figcaption>, <figure>, <main>, <mark>, <time>
Related Posts
HTML Inline and Block Elements
