Semantisk HTML och Sidstruktur

Hittills har du lärt dig hur man bygger element på en webbsida. Nu ska vi förbättra hur ditt innehåll struktureras och förstås.

Vad är semantisk HTML?

Semantisk HTML innebär att använda element som tydligt beskriver syftet med ditt innehåll. Istället för att använda generiska behållare som <div>, använder du meningsfulla taggar som:

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

Varför är det viktigt

• Hjälper webbläsare och utvecklare att förstå sidans struktur;
• Förbättrar tillgängligheten (skärmläsare är beroende av detta);
• Hjälper sökmotorer att tolka ditt innehåll bättre.

Vanliga semantiska element

<header>

Representerar den översta delen av en sida eller sektion (logotyp, titel, navigering).

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

<nav>

Definierar navigeringslänkar.

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

<section>

Grupperar relaterat innehåll.

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

<article>

Representerar fristående innehåll (t.ex. blogginlägg).

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

<footer>

Definierar sidans nedersta del.

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

Hur det ser ut tillsammans