Zašto koristiti semantički HTML?

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. Ovo 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, 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 kao što su i nisu semantičke 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 oznake zaglavlja

do

,
, 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 preglednik kao neku vrstu jezika kodiranja.

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 upotrebljavaju 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 uređivači upotrebljavaju

    & nbsp; (neprekidni prostor sadržan u paragrafu) kako bi 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.