Semantics in HTML
?? Semantics in HTML
Semantic HTML means using HTML elements that clearly describe their meaning and role in the webpage. It helps browsers, developers, and assistive technologies understand the content better.
Why Semantic HTML?
Improves accessibility for screen readers
Enhances SEO (search engine optimization)
Makes code easier to read and maintain
Common Semantic Elements
| Element | Purpose |
|---|---|
<header> | Introductory content or navigation section |
<nav> | Navigation links |
<main> | Main content of the document |
<section> | Thematic grouping of content |
<article> | Self-contained content (e.g., blog post) |
<aside> | Sidebar or related content |
<footer> | Footer for a section or page |
<figure> | Self-contained media content (with caption) |
<figcaption> | Caption for <figure> |
Example
<body> <header> <h1>My Website</h1> <nav> <a href="#home">Home</a> <a href="#about">About</a> </nav> </header> <main> <article> <h2>Blog Post Title</h2> <p>This is an article about semantic HTML.</p> </article> <aside> <h3>Related Links</h3> <ul> <li><a href="#">HTML Tutorial</a></li> </ul> </aside> </main> <footer> <p>© 2025 My Website</p> </footer></body>Summary
Using semantic tags improves the structure and meaning of your HTML documents.
Want tips on accessibility or SEO benefits of semantic HTML?
