HTML 101- Semantics

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?

1. Provides higher accessibility.
2. Helps the browser to better interpret the content.
3. Semantics help to write clearer code which is easier tom maintain.
4. 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?

1. <section> :- Used when grouping large content together under a common heading. Refers to a section of a page.

2. <article> :- Used for holding content that is independent from rest of the website. Example- Blog posts, Newspaper articles etc

3. <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.

4. <nav> :- Used for representing navigation links. Navbar of the page should be written inside the

   tag.

5. <aside> :- Used for placing content in sidebar. Can include heading tags (<h1> - <h6>) and <p> tags inside.

6. <figure> :- Used for content like photos, illustrations, svgs, diagrams etc. <figure> tag can contain <img> tag.

7. <footer> :- Used for defining footer of page. can contain contact information, site maps etc.