Et vigtigt princip i webdesign er ideen om at bruge HTML-elementer til at angive, hvad de faktisk er, snarere end hvordan de som standard kan vises i browseren. Dette er kendt som at bruge semantisk HTML.

Hvad er semantisk HTML?

Semantisk HTML eller semantisk markering er HTML, der introducerer mening til websiden i stedet for kun præsentation. F.eks

 tag angiver, at den vedlagte tekst er et afsnit. Dette er både semantisk og præsentativt, fordi folk ved, hvad afsnit er, og browsere ved, hvordan de skal vises.

På bagsiden af ​​denne ligning mærker f.eks  og  er ikke semantiske. De definerer kun, hvordan teksten skal se ud (fed eller kursiv) og giver ikke yderligere markering til markeringen.

Eksempler på semantiske HTML-tags inkluderer:

• Header tags

   igennem

Der er mange flere semantiske HTML-tags, du kan bruge, når du bygger et standardkompatibelt websted.

Hvorfor du skal bekymre dig om semantik

Fordelen ved at skrive semantisk HTML stammer fra, hvad der skal være det drivende mål for enhver webside: ønsket om at kommunikere. Ved at tilføje semantiske tags til dit dokument giver du yderligere oplysninger om det dokument, som hjælper med kommunikation. Specifikt gør semantiske tags det klart for browseren, hvad en side og dens indhold betyder. Denne klarhed formidles også med søgemaskiner, hvilket sikrer, at de rigtige sider leveres til de rigtige forespørgsler.

Semantiske HTML-tags giver oplysninger om indholdet af disse tags, der går ud over, hvordan de ser ud på en side. Tekst, der er vedlagt i  tag genkendes straks af browseren som en slags kodningssprog. I stedet for at forsøge at gengive den kode, forstår browseren, at du bruger teksten som et eksempel på koden i forbindelse med en artikel eller online tutorial.

Brug af semantiske tags giver dig også mange flere kroge til styling af dit indhold. Måske foretrækker du i dag, at dine kodeeksempler vises i standardbrowserstil, men i morgen vil du måske kalde dem med en grå baggrundsfarve; senere stadig vil du måske definere den nøjagtige skrifttypefamilie med mono-afstand eller skrifttypestak at bruge til dine prøver. Du kan gøre alle disse ting let ved at bruge semantisk markering og smart anvendt CSS.

Brug af semantiske tags korrekt

Når du bruger semantiske tags til at formidle mening snarere end til præsentationsformål, skal du være forsigtig med at du ikke bruger dem forkert blot til deres almindelige displayegenskaber. Nogle af de mest misbrugte semantiske tags inkluderer:

• blockquote - Nogle mennesker bruger tag til indrykning af tekst, der ikke er et tilbud. Dette skyldes, at blockquotes er indrykket som standard. Hvis du blot vil indrykke tekst, der ikke er et blok citat, skal du bruge CSS margener i stedet.
• s - Nogle webredaktører bruger (et ikke-brudt mellemrum indeholdt i et afsnit) for at tilføje ekstra plads mellem sideelementerne i stedet for at definere faktiske afsnit til teksten på den side. Som i det foregående eksempel skal du bruge egenskaben margen eller polstringstil i stedet for at tilføje plads.
• ul - Som med

  , vedlagte tekst inde i en

   tag indrykk på den tekst i de fleste browsere. Dette er både semantisk forkert og ugyldig HTML, fordi kun
  •  tags er gyldige inden for en
    tag. Brug igen margenen eller polstringsstilen til at indrykke tekst.
  • h1, h2, h3, h4, h5 og h6 - Du kan bruge overskriftskoder til at gøre skrifttyper større og dristigere, men hvis teksten ikke er en overskrift, skal du bruge fontvægt og skriftstørrelse CSS-egenskaber i stedet.

  Ved at bruge HTML-tags, der har betydning, opretter du sider, der giver mere information end dem, der simpelthen omgiver alt med

   tags.

  Hvilke HTML-tags er semantiske?

  Selvom næsten hvert HTML4-tag og alt det HTML5 tags har semantiske betydninger, nogle tags er primært semantisk.

  For eksempel har HTML5 omdefineret betydningen af  og  tags for at være semantiske. Det  tag formidler ikke ekstra betydning; snarere gengives den taggede tekst typisk med fed skrift. Ligeledes  tag formidler ikke ekstra betydning eller vægt; snarere definerer den tekst, der typisk gengives med kursiv.

  Semantiske HTML-tags

  Forkortelse
  Akronym
  Langt tilbud
  Definition
  Adresse til dokumentets forfatter (e)
  Citation
  Kodereference
  Teletype tekst
  Logisk opdeling
  Generisk inline-stilcontainer
  Slettet tekst
  Indsat tekst
  Vægt
  Stærk vægt
  Overskrift på første niveau
  Anden niveau overskrift
  Overskrift på tredje niveau
  Overskrift på fjerde niveau
  Femte niveau overskrift
  Overskrift på sjette niveau
  	Tematisk pause
  Tekst, der skal indtastes af brugeren
  Forformateret tekst
  Kort tilbud
  Eksempel på output
  Abonnement
  Overskrift
  Variabel eller brugerdefineret tekst