Semantic HTML

A div can contain text but does not explain its purpose. Semantics means the meaning an element conveys. Semantic HTML chooses elements according to the content's role so people, browsers and assistive tools can understand it.

Similar appearance does not imply the same meaning

A div saying Schedule is text, not a heading. h2 explicitly identifies a heading that screen readers can include in heading navigation. An a with href supplies link behavior; button supplies button semantics and keyboard interaction. A class named button does not turn ordinary text into a button.

<h2>Join the event</h2>
<p>Read the information before registering.</p>
<a href="#registration">Go to registration</a>

This expresses heading, explanation and navigation without decorative styling. Semantic HTML is about appropriate elements, not more elements. Meaningful elements can still have classes and CSS styling later.

Meaningful page regions

header introduces a page or part of it, nav contains major navigation, main contains the page's primary content and footer contains closing information. The next lesson combines these with section, article and aside in a complete page.

For an ordinary page, use one visible main for its unique primary content, with repeated site navigation and footer outside. Replacing div with main may barely change the default appearance while making the source more meaningful.

Check by interacting

Compare the Lab's generic containers with the semantic version. Use Tab to reach the registration link and Enter to follow it. Ordinary div text is not automatically part of that keyboard interaction order.

Semantics is one accessibility foundation, not a complete solution. Images still need suitable alt text, forms need labels, headings need hierarchy and colors need readable contrast. These practices work together.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <div>Reading club</div>
  <div>About us</div>
  <div>We meet every Saturday.</div>
  <div>Go to registration</div>
  <div>Registration: ask at the front desk.</div>
</body>
</html>