Semantic Tags in Html

What are Semantic Tags?

When we create a webpage, we don't want it to only look good. We also want the browser and other developers to understand what each part of the webpage is used for. This is where semantic tags are helpful. The word semantic means having meaning. These tags tell us what the content is about instead of simply using a <div> as a general container.

Common Semantic Tags

HTML provides different semantic tags to describe different parts of a webpage.

• <header> – Used for the top or introductory part of a webpage.
• <nav> – Used to contain navigation links such as Home, About, and Contact.
• <main> – Contains the main content of the webpage.
• <section> – Used to group related content together.
• <article> – Used for a complete piece of content, such as a blog post or news article.
• <aside> – Contains additional information such as related links or advertisements.
• <footer> – Used for the bottom part of a webpage, usually containing copyright or contact details.

Why Semantic Tags?

Semantic tags make HTML code cleaner and easier to understand. When another developer looks at the code, they can easily understand the different parts of the webpage. Search engines like Google can also understand the content and structure of the webpage better, which can help with SEO.

Semantic tags are also useful for accessibility. Screen readers can understand these different sections and help people with vision difficulties navigate the webpage more easily.

Instead of using many <div> tags everywhere, semantic tags give meaning to each part of the webpage. This makes the code more organized, readable, and easier to maintain.