Case File · HTML

Semantic Elements

Semantic Elements is a core part of HTML. In this case file you'll learn what it is, why it matters, and how to use it in real code.

Understanding semantic elements well means you can read other people's HTML code with confidence, and avoid the most common beginner mistakes in this area.

Key points:

What semantic elements means in the context of HTML
A minimal example you can run or read in the playground on the right
A common mistake to avoid when working with semantic elements

<!-- HTML: Semantic Elements -->
<!doctype html>
<html>
  <body>
    <h1>Semantic Elements</h1>
    <p>Edit this code and press Run to see it live.</p>
  </body>
</html>

Tip: Try changing a value in the code on the right and re-running it — small experiments are the fastest way to build real intuition for semantic elements.

The Lab

Forms Layout