Inddeling i HTML

Når man bygger strukturen for en hjemmeside i HTML så kan forskellige tags benyttes til at opdele de forskellige HTML-elementer i grupper som kan være semantiske eller ikke-semantiske. Semantisk betyder at indholdet har betydning og det er vigtigt at kende forskel på hvad der er hvad. Tags som f.eks. <div> og <span> er ikke-semantiske, da taggene ikke fortæller noget om indholdet. Derimod er tags som <header>, <nav>, <article>, <figure> og <footer> semantiske da de fortæller noget om indholdet.

Det er altid bedre at benytte tags som er semantiske af tre grunde:

  1. Hjemmesiden bliver lettere at benytte for blinde, da skærm-oplæsere vil have lettere ved at finde strukturen for hjemmesiden
  2. Hjemmesidens søgemaskineoptimering vil blive forbedret, da søgemaskiner vil have lettere ved at identificere indholdet på din hjemmeside og derved vil din side rangere højere i søgeresultater
  3. Koden vil blive bedre struktureret og lettere at forstå for en selv og andre programmører

Denne side vil fortælle om hvordan man benytter de forskellige inddelings-elementer og hvad de har af betydning for siden.

 

Inddeling med <div>

Hjemmesidens struktur kan inddeles i sektioner ved hjælp af tagget <div>. <div> kan indeholde alle slags elementer mellem åbnings- og lukningstagget. Tagget har ikke nogen synlig effekt på hjemmesiden.

I nedenstående kodestykke er en overskrift og en paragraf grupperet sammen i et <div>-tag:

<div>
  <h1>Dette er en overskrift.</h1>
  <p>Dette er en paragraf.</p>
</div>

Ved at benytte <div>-tags så giver man ikke rigtig nogen kontekst til hvad de forskellige <div>-tags indeholder. Så i stedet for at benytte <div>-tags så bør man benytte semantisk HTML.

 

Semantisk HTML

Semantisk HTML er HTML-kodning, hvor elementerne er delt op i navngivne grupper som nemt kan identificeres for deres betydning og indhold på siden. Det har egentlig det samme formål som <div>-elementet, udover, at det er bedre til at beskrive hvordan siden er opbygget, hvilket kan være nyttigt, bl.a. i forbindelse med sideoplæsere.

Nedenstående er en liste over de vigtigste semantiske tags og deres betydning.

 

<header>

Tagget <header> bliver brugt i sammenhæng med det indhold som omhandler den øverste del af siden, f.eks. introducerende tekster eller sidens navigationslinks.

<header>
  <h1>Dette er en overskrift.</h1>
  <p>Dette er en paragraf.</p>
</header>

 

<nav>

Tagget <nav> bliver brugt i sammenhæng med det indhold som omhandler navigationslinks som f.eks. menuer og indholdsfortegnelser.

<nav>
  <ul>
    <li><a href = "#Forside">Forside</a></li>
    <li><a href = "#Info">Info</a></li>
  </ul>
</nav>

 

<main>

Tagget <main> bliver brugt i sammenhæng med det dominerende indhold på siden.

<main>
  <h1>Dette er en overskrift.</h1>
  <p>Dette er en paragraf.</p>
</main>

 

<footer>

Tagget <footer> bliver brugt i sammenhæng med alt det indhold som står i bunden af siden som bl.a. kan være kontaktoplysninger og/eller sidens politikker.

<footer>
  <p>Kontaktoplysninger: info@simplecode.dk</p>
</footer>

 

<section>

Tagget <section> bliver brugt i sammenhæng med områder på siden som hører sammen i én, som f.eks. kapitler, artikler og indlæg.

<section>
  <h1>Dette er en overskrift.</h1>
  <p>Dette er en paragraf.</p>
</section>

 

<article>

Tagget <article> bliver brugt i sammenhæng med alt individuelt indhold inde i et <section>-tag, som bl.a. kan være blogopslag, kommentarer og paragraffer.

<section>
  <h1>Dette er en overskrift som hører til section.</h1>
  <article>
    <p>Dette er en paragraf som både hører til section og article.</p>
  </article>
</section>

 

<aside>

Tagget <aside> bliver brugt i sammenhæng med yderligere information, som kan supplere sidens indhold, men som ikke er nødvendigt for at forstå det.

<aside>
  <p>Dette er en paragraf med yderligere information om hovedindholdet.</p>
</aside>

 

<figure>

Tagget <figure> bliver brugt i sammenhæng med medieindhold som f.eks. billeder, diagrammer og illustrationer.

<figure>
  <img src = "mitBillede.jpg">
</figure>

Derudover kan <figcaption> brugestil de elementer som beskriver mediet.

 

<audio>

Tagget <audio> bliver brugt i sammenhæng med lydfiler.

<audio>
  <source src = "minAudioFil.mp3" type = "audio/mp3">
</audio>

 

<video>

Tagget <video> bliver brugt i sammenhæng med videofiler.

<video>
  <video src = "minVideoFil.mp4">Video kan ikke vises.</video>
</video>

 

 

Gå videre til Kommentarer i HTML her →