HTML Semantic Elements
HTML Semantic Elements
Semantic elements clearly describe their meaning and purpose in the web page.
They make the HTML more readable, structured, and SEO-friendly compared to generic <div> and <span> elements.
Common Semantic Elements
| Element | Purpose |
|---|---|
<header> |
Defines the page or section header |
<nav> |
Navigation links |
<main> |
Main content of the document |
<section> |
Thematic section of content |
<article> |
Independent, self-contained content (e.g., blog post) |
<aside> |
Sidebar content or related information |
<footer> |
Footer of page or section |
<figure> |
Content like images, illustrations, or diagrams |
<figcaption> |
Caption for <figure> |
<mark> |
Highlighted text |
Example Code
Output Preview
-
Header → Top section with site title
-
Navigation → Menu links
-
Main → Article content
-
Aside → Sidebar content
-
Footer → Bottom section with copyright
Benefits of Semantic Elements
-
Improves readability of HTML code
-
Helps search engines understand page structure
-
Enhances accessibility for screen readers
-
Supports modern CSS layouts and frameworks
