Semantic Tags in HTML

What are Semantic Tags?

• Semantic tags are HTML elements that clearly describe the meaning and purpose of the content inside them.
• They make HTML code easier to understand for developers, browsers, search engines, and assistive technologies.

Why are Semantic Tags Important?

• Make the webpage structure clear and help search engines understand the webpage
• The semantic tags clearly describe the purpose of their content.
• The Non-semantics tags do not describe the meaning of their content. They are mainly used for grouping or styling elements.

header

• The <header> tag represents the introductory or top section of a webpage or a section.

nav

• The <nav> tag is used for a group of navigation links.

main

• The <main> tag represents the main content of the webpage.
• A webpage normally has one main <main> element.

section

• The <section> tag groups related content together.

article

• The <article> tag represents independent or self-contained content.
• It can be used for Blog posts, News articles, Product reviews

aside

• The <aside> tag represents content related to the main content, such as a sidebar or related links.

footer

• The <footer> tag represents the bottom section of a webpage or section.
• Like Copyright, Contact information, Social media links