Semantisk HTML og Sidestruktur

Så langt har du lært hvordan du bygger elementer på en nettside. Nå skal vi forbedre hvordan innholdet ditt er strukturert og forstått.

Hva er semantisk HTML?

Semantisk HTML betyr å bruke elementer som tydelig beskriver formålet med innholdet ditt. I stedet for å bruke generiske beholdere som <div>, bruker du meningsfulle tagger som:

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

Hvorfor det er viktig

• Hjelper nettlesere og utviklere å forstå strukturen på siden din;
• Forbedrer tilgjengelighet (skjermlesere er avhengige av dette);
• Hjelper søkemotorer å tolke innholdet ditt bedre.

Vanlige semantiske elementer

<header>

Representerer den øverste delen av en side eller seksjon (logo, tittel, navigasjon).

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

<nav>

Definerer navigasjonslenker.

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

<section>

Grupperer relatert innhold.

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

<article>

Representerer selvstendig innhold (f.eks. blogginnlegg).

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

<footer>

Definerer den nederste delen av en side.

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

Hvordan det ser ut sammen