What are HTML Semantics?
HTML semantics provide meaning to a HTML page, which clearly define the content they hold.
Why do we need HTML Semantics?
- Provides higher accessibility.
- Helps the browser to better interpret the content.
- Semantics help to write clearer code which is easier tom maintain.
- Pages made with semantics are easier to render and also avoid the problem of div suites.
Different types of Tags- When and How to use?
<section>:- Used when grouping large content together under a common heading. Refers to a section of a page.<article>:- Used for holding content that is independent from rest of the website. Example- Blog posts, Newspaper articles etc<header>:- Used for representing heading, navigation links , logos or icons, company name, search feature, and possibly the global navigation. Generally located at the top of the page.
tag.<nav>:- Used for representing navigation links. Navbar of the page should be written inside the<aside>:- Used for placing content in sidebar. Can include heading tags (<h1>-<h6>) and<p>tags inside.<figure>:- Used for content like photos, illustrations, svgs, diagrams etc.<figure>tag can contain<img>tag.<footer>:- Used for defining footer of page. can contain contact information, site maps etc.