Back to HTML HubPractice HTMLInterview HTML

Nearby lessons

24 of 24
HTML SubscriptHTML SuperscriptHTML Semantic

🔤 HTML Semantic Elements

📌 What are Semantic Elements?

Semantic HTML elements clearly describe their meaning to both browsers and developers. Unlike non-semantic elements like <div> and <span>, semantic elements provide meaningful structure to your content (e.g., <header>, <article>).

Semantic elements describe the role of the content within them. For example, <header> typically contains introductory content or navigation links, while <footer> often contains site-wide footer information.

✅ Benefits of Semantic HTML

  • 🦮 Improves accessibility by helping assistive technologies interpret your page better.
  • 🔍 Enhances SEO by giving search engines more information about your content.
  • 🧹 Makes your code easier to read and maintain.
  • 📱 Prepares your site for future compatibility with web standards.

🚫 Non-Semantic Example

Code Example
PREVIEW READY
Loading Editor...
Live Preview

✅ Semantic Example

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🏷️ Common Semantic Elements

AttributeDescription
<header>Introductory content or navigation
<nav>Navigation links
<main>Main content of the document
<article>Self-contained composition like a blog post
<section>Thematic grouping of content
<aside>Content indirectly related to the main content
<footer>Footer for its ancestor
<figure>Self-contained content like images or code
<figcaption>Caption for <figure>
<time>Machine-readable date/time
<mark>Highlighted text

🛠️ Best Practices

  • 📌 Use the most specific semantic element available for your content.
  • ♿ Combine semantic elements with ARIA attributes when needed for accessibility.
  • 🔢 Maintain a logical document outline with proper heading hierarchy.
  • 1️⃣ Use <main> only once per page for the primary content.
  • 🧭 Ensure <nav> is used for major navigation blocks only.
  • 📰 Use <article> for content that could stand alone in syndication.
  • 🧪 Test with screen readers to verify your semantic structure works as intended.

♿ Accessibility Tips

  • 🏁 Landmark Roles: Semantic elements automatically have ARIA landmark roles (e.g., <header> has banner role).
  • 🔖 Labeling: Use aria-label or aria-labelledby to provide context for screen readers when needed.

🧠 Test Your Knowledge

5 Questions

Progress: 0 / 5
Keep Going!Course Complete!