Create Your Resume
Back to HTML
Lesson 2 of 3

Semantic HTML5

Use meaningful elements for better SEO and accessibility

Semantic HTML5

Semantic elements clearly describe their meaning to both browsers and developers.

Why Semantic HTML?

  • SEO: Search engines understand your content better
  • Accessibility: Screen readers can navigate properly
  • Maintainability: Code is easier to understand

Semantic Elements

<header>  - Page or section header
<nav>     - Navigation links
<main>    - Main content (only one per page)
<article> - Self-contained content
<section> - Grouped content
<aside>   - Sidebar content
<footer>  - Page or section footer

Example Layout

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>