Semantisk HTML og Sidestruktur

Indtil nu har du lært, hvordan man opbygger elementer på en webside. Lad os nu forbedre, hvordan dit indhold struktureres og forstås.

Hvad er semantisk HTML?

Semantisk HTML betyder at bruge elementer, der tydeligt beskriver formålet med dit indhold. I stedet for at bruge generiske containere som <div>, anvender du meningsfulde tags som:

• <header>;
• <nav>;
• <section>;
• <article>;
• <footer>.

Hvorfor er det vigtigt

• Hjælper browsere og udviklere med at forstå din sidestruktur;
• Forbedrer tilgængelighed (skærmlæsere er afhængige af dette);
• Hjælper søgemaskiner med bedre at fortolke dit indhold.

Almindelige semantiske elementer

<header>

Repræsenterer den øverste del af en side eller sektion (logo, titel, navigation).

<header>
  <h1>My Website</h1>
</header>

<nav>

Definerer navigationslinks.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Grupperer relateret indhold.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Repræsenterer selvstændigt indhold (f.eks. blogindlæg).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Definerer den nederste del af en side.

<footer>
  <p>&copy; My Website</p>
</footer>

Sådan ser det ud samlet