Semantic Tags
Semantic elements
Semantic elements have proper names that indicate the nature of the content.
For instance, a table, footer, header, etc.
HTML5 provides several semantic components that help developers create and comprehend code more easily and give browsers guidance on how to handle certain elements.
Different semantic tags
article
aside
details
figcaption
figure
footer
header
main
mark
nav
section
article tag
It contains independent content and doesn't require another context. Example: Blog Post, Newspaper Article etc.
aside tag
is used to place content in a sidebar i.e. aside from the existing content
details and summary
The "details" tag defines additional details that the user can hide/view. "summary" on the other hand defines the visible heading for a "details" element.
header tag
it is for the introduction heading of a page. There can be multiple headers on a page.
footer tag
The footer is located at the bottom of any article or document which can contain contact details, copyright information etc. There can be multiple footers on a page.
main tag
It defines the main content of the document. The content inside main tag should be unique.
mark tag
It is used to highlight the text
nav tag
is used to define a set of navigation links in the form of the navigation bar or nav menu
section tag
A page can be split into sections like Introduction, Contact Information, Details, etc and each of these sections can be in a different section tag.
