Et viktig prinsipp i webdesign er ideen om å bruke HTML-elementer for å indikere hva de faktisk er, snarere enn hvordan de kan vises i nettleseren som standard. Dette er kjent som å bruke semantisk HTML.

Hva er semantisk HTML?

Semantisk HTML eller semantisk markering er HTML som introduserer mening til websiden i stedet for bare presentasjon. For eksempel, a

 tag indikerer at den vedlagte teksten er et avsnitt. Dette er både semantisk og presentasjon fordi folk vet hva avsnitt er, og nettlesere vet hvordan de skal vises.

På baksiden av denne ligningen, er koder som  og  er ikke semantiske. De definerer bare hvordan teksten skal se ut (fet eller kursiv), og gir ikke noe mer betydning for markeringen.

Eksempler på semantiske HTML-koder inkluderer:

• Toppmerker

   gjennom

Det er mange flere semantiske HTML-koder å bruke når du bygger et standardkompatibelt nettsted.

Hvorfor du bør bry deg om semantikk

Fordelen med å skrive semantisk HTML stammer fra det som skal være det drivende målet for enhver webside: ønsket om å kommunisere. Ved å legge til semantiske koder i dokumentet ditt, gir du tilleggsinformasjon om dokumentet, noe som hjelper kommunikasjonen. Spesielt gjør semantiske koder det tydelig for nettleseren hva meningen med en side og dens innhold er. Denne klarheten kommuniseres også med søkemotorer, og sørger for at de riktige sidene leveres for de riktige spørsmålene.

Semantiske HTML-koder gir informasjon om innholdet i disse kodene som går utover hvordan de ser ut på en side. Tekst som er vedlagt i  taggen blir umiddelbart gjenkjent av nettleseren som en slags kodingspråk. I stedet for å prøve å gjengi den koden, forstår nettleseren at du bruker den teksten som et eksempel på koden i forbindelse med en artikkel eller online veiledning.

Ved å bruke semantiske koder får du også mange flere kroker for å utforme innholdet ditt. Kanskje i dag foretrekker du å ha kodeeksemplene dine vist i standard nettleserstil, men i morgen vil du kanskje ringe dem med en grå bakgrunnsfarge; senere, vil du kanskje definere den presise skriftfamilien med monoavstand eller skriftstabel å bruke til prøvene dine. Du kan gjøre alle disse tingene enkelt ved å bruke semantisk markering og smart anvendt CSS.

Bruke semantiske koder riktig

Når du bruker semantiske koder for å formidle mening snarere enn for presentasjonsformål, må du være forsiktig så du ikke bruker dem feil bare for deres vanlige skjermegenskaper. Noen av de mest misbrukte semantiske kodene inkluderer:

• blockquote - Noen bruker tag for innrykking av tekst som ikke er et sitat. Dette er fordi blockquotes er innrykket som standard. Hvis du bare ønsker å innrykk tekst som ikke er et blockquote, kan du bruke CSS-marginer i stedet.
• s - Noen nettredaktører bruker (et uavbrutt mellomrom inneholdt i et avsnitt) for å legge til ekstra mellomrom mellom sideelementene, i stedet for å definere faktiske avsnitt for teksten på den siden. Som i forrige eksempel, bør du bruke margen eller polstringsegenskapen i stedet for å legge til plass.
• ul - Som med

  , vedlegg tekst inne i

   tag innrykk som tekst i de fleste nettlesere. Dette er både semantisk feil og ugyldig HTML, fordi bare
  •  tagger er gyldige i en
    stikkord. Igjen, bruk margen eller polstringsstilen for å rykke inn tekst.
  • h1, h2, h3, h4, h5 og h6 - Du kan bruke overskriftskoder for å gjøre skrifttypene større og dristigere, men hvis teksten ikke er en overskrift, bruk font-vekt og skriftstørrelse CSS-egenskaper i stedet.

  Ved å bruke HTML-koder som har betydning, oppretter du sider som gir mer informasjon enn de som bare omgir alt med

   koder.

  Hvilke HTML-koder er semantiske?

  Selv om nesten alle HTML4-koder og alle HTML5 koder har semantiske betydninger, noen koder er primært semantisk.

  For eksempel har HTML5 omdefinert betydningen av  og  tagger for å være semantiske. De  tag ikke formidle ekstra betydning; heller er den merkede teksten gjengitt med fet skrift. Likeledes, den  tag ikke formidle ekstra betydning eller vekt; snarere definerer den tekst som vanligvis gjengis med kursiv.

  Semantiske HTML-koder

  Forkortelse
  Forkortelse
  Langt sitat
  Definisjon
  Adresse for forfatter (e) av dokumentet
  Sitering
  Kodereferanse
  Teletype tekst
  Logisk inndeling
  Generisk innebygd container
  Slettet tekst
  Sett inn tekst
  Vektlegging
  Sterk vekt
  Første nivå overskrift
  Andre nivå overskrift
  Tredje nivå overskrift
  Overskrift på fjerde nivå
  Femte nivå overskrift
  Sjette-nivå overskrift
  	Temapause
  Tekst som skal skrives inn av brukeren
  Forformatert tekst
  Kort tilbud
  Eksempel på utdata
  Abonnement
  Overskrift
  Variabel eller brukerdefinert tekst