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.
<nav> :- Used for representing navigation links. Navbar of the page should be written inside the tag.
<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.
Top comments (0)