Pomembno načelo pri spletnem oblikovanju je ideja uporabe elementov HTML, ki označujejo, kaj dejansko so, in ne, kako se privzeto prikažejo v brskalniku. To je znano kot uporaba semantičnega HTML-ja.

Kaj je semantični HTML?

Semantični HTML ali semantični označevalnik je HTML, ki spletni strani vnese pomen in ne le predstavitev. Na primer, a

 Oznaka označuje, da je priloženo besedilo odstavek. To je tako pomensko kot predstavitveno, ker ljudje vedo, kaj so odstavki, brskalniki pa jih znajo prikazati.

Na drugi strani te enačbe so oznake, kot so  in  niso pomenske. Določajo le, kako mora biti besedilo videti (krepko ali ležeče), in ne dajejo nobenega dodatnega pomena označevanju.

Primeri semantičnih oznak HTML vključujejo:

• Oznake glave

   skozi

Pri izdelavi spletnega mesta, ki ustreza standardom, je na voljo veliko več semantičnih oznak HTML.

Zakaj bi morali skrbeti za semantiko

Prednost pisanja semantičnega HTML izhaja iz tega, kar bi moral biti gonilni cilj katere koli spletne strani: želje po komunikaciji. Z dodajanjem semantičnih oznak dokumentu zagotovite dodatne informacije o dokumentu, ki pomagajo pri komunikaciji. Natančneje, semantične oznake brskalniku jasno povedo, kaj pomeni stran in njena vsebina. To jasnost sporočajo tudi iskalniki, ki zagotavljajo, da so na voljo prave strani za prave poizvedbe.

Semantične oznake HTML zagotavljajo informacije o vsebini teh oznak, ki presegajo samo njihov videz na strani. Besedilo, ki je zaprto v  brskalnik oznako takoj prepozna kot neko vrsto kodnega jezika. Namesto da bi poskušal upodobiti to kodo, brskalnik razume, da to besedilo uporabljate kot primer kode za namene članka ali spletne vadnice.

Uporaba semantičnih oznak vam omogoča tudi veliko več kljuk za oblikovanje vaše vsebine. Morda danes raje prikažete vzorce kod v privzetem slogu brskalnika, jutri pa jih boste morda želeli poklicati s sivo barvo ozadja; pozneje boste morda želeli določiti natančno družino pisav z enim presledkom oz sklad pisav za uporabo za vaše vzorce. Vse te stvari lahko enostavno naredite z uporabo semantičnega označevanja in pametno uporabljenega CSS-ja.

Pravilna uporaba semantičnih oznak

Ko uporabljate semantične oznake za prenos pomena in ne za predstavitvene namene, pazite, da jih ne uporabite napačno zgolj zaradi njihovih običajnih lastnosti prikaza. Nekatere najpogosteje zlorabljene semantične oznake vključujejo:

• blockquote - Nekateri ljudje uporabljajo oznaka za zamik besedila, ki ni narekovaj. To je zato, ker so blokatoteke privzeto zamaknjene. Če želite samo zamakniti besedilo, ki ni blok quote, raje uporabite robove CSS.
• str - Nekateri spletni uredniki uporabljajo (neprekinjen presledek v odstavku), da dodate dodaten prostor med elementi strani, namesto da definirate dejanske odstavke za besedilo te strani. Kot v prejšnjem primeru uporabite raje lastnost roba ali oblazinjenja, da dodate prostor.
• ul - Kot z

  , ki vsebuje besedilo znotraj

   zamiki oznak, ki se nahajajo v večini brskalnikov To je semantično napačen in neveljaven HTML, ker samo
  •  oznake veljajo znotraj
    oznaka. Za zamik besedila spet uporabite rob ali slog oblazinjenja.
  • h1, h2, h3, h4, h5 in h6 - Oznake naslovov lahko uporabite za povečanje in drznejše pisave, če pa besedilo ni naslov, namesto tega uporabite lastnosti CSS font-weight in font-size.

  Z uporabo oznak HTML, ki imajo pomen, ustvarite strani, ki dajejo več informacij kot tiste, ki preprosto obdajajo vse

   oznake.

  Katere oznake HTML so semantične?

  Čeprav skoraj vse oznake HTML4 in vse HTML5 oznake imajo pomenski pomen, nekatere oznake imajo predvsem pomensko.

  Na primer, HTML5 je na novo opredelil pomen  in  oznake, ki naj bodo pomenske. The  oznaka ne daje posebnega pomena; namesto tega je označeno besedilo običajno upodobljeno krepko. Prav tako  oznaka ne daje posebnega pomena ali poudarka; namesto tega določa besedilo, ki je običajno upodobljeno v ležečem tisku.

  Semantične oznake HTML

  Okrajšava
  Kratica
  Dolg citat
  Definicija
  Naslov avtorja (-jev) dokumenta
  Citiranje
  Sklic kode
  Besedilo teleta
  Logična delitev
  Splošni vsebnik v vrstici
  Izbrisano besedilo
  Vstavljeno besedilo
  Poudarek
  Močan poudarek
  Naslov prve stopnje
  Naslov druge stopnje
  Naslov tretje stopnje
  Naslov na četrti ravni
  Naslov pete stopnje
  Naslov na šesti ravni
  	Tematski odmor
  Besedilo, ki ga vnese uporabnik
  Predoblikovano besedilo
  Kratek vrstni red
  Izhod vzorca
  Podpis
  Nadpis
  Spremenljivo ali uporabniško določeno besedilo