HTML Semantic Elements

Learn how to use semantic HTML elements to create well-structured, accessible, and SEO-friendly web pages.

The Power of Semantic HTML

Semantic HTML provides meaning to your web content, making it more accessible to both users and machines. Proper use of semantic elements:

Accessibility

Screen readers use semantic tags to navigate content

SEO Benefits

Search engines prioritize well-structured content

Responsive Design

Easier to create mobile-friendly layouts

Maintainability

Clear structure makes code easier to update

Semantic HTML Structure
<!DOCTYPE html>
<html>
<head>
  <title>Document Title</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <article>...</article>
    <section>...</section>
  </main>
  <aside>...</aside>
  <footer>...</footer>
</body>
</html>

Essential Semantic Elements

<header>

Introductory content or navigation

Purpose:

Contains site headers, logos, and primary navigation

Benefits:

  • Improves accessibility
  • Helps with SEO
Example:
<header>
  <h1>Site Title</h1>
  <nav>...</nav>
</header>

<nav>

Navigation links

Purpose:

Should wrap major navigation blocks

Benefits:

  • Screen reader friendly
  • Clear semantic meaning
Example:
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main>

Primary content

Purpose:

Contains the dominant content of the document

Benefits:

  • Only one per page
  • Helps with keyboard navigation
Example:
<main>
  <article>...</article>
  <section>...</section>
</main>

<article>

Self-contained composition

Purpose:

Content that makes sense on its own

Benefits:

  • Syndication ready
  • Improves SEO
Example:
<article>
  <h2>Blog Post Title</h2>
  <p>Content...</p>
</article>

<section>

Thematic grouping

Purpose:

Groups related content together

Benefits:

  • Better document outline
  • Improved readability
Example:
<section>
  <h2>Chapter Title</h2>
  <p>Content...</p>
</section>

<aside>

Side content

Purpose:

Content indirectly related to main content

Benefits:

  • Clear content separation
  • Better mobile layouts
Example:
<aside>
  <h3>Related Links</h3>
  <ul>...</ul>
</aside>

<footer>

Closing content

Purpose:

Contains footer information

Benefits:

  • Expected location
  • Accessibility benefits
Example:
<footer>
  <p>Copyright © 2023</p>
</footer>

Semantic HTML Best Practices

Do's

  • ✓Use semantic elements for their intended purpose
  • ✓Maintain a logical document outline
  • ✓Ensure proper nesting of elements
  • ✓Use headings (h1-h6) hierarchically

Don'ts

  • ✗Don't use divs when semantic elements are available
  • ✗Avoid using semantic elements just for styling
  • ✗Don't skip heading levels (e.g., h1 to h3)
  • ✗Avoid unnecessary nesting of sections

Practice Semantic HTML

Apply what you've learned in our interactive HTML editor.

Open HTML Editor
< Previous (Web-Storage)< Previous (HTML5-structure)