📄

Semantic HTML

Beginner

60 XP

20 min

Lesson Content

Semantic HTML

Semantic elements describe their content, helping browsers and people understand your page — like chapters in a book. Examples: <header>, <nav>, <main>, <footer>, <article>.

<header>
  <h1>My Site</h1>
</header>
<nav> <!-- links --> </nav>
<main> <article>Content here</article> </main>
<footer>Copyright 2025</footer>

Example Code

Structure a simple page using header, nav, main, and footer.

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic Practice</title>
  </head>
  <body>
    <!-- Add header, nav, main, and footer elements -->
  </body>
</html>

Expected Output:

A page with header, nav, main, and footer

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code