Semantic Tags in HTML
What are Semantic Tags? When we create a webpage, we don't just want it to look good. We also want the browser and other developers to understand what each part of the page is. This is where semantic tags help us. The word semantic means having meaning. These tags describe the purpose of the content instead of just creating a box like a <div> . Common Semantic Tags HTML provides different semantic tags for different parts of a webpage. <header> – Used for the top section of the webpage. <nav> – Contains navigation links like Home, About, and Contact. <main> – Holds the main content of the webpage. <section> – Groups related content together. <article> – Used for a complete piece of content like a blog or news article. <aside> – Contains extra information such as related links or advertisements. <footer> – Used for the bottom section of the webpage, usually containing copyright or contact details. Why Semantic Tags? Semantic tags make HTML code clean and easy to read. When another developer opens the code, they can quickly understand the structure of the webpage. Search engines like Google can also understand the content better, which helps with SEO. They also improve accessibility because screen readers can identify different sections of the webpage and help visually impaired users navigate the page more easily. Instead of using many <div> tags everywhere, semantic tags make the code more meaningful and easier to maintain.