Pomembno načelo gibanja spletnih standardov, ki je odgovorno za današnjo panogo, je zamisel, da uporabite HTML elemente, kaj so namesto tega, kako jih privzeto prikazujejo v brskalniku. To je znano kot uporaba semantičnega HTML-ja.
Kaj je Semantični HTML
Semantični HTML ali semantični markup je HTML, ki uvaja pomen spletne strani in ne le predstavitev. Oznaka
na primer označuje, da je zaprto besedilo odstavek.
To je tako semantično kot predstavitveno, saj ljudje vedo, kateri odstavki so in brskalniki vedo, kako jih prikazujejo.
Na preklopni strani te enačbe oznake, kot sta in , niso semantične, saj opredeljujejo le, kako bi bilo treba videti besedilo (krepko ali ležeče) in ne dodajajo nobenega dodatnega pomena za označevanje.
Primeri semantičnih HTML oznak vsebujejo oznake za glavo
skozi , , in . Obstaja veliko več semantičnih HTML oznak, ki jih lahko uporabite, ko izdelate spletno mesto, ki je skladno s standardi.
Zakaj bi morali skrbeti za semantiko
Korist pisanja semantičnega HTML izhaja iz tega, kaj naj bi bil vozni cilj katere koli spletne strani - željo po komuniciranju. Če dodate semantične oznake v dokument, podajte dodatne informacije o tem dokumentu, kar pripomore k komunikaciji. Natančneje, semantične oznake jasno razkrijejo brskalniku, kaj je pomen strani in njegove vsebine.
Ta jasnost je tudi sporočena z iskalniki, kar zagotavlja, da so prave strani dostavljene za prave poizvedbe.
Semantične HTML oznake vsebujejo informacije o vsebini teh oznak, ki presega, kako izgledajo na strani. Besedilo, ki je priloženo oznaki , brskalnik takoj prepozna kot neko vrsto kodirnega jezika.
Namesto da poskuša ustvariti to kodo, brskalnik razume, da to besedo uporabljate kot primer kode za namene članka ali neke vrste spletne tutoriala.
Uporaba semantičnih oznak vam daje veliko več kavljev za oblikovanje vaše vsebine. Morda danes želite, da se vzorci kode prikazujejo v privzetem slogu brskalnika, vendar jutri jih želite poklicati s sivo barvo ozadja, pozneje pa želite določiti natančno enodružno pisavo družine ali velikosti pisave za uporabo za vaše vzorce. Vse te stvari lahko preprosto naredite z uporabo semantične oznake in pametno uporabljenega CSS-a.
Pravilno uporabite semantične oznake
Če želite uporabiti semantične oznake za posredovanje pomena in ne za predstavitvene namene, morate biti previdni, da jih ne uporabite nepravilno preprosto za njihove skupne lastnosti prikaza. Nekatere najpogosteje zlorabljene semantične oznake vključujejo:
- blockquote - Nekateri ljudje uporabljajo oznako za odstopanje besedila, ki ni citat. To je zato, ker blokquotes privzeto zamaknejo. Če preprosto želite izkoristiti zamik, vendar besedilo ni blokovno, namesto tega uporabite robove CSS.
- p - Nekateri spletni uredniki uporabljajo
& nbsp; (nepremostljivi prostor v paragrafu), da dodajajo dodaten prostor med elementi strani, namesto da bi določili dejanske odstavke za besedilo te strani. Kot je bilo že omenjeno v primerjalnem primeru, morate dodati prostor, tako da uporabite robno ali slikovno lastnost.
- ul - Kot blokoteka, obdaja besedilo znotraj oznake
, ki je v večini brskalnikov zapisano. To je tako semantično napačen in neveljaven HTML, saj le oznake - veljajo v oznaki
. Še enkrat uporabite slog robnega ali oblazinjenega besedila.
- h1-h6 - Oznake naslova se lahko uporabijo za povečanje in pomiritev pisave, če pa besedilo ni naslov, ne sme biti znotraj oznake naslova. Če želite spremeniti velikost ali težo določenega besedila na vaši strani, uporabite lastnosti CSS-teže in velikosti pisave.
Z uporabo oznak HTML, ki imajo smisel, ustvarjate strani, ki prinašajo več informacij, kot pa, da jih vse obkrožajo z oznakami
.
Katere oznake HTML so semantične?
Čeprav ima skoraj vsaka oznaka HTML4 in vse oznake HTML5 pomenski pomen, so nekatere oznake v prvi vrsti semantične narave.
HTML5 je na primer spremenil pomen oznak in semantično. Oznaka ne prinaša dodatnega pomena, temveč besedilo, ki je običajno prikazano krepko. Oznaka tudi ne prinaša dodatnega pomena ali poudarka, temveč natančneje določa besedilo, ki se običajno prikaže v poševnem tisku.
Semantične HTML oznake
Kratica Akronim
Dolga kotacija Opredelitev Naslov za avtorja (-e) dokumenta Navedba Oznaka kode Besedilo teletipa Logična delitev Splošni vsebnik v stilu Izbrisano besedilo Vstavljeno besedilo Poudarek Močan poudarek
Naslov prvega nivoja
Naslov drugega nivoja
Naslov tretje ravni
Naslov na četrti ravni
Naslov na petem nivoju
Šesti naslov
Tematski prelom Besedilo, ki ga vnese uporabnik
Predhodno oblikovano besedilo
Kratek povzetek Izhodni vzorec Podpis Superscript Spremenljivo ali uporabniško določeno besedilo
, in . Obstaja veliko več semantičnih HTML oznak, ki jih lahko uporabite, ko izdelate spletno mesto, ki je skladno s standardi.
Zakaj bi morali skrbeti za semantiko
Korist pisanja semantičnega HTML izhaja iz tega, kaj naj bi bil vozni cilj katere koli spletne strani - željo po komuniciranju. Če dodate semantične oznake v dokument, podajte dodatne informacije o tem dokumentu, kar pripomore k komunikaciji. Natančneje, semantične oznake jasno razkrijejo brskalniku, kaj je pomen strani in njegove vsebine.
Ta jasnost je tudi sporočena z iskalniki, kar zagotavlja, da so prave strani dostavljene za prave poizvedbe.
Semantične HTML oznake vsebujejo informacije o vsebini teh oznak, ki presega, kako izgledajo na strani. Besedilo, ki je priloženo oznaki , brskalnik takoj prepozna kot neko vrsto kodirnega jezika.
Namesto da poskuša ustvariti to kodo, brskalnik razume, da to besedo uporabljate kot primer kode za namene članka ali neke vrste spletne tutoriala.
Uporaba semantičnih oznak vam daje veliko več kavljev za oblikovanje vaše vsebine. Morda danes želite, da se vzorci kode prikazujejo v privzetem slogu brskalnika, vendar jutri jih želite poklicati s sivo barvo ozadja, pozneje pa želite določiti natančno enodružno pisavo družine ali velikosti pisave za uporabo za vaše vzorce. Vse te stvari lahko preprosto naredite z uporabo semantične oznake in pametno uporabljenega CSS-a.
Pravilno uporabite semantične oznake
Če želite uporabiti semantične oznake za posredovanje pomena in ne za predstavitvene namene, morate biti previdni, da jih ne uporabite nepravilno preprosto za njihove skupne lastnosti prikaza. Nekatere najpogosteje zlorabljene semantične oznake vključujejo:
- blockquote - Nekateri ljudje uporabljajo oznako za odstopanje besedila, ki ni citat. To je zato, ker blokquotes privzeto zamaknejo. Če preprosto želite izkoristiti zamik, vendar besedilo ni blokovno, namesto tega uporabite robove CSS.
- p - Nekateri spletni uredniki uporabljajo
& nbsp; (nepremostljivi prostor v paragrafu), da dodajajo dodaten prostor med elementi strani, namesto da bi določili dejanske odstavke za besedilo te strani. Kot je bilo že omenjeno v primerjalnem primeru, morate dodati prostor, tako da uporabite robno ali slikovno lastnost.
- ul - Kot blokoteka, obdaja besedilo znotraj oznake
, ki je v večini brskalnikov zapisano. To je tako semantično napačen in neveljaven HTML, saj le oznake - veljajo v oznaki
. Še enkrat uporabite slog robnega ali oblazinjenega besedila.
- h1-h6 - Oznake naslova se lahko uporabijo za povečanje in pomiritev pisave, če pa besedilo ni naslov, ne sme biti znotraj oznake naslova. Če želite spremeniti velikost ali težo določenega besedila na vaši strani, uporabite lastnosti CSS-teže in velikosti pisave.
Z uporabo oznak HTML, ki imajo smisel, ustvarjate strani, ki prinašajo več informacij, kot pa, da jih vse obkrožajo z oznakami
.
Katere oznake HTML so semantične?
Čeprav ima skoraj vsaka oznaka HTML4 in vse oznake HTML5 pomenski pomen, so nekatere oznake v prvi vrsti semantične narave.
HTML5 je na primer spremenil pomen oznak in semantično. Oznaka ne prinaša dodatnega pomena, temveč besedilo, ki je običajno prikazano krepko. Oznaka tudi ne prinaša dodatnega pomena ali poudarka, temveč natančneje določa besedilo, ki se običajno prikaže v poševnem tisku.
Semantične HTML oznake
Kratica Akronim
Dolga kotacija Opredelitev Naslov za avtorja (-e) dokumenta Navedba Oznaka kode Besedilo teletipa Logična delitev Splošni vsebnik v stilu Izbrisano besedilo Vstavljeno besedilo Poudarek Močan poudarek
Naslov prvega nivoja
Naslov drugega nivoja
Naslov tretje ravni
Naslov na četrti ravni
Naslov na petem nivoju
Šesti naslov
Tematski prelom Besedilo, ki ga vnese uporabnik
Predhodno oblikovano besedilo
Kratek povzetek Izhodni vzorec Podpis Superscript Spremenljivo ali uporabniško določeno besedilo