Važno načelo u web dizajnu je ideja korištenja HTML elemenata kako bi se naznačilo što zapravo jesu, a ne kako se mogu zadati u pregledniku. To je poznato kao korištenje semantičkog HTML-a.

Što je semantički HTML?

Semantički HTML ili semantička oznaka je HTML koji uvodi značenje u web stranicu, a ne samo u prezentaciju. Na primjer, a

 Oznaka označava da je priloženi tekst odlomak. Ovo je i semantički i prezentacijski jer ljudi znaju što su odlomci, a preglednici ih znaju prikazati.

Na drugoj strani ove jednadžbe, oznake poput  i  nisu semantički. Oni definiraju samo kako tekst treba izgledati (podebljano ili kurziv) i ne daju nikakvo dodatno značenje oznakama.

Primjeri semantičkih HTML oznaka uključuju:

• Oznake zaglavlja

   kroz

Mnogo je više semantičkih HTML oznaka koje ćete koristiti prilikom izrade web mjesta usklađenog sa standardima.

Zašto biste trebali brinuti o semantici

Prednost pisanja semantičkog HTML-a proizlazi iz onoga što bi trebao biti pokretački cilj svake web stranice: želje za komunikacijom. Dodavanjem semantičkih oznaka vašem dokumentu pružate dodatne informacije o tom dokumentu koje pomažu u komunikaciji. Točnije, semantičke oznake pregledniku jasno daju do znanja što znači stranica i njezin sadržaj. Ta se jasnoća prenosi i s tražilicama, osiguravajući isporuku pravih stranica za prave upite.

Semantičke HTML oznake pružaju informacije o sadržaju tih oznaka koje nadilaze samo njihov izgled na stranici. Tekst koji je zatvoren u  preglednik odmah prepoznaje oznaku kao neku vrstu kodiranog jezika. Umjesto da pokušava prikazati taj kôd, preglednik razumije da taj tekst koristite kao primjer koda za potrebe članka ili mrežnog vodiča.

Korištenje semantičkih oznaka omogućuje vam i mnogo više udica za oblikovanje vašeg sadržaja. Možda vam je danas draže da se uzorci koda prikazuju u zadanom stilu preglednika, ali sutra ćete ih možda htjeti prozvati sivom pozadinom; kasnije ćete možda htjeti definirati preciznu porodicu fontova s ​​jednim razmakom ili hrpa fontova za upotrebu za vaše uzorke. Sve ove stvari možete učiniti lako pomoću semantičkog označavanja i pametno primijenjenog CSS-a.

Pravilna upotreba semantičkih oznaka

Kada upotrebljavate semantičke oznake za prenošenje značenja, a ne za prezentaciju, pripazite da ih ne upotrebljavate pogrešno samo zbog njihovih uobičajenih svojstava prikaza. Neke od najčešće zloupotrijebljenih semantičkih oznaka uključuju:

• blok citat - Neki ljudi koriste oznaka za uvlačenje teksta koji nije navod. To je zato što su blok-citati uvučeni prema zadanim postavkama. Ako jednostavno želite uvlačiti tekst koji nije blok citat, umjesto toga koristite CSS margine.
• str - Neki web urednici koriste (razmak koji ne prekida sadrži odlomak) za dodavanje dodatnog razmaka između elemenata stranice, umjesto definiranja stvarnih odlomaka za tekst te stranice. Kao u prethodnom primjeru, umjesto toga trebali biste koristiti svojstvo margine ili stila za dodavanje da biste dodali prostor.
• ul - Kao i sa

  , zatvarajući tekst unutar a

   oznaka uvlači taj tekst u većini preglednika. Ovo je i semantički neispravan i nevaljan HTML, jer samo
  •  oznake vrijede unutar
    označiti. Opet upotrijebite marginu ili stil umetanja za uvlačenje teksta.
  • h1, h2, h3, h4, h5 i h6 - Pomoću oznaka naslova možete fontove povećati i odvažiti, ali ako tekst nije naslov, umjesto toga upotrijebite CSS svojstva font-weight i font-size.

  Korištenjem HTML oznaka koje imaju značenje stvarate stranice koje daju više informacija od onih koje jednostavno sve okružuju

   oznake.

  Koje su HTML oznake semantičke?

  Iako gotovo sve HTML4 oznake i sve HTML5 oznake imaju semantička značenja, neke oznake jesu prvenstveno semantički.

  Na primjer, HTML5 je redefinirao značenje  i  oznake da budu semantičke. The  oznaka ne donosi dodatnu važnost; nego se označeni tekst obično prikazuje podebljano. Isto tako,  oznaka ne prenosi dodatnu važnost ili naglasak; nego definira tekst koji se obično prikazuje kurzivom.

  Semantičke HTML oznake

  Skraćenica
  Akronim
  Dugi citat
  Definicija
  Adresa za autora (e) dokumenta
  Citat
  Oznaka koda
  Tekst teleta
  Logička podjela
  Generički spremnik u liniji
  Izbrisan tekst
  Umetnut tekst
  Isticanje
  Snažan naglasak
  Naslov prve razine
  Naslov druge razine
  Naslov treće razine
  Naslov na četvrtoj razini
  Naslov na petoj razini
  Naslov na šestoj razini
  	Tematska stanka
  Tekst koji treba unijeti korisnik
  Predoblikovani tekst
  Kratki redoviti citat
  Izlaz uzorka
  Pretplata
  Nadpisnik
  Promjenjivi ili korisnički definirani tekst