Introduction to Semantics tags in HTML5
The Semantics tags were introduced in HTML5, which add meaning to Browser, Webpage, and Code.
Before Semantics tags:-
Before HTML5 we put every content in <div>, with HTML5 we got the Semantics tags. These tags represent what tags actually are doing i.e it is adding meaning to the code.
Examples of non-semantic elements: <div> and <span> which tells nothing about its content.
Important Semantics tags include:-
<header>: The header usually goes on the top, a lot of times header will contain a logo, it may have a Navigation menu, you may have a search box, etc.
<nav>: The nav is used for Navigation. You may have an unordered list <ul> and or may have a side menu using <aside> which is again unordered and you wrap it under <nav> tag.
<main>: The main is another important tag, which is like the main content of the page or maybe around the whole thing. ( You may write the other tags like <section>, <article>, <aside> inside the <main> tag, which generally means the main content of the page.
<section> : This tag defines a section in a document or a page.
In the section, we can add Introduction, Chapters, News Items and Contact Information.
<aside> : The aside generally means sidebar content i.e content that is not the main focus of the page, it may Ads or Category section for the main blog section or something like that.
<footer> : The footer is generally added at the bottom of the page. It may contain copyright information, contact information, sitemap, related documents, back-to-top links, etc.
List of other Semantics tags include: <details>
<figcaption>
<figure>
<mark>
<summary>
<time>
