Here is the list of tags used for HTML5 Semantic tags to improve the structure and meaning of the web content.
These tags makes it easier to understand, the content by human as well as search engines.
<address>: Address Tag, Specifies the any kind of location.<article>: Article Tag, Self-contained independent piece of document.<aside>: Aside Tag, Specifies the loosely bounded section.<bdo>: Bi-Directional Override Tag, Specifies the content to be displayed in different direction.<details>: Details Tag, Inserts the widget of information with toggle.<dialog>: Dialog Tag, Creates the popup dialog in the HTML document.<figure>: Figure Tag, Self-contained section for images with caption.<footer>: Footer Tag, Defines the footer of the HTML document.<section>: Section Tag, Specifies an HTML section.<header>: Header Tag, Defines the header of the HTML document.<main>: Main Tag, Specifies main content of the HTML document.<mark>: Mark Tag, Highlights the content or text.<nav>: Navigation Tag, Specifies the navigation section.<time>: Time Tag, Defines the date and time data in the HTML document.
- Semantic Tags are essential to the front-end development.
- Modern browsers can give possibilities to do more thing with it. For example, When using Time Tag in the HTML document, That browsers allow users to add calender event in their devices.
- Article Tag is mainly used for describing a Blog content and News related websites.
- Aside Tag is considered as unimportant or unrelated content to the Main Tag. Such as sidebar, related links and other things on website.
- Header Tag is mainly used for hero section. That will showcase or introduce your webpages as first impression.
- Footer Tag is always on the bottom of page. That has additional things such as copyright, terms and conditions, cookie policy, contact details and address.
- Navigation Tag is used for creating navigation menus. The browser will identifies these thing and This will be skipped at screen reader plays for best experience for the users who have disabilities.
- Figure Tag is useful for search engines to suggest your web page to the user who are all looking for thing that matches to the image caption.