Što je semantički HTML i zašto biste ga trebali koristiti?

Važan princip pokreta Web standarda koji je odgovoran za industriju koju imamo danas jest ideja o korištenju elemenata HTML-a za ono što su, a ne kako se oni mogu pojaviti u pregledniku prema zadanim postavkama. 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 smisao web stranici, a ne samo prezentaciju. Na primjer, a

oznaka označava da je priloženi tekst odlomak.

Ovo je i semantičko i prezentacijsko, jer ljudi znaju koji su odlomci i preglednici znaju kako ih prikazati.

Na flip strani ove jednadžbe oznake poput i nisu semantički jer definiraju samo način na koji bi tekst trebao izgledati (podebljan ili kurziv) i ne daje nikakvo dodatno značenje oznaku.

Primjeri semantičkih HTML oznaka uključuju zaglavlja

kroz

,

, i , Postoji mnogo više semantičkih HTML oznaka koje možete upotrijebiti za izradu web stranica koja zadovoljava standarde.

Zašto biste se trebali brinuti o semantici

Prednost pisanja semantičkog HTML proizlazi iz onoga što bi trebao biti glavni cilj bilo koje web stranice - želja za komunikacijom. Dodavanjem semantičkih oznaka dokumentu dajete dodatne informacije o tom dokumentu koji pomažu u komunikaciji. Naime, semantičke oznake jasno upozoravaju na preglednik što znači značenje stranice i njegov sadržaj.

Ta jasnoća se također komunicira s tražilicama, osiguravajući da se prave stranice isporučuju za prave upite.

Semantičke oznake HTML pružaju informacije o sadržaju tih oznaka koje nadilaze kako izgledaju na stranici. Tekst koji je zatvoren u oznaku odmah prepoznaje kao neki tip kodnog jezika.

Umjesto da pokušava prikazati taj kôd, preglednik razumije da koristite taj tekst kao primjer koda u svrhu nekog članka ili online udžbenika.

Upotreba semantičkih oznaka pruža vam mnogo više kuka za oblikovanje sadržaja. Možda vam danas želite prikazati uzorke koda u zadanom načinu preglednika, no sutra ih želite pozvati s sivom bojom pozadine, a kasnije ľelite odrediti preciznu jednobojnu fonoteku obitelji ili font koji koristite za svoje uzorke. Jednostavno možete učiniti sve ove stvari pomoću semantičke oznake i pametno primijenjenog CSS-a.

Iskoristite semantičke oznake

Kada želite upotrijebiti semantičke oznake kako biste prenijeli značenje umjesto u svrhu prezentacije, trebate biti pažljivi ako ih ne koristite na pogrešan način samo za zajednička svojstva prikaza. Neke od najčešće zloupotrebljenih semantičkih oznaka uključuju:

• blockquote - Neki ljudi koriste

  oznaku za unos teksta koji nije citat. To je zbog toga što su blokkvoti razvrstani prema zadanim postavkama. Ako jednostavno želite imati prednosti uvlačenja, ali tekst nije blokovni broj, koristite CSS margine umjesto toga.

• p - Neki web urednici koriste (neprekidni prostor koji se nalazi u paragrafu) da biste dodali dodatni prostor između elemenata stranice, a ne definirali stvarne odlomke teksta te stranice. Kao i kod prethodno spomenutog primjera uvlačenja, trebali biste upotrijebiti svojstvo stila obruba ili padanja za dodavanje prostora.
• ul - Kao blok kvote, prilaganje teksta unutar a
  označite uvlačenje teksta u većini preglednika. Ovo je i semantički netočan i nevaljan HTML, kao samo
  • oznake vrijede unutar a
    označiti. Ponovno upotrijebite stil margine ili ispuna da biste tekst uvučeni.
  • h1-h6 - Zaglavlja oznaka mogu se koristiti za veći i hrabriji font, ali ako tekst nije naslov, ne smije biti unutar oznake naslova. Umjesto toga upotrijebite CSS svojstva font-weight i font-size ako želite promijeniti veličinu ili težinu određenog teksta na vašoj stranici.

  Upotrebom HTML oznaka koje imaju značenje, stvarate stranice koje pružaju više informacija nego samo okružuju sve

  oznake.

  Koje su HTML oznake semantičke?

  Iako gotovo svaka HTML4 oznaka i sve HTML5 oznake imaju semantičko značenje, neke oznake su prvenstveno semantičke prirode.

  Na primjer, HTML5 redefinirala je značenje i oznake moraju biti semantičke. oznaka ne daje značajan značaj, već tekst koji je obično podebljan. oznaka također ne prenosi dodatnu važnost ili naglasak, već određuje tekst koji se obično prikazuje kurzivom.

  Semantički HTML oznake

  	Skraćenica
  	Akronim
  	Dugačka kotacija
  	definicija
  	Adresa za autor (i) dokumenta
  	Citat
  	Referentni kod
  	Tekst teleteksta
  	Logička podjela
  	Generički spremnik za inline stilu
  	Izbrisan tekst
  	Umetnuti tekst
  	isticanje
  	Snažan naglasak
  	Naslov prvog stupnja
  	Naslov drugog stupnja
  	Naslov treće razine
  	Četvrti naslov
  	Naslov na petom stupnju
  	Naslov na šestoj razini
  	Tematski prekid
  	Korisnik će unijeti tekst
  	Predformirani tekst
  	Kratka inline citat
  	Uzorak izlaza
  	potpisan
  	natpis
  	Varijabla ili korisnički definirani tekst