Važan princip pokreta Web standarda koji je odgovoran za industriju koju imamo danas je ideja korištenja HTML elemenata za ono što su pre nego što se podrazumevano pojavljuju u pretraživaču. Ovo je poznato kao korišćenje semantičkog HTML-a.
Šta je Semantički HTML
Semantički HTML ili semantički označavanje je HTML koji uvodi značenje na web stranicu, a ne samo na prezentaciju. Na primer, oznaka
označava da je priloženi tekst paragraf.
Ovo je i semantično i prezentacijsko, jer ljudi znaju koji su stavovi i pretraživači znaju kako ih prikazati.
Na drugoj strani ove jednačine, oznake kao što su i nisu semantične, jer definišu samo kako će izgledati tekst (masnim slovima ili kurzivom) i ne daju nikakvo dodatno značenje markaciji.
Primeri semantičkih HTML oznaka uključuju tagove zaglavlja
kroz , , i . Postoji mnogo više semantičkih HTML oznaka koje možete koristiti dok kreirate web lokaciju koja odgovara standardu.
Zašto biste se trebali brinuti o semantici
Prednost pisanja semantičkog HTML-a proizlazi iz onoga što bi trebalo da bude cilj svih web stranica - želja za komunikacijom. Dodavanjem semantičkih oznaka u vaš dokument, pružite dodatne informacije o tom dokumentu, što pomaže u komunikaciji. Konkretno, semantičke oznake jasno pokazuju pretraživaču šta je značenje stranice i njenog sadržaja.
Ta jasnoća se takođe prenosi sa pretraživačima, osiguravajući da se prave stranice isporučuju za prave upite.
Semantički HTML tagovi pružaju informacije o sadržaju tih oznaka koji prevazilaze samo kako izgledaju na stranici. Tekst koji je zatvoren u oznaku odmah prepoznaje pretraživač kao neka vrsta jezika kodiranja.
Umjesto da pokuša da izvede taj kod, pretraživač razume da koristite taj tekst kao primer koda u svrhu nekog članka ili online tutoriala neke vrste.
Korišćenje semantičkih oznaka vam daje mnogo više kukica za stajanje vašeg sadržaja. Možda biste danas želeli da vaši uzorci kodova budu prikazani u podrazumevanom stilu pretraživača, ali sutra želite da ih pozovete sivom bojom pozadine, a kasnije želite definisati preciznu mono razmaknjenu porodicu fontova ili font stack za korištenje vaše uzorke. Sve te stvari možete jednostavno uraditi koristeći semantičku oznaku i pametno primijenjenu CSS.
Koristite semantičke oznake ispravno
Kada želite da koristite semantičke oznake da biste preneli značenje umesto u svrhe prezentacije, morate biti pažljivi da ih ne koristite pogrešno jednostavno zbog njihovih zajedničkih karakteristika prikaza. Neke od najčešće zloupotrebljenih semantičkih oznaka uključuju:
- blockquote - Neki ljudi koriste oznaku za unos teksta koji nije citat. Ovo je zbog toga što su blokotovi podrazumevani. Ako jednostavno želite da koristite od ulaska, ali tekst nije blokovni, umesto toga koristite CSS margine.
- p - Neki web urednici koriste
& nbsp; (ne rasklapajući prostor sadržan u paragrafu) da dodaju dodatni razmak između elemenata stranice, umesto da definišu stvarne paragrafe za tekst te stranice. Kao i prethodno pomenuti primjer, trebali biste koristiti svojstvo margine ili oblaganja za dodavanje prostora.
- ul-Like blockquote, zatvoriti tekst unutar oznake
označiti taj tekst u većini pretraživača. Ovo je i semantički netačan i nevažeći HTML, jer samo oznake - važe u oznaci
. Ponovo koristite stil margine ili oblaganja do teksta.
- h1-h6 - Oznake naslova se mogu koristiti da bi fontovi bili veći i smeliji, ali ako tekst nije naslov, ne bi trebalo da bude unutar oznake naslova. Umesto toga koristite font-weight i font-size CSS osobine ako želite da promenite veličinu ili težinu određenog teksta na vašoj stranici.
Korišćenjem HTML tagova koji imaju značenje, kreirate stranice koje prenose više informacija nego što sve okružuju s
oznakama.
Koje HTML oznake su semantičke?
Iako skoro svaka oznaka HTML4 i sve oznake HTML5 imaju semantičko značenje, neke oznake su prvenstveno semantičke po prirodi.
Na primer, HTML5 je redefinisao značenje oznaka i da bude semantičan. Oznaka ne daje posebnu važnost, već tekst koji je obično prikazan podebljanim slovima. Oznaka takođe ne daje dodatni značaj ili naglasak, već definiše tekst koji se obično pravi kurzivom.
Semantički HTML tagovi
Kratica Akronim
Dugo citiranje Definicija Adresa za autora (e) dokumenta Citation Oznaka koda Tekst teletipa Logička podjela Generički kontejner sa inline stilom Izbrisan tekst Umetnuti tekst Naglasak Jaki naglasak
Naslov prvog nivoa
Naslov drugog nivoa
Naslov trećeg nivoa
Naslov na četvrtom nivou
Naslov na petom nivou
Naslov iz šestog nivoa
Tematski prekid Tekst koji unese korisnik
Predodformirani tekst
Kratak inlajn citat Izlazni uzorak Subscript Superscript Promenljiv ili korisnički definisan tekst
, i . Postoji mnogo više semantičkih HTML oznaka koje možete koristiti dok kreirate web lokaciju koja odgovara standardu.
Zašto biste se trebali brinuti o semantici
Prednost pisanja semantičkog HTML-a proizlazi iz onoga što bi trebalo da bude cilj svih web stranica - želja za komunikacijom. Dodavanjem semantičkih oznaka u vaš dokument, pružite dodatne informacije o tom dokumentu, što pomaže u komunikaciji. Konkretno, semantičke oznake jasno pokazuju pretraživaču šta je značenje stranice i njenog sadržaja.
Ta jasnoća se takođe prenosi sa pretraživačima, osiguravajući da se prave stranice isporučuju za prave upite.
Semantički HTML tagovi pružaju informacije o sadržaju tih oznaka koji prevazilaze samo kako izgledaju na stranici. Tekst koji je zatvoren u oznaku odmah prepoznaje pretraživač kao neka vrsta jezika kodiranja.
Umjesto da pokuša da izvede taj kod, pretraživač razume da koristite taj tekst kao primer koda u svrhu nekog članka ili online tutoriala neke vrste.
Korišćenje semantičkih oznaka vam daje mnogo više kukica za stajanje vašeg sadržaja. Možda biste danas želeli da vaši uzorci kodova budu prikazani u podrazumevanom stilu pretraživača, ali sutra želite da ih pozovete sivom bojom pozadine, a kasnije želite definisati preciznu mono razmaknjenu porodicu fontova ili font stack za korištenje vaše uzorke. Sve te stvari možete jednostavno uraditi koristeći semantičku oznaku i pametno primijenjenu CSS.
Koristite semantičke oznake ispravno
Kada želite da koristite semantičke oznake da biste preneli značenje umesto u svrhe prezentacije, morate biti pažljivi da ih ne koristite pogrešno jednostavno zbog njihovih zajedničkih karakteristika prikaza. Neke od najčešće zloupotrebljenih semantičkih oznaka uključuju:
- blockquote - Neki ljudi koriste oznaku za unos teksta koji nije citat. Ovo je zbog toga što su blokotovi podrazumevani. Ako jednostavno želite da koristite od ulaska, ali tekst nije blokovni, umesto toga koristite CSS margine.
- p - Neki web urednici koriste
& nbsp; (ne rasklapajući prostor sadržan u paragrafu) da dodaju dodatni razmak između elemenata stranice, umesto da definišu stvarne paragrafe za tekst te stranice. Kao i prethodno pomenuti primjer, trebali biste koristiti svojstvo margine ili oblaganja za dodavanje prostora.
- ul-Like blockquote, zatvoriti tekst unutar oznake
označiti taj tekst u većini pretraživača. Ovo je i semantički netačan i nevažeći HTML, jer samo oznake - važe u oznaci
. Ponovo koristite stil margine ili oblaganja do teksta.
- h1-h6 - Oznake naslova se mogu koristiti da bi fontovi bili veći i smeliji, ali ako tekst nije naslov, ne bi trebalo da bude unutar oznake naslova. Umesto toga koristite font-weight i font-size CSS osobine ako želite da promenite veličinu ili težinu određenog teksta na vašoj stranici.
Korišćenjem HTML tagova koji imaju značenje, kreirate stranice koje prenose više informacija nego što sve okružuju s
oznakama.
Koje HTML oznake su semantičke?
Iako skoro svaka oznaka HTML4 i sve oznake HTML5 imaju semantičko značenje, neke oznake su prvenstveno semantičke po prirodi.
Na primer, HTML5 je redefinisao značenje oznaka i da bude semantičan. Oznaka ne daje posebnu važnost, već tekst koji je obično prikazan podebljanim slovima. Oznaka takođe ne daje dodatni značaj ili naglasak, već definiše tekst koji se obično pravi kurzivom.
Semantički HTML tagovi
Kratica Akronim
Dugo citiranje Definicija Adresa za autora (e) dokumenta Citation Oznaka koda Tekst teletipa Logička podjela Generički kontejner sa inline stilom Izbrisan tekst Umetnuti tekst Naglasak Jaki naglasak
Naslov prvog nivoa
Naslov drugog nivoa
Naslov trećeg nivoa
Naslov na četvrtom nivou
Naslov na petom nivou
Naslov iz šestog nivoa
Tematski prekid Tekst koji unese korisnik
Predodformirani tekst
Kratak inlajn citat Izlazni uzorak Subscript Superscript Promenljiv ili korisnički definisan tekst