Svarīgs Web standartu kustības princips, kas mūsdienās ir atbildīgs par nozari, ir ideja par to, kā HTML elementus izmantot, nevis par to, kā tie pēc noklusējuma var tikt parādīti pārlūkā. To sauc par semantikas HTML izmantošanu.
Kas ir semantisks HTML
Semantiskais HTML vai semantiskais marķējums ir HTML, kas ievieš tīmekļa vietnes nozīmi, nevis tikai prezentāciju. Piemēram, tag
norāda, ka pievienotais teksts ir punkts.
Tas ir gan semantisks, gan prezentatīvs, jo cilvēki zina, kādi punkti ir, un pārlūkprogrammas zina, kā tos parādīt.
Šā vienādojuma flip pusē tagi, piemēram, un , nav semantiski, jo tie nosaka tikai to, kā teksts izskatās (treknrakstā vai slīprakstā) un nenodrošina nekādu papildu nozīmi iezīmējumam.
Semantisko HTML tagu piemēri ietver galvenes tagus
caur , , un . Ir vairāk semantisku HTML tagu, kurus var izmantot, veidojot standartiem atbilstošu vietni.
Kāpēc jums vajadzētu rūpēties par semantiku
Semantikas HTML rakstīšanas priekšrocība izriet no tā, kāds būtu jebkuras tīmekļa lapas braukšanas mērķis - vēlme sazināties. Pievienojot dokumentam semantikas tagus, jūs sniedzat papildu informāciju par šo dokumentu, kas palīdz saziņā. Konkrēti, semantikas tagi pārlūkprogrammai skaidri norāda, kāda ir lapas un tā satura nozīme.
Šī skaidrība tiek paziņota arī ar meklētājprogrammām, nodrošinot pareizo lapu piegādi pareizajos jautājumos.
Semantiskie HTML tagi sniedz informāciju par šo tagu saturu, kas pārsniedz to, kā viņi izskatās lapā. Teksts, kas ir ietverts tagā , tiek nekavējoties atzīts pārlūkprogrammā kā kāda veida kodēšanas valoda.
Tā vietā, lai mēģinātu padarīt šo kodu, pārlūks saprot, ka jūs izmantojat šo tekstu kā koda piemēru kāda rakstu vai tiešsaistes apmācības mērķiem.
Izmantojot semantikas tagus, jūs iegūstat daudz vairāk āķu, lai veidotu savu saturu. Iespējams, ka šodien vēlaties, lai jūsu koda paraugi tiktu parādīti noklusējuma pārlūka stilā, bet rīt jūs vēlaties tos izsaukt ar pelēko fona krāsu, un vēlāk jūs vēlaties definēt precīzu fontu saimei vienlaikus vai fontu kaudzi , ko izmantot Jūsu paraugi. Jūs varat viegli izdarīt visas šīs lietas, izmantojot semantisko atzīmi un gudri pielietoto CSS.
Izmantojiet semantiskos tagus pareizi
Ja vēlaties izmantot semantiskos tagus, lai sniegtu nozīmi, nevis prezentācijas nolūkiem, jums jābūt uzmanīgiem, ka tos nepareizi neizmantojat tikai to kopīgotajām attēlojuma rekvizītām. Daži no visizplatītākajiem semantikas tagiem:
- Blockquote - daži cilvēki izmanto tagu
,
lai ievietotu tekstu, kas nav citāts. Tas ir tādēļ, ka pēc noklusējuma blokshēmas ir ievilktas. Ja jūs vienkārši vēlaties izmantot ievilkšanas priekšrocības, bet teksts nav bloķēšments, izmantojiet CSS marķierus. - p - Daži tīmekļa redaktori izmanto
& nbsp; p> (neatņemama atstarpe, kas atrodas paragraoph), lai papildinātu atstarpi starp lapas elementiem, nevis definētu šīs lapas teksta faktiskos punktus. Tāpat kā iepriekš minētajā indentinga piemērā, lai pievienotu atstarpi, jums vajadzētu izmantot margin vai polsterējuma stilu.
- ul - Tāpat kā blockquote, teksta ievietošana tagā
iezīmē šo tekstu lielākajā daļā pārlūkprogrammu. Tas ir gan semantiski nepareizs, gan nederīgs HTML, jo tikai - tagi ir derīgi tagā
. Atkal izmantojiet margin vai polsterēšanas stilu, lai ievilktu tekstu.
- h1-h6 - virsrakstu tagus var izmantot fontu lielākai un drosmīgākai uzbūvei, taču, ja teksts nav virsraksts, tas nedrīkst būt virsraksta tagā. Tā vietā izmantojiet fonta svara un fonta izmēra CSS rekvizītus, ja vēlaties mainīt konkrētā teksta lielumu vai svaru savā lapā.
Izmantojot HTML tagus, kuriem ir nozīme, jūs izveidojat lapas, kurās tiek sniegta plašāka informācija nekā tikai ar visu apzīmējumu, izmantojot tagus
.
Kuri HTML tagi ir semantisks?
Lai gan gandrīz katram HTML4 tagam un visiem HTML5 tagiem ir semantiska nozīme, daži tagi galvenokārt ir semantiski raksturīgi.
Piemēram, HTML5 ir atkārtoti definējis un tagu nozīmi semantiskā veidā. tags neuzrāda papildu nozīmi, bet gan tekstu, kas parasti tiek attēlots treknrakstā. Tag arī neuzrāda papildu nozīmi vai uzsvaru, bet drīzāk definē tekstu, kas parasti tiek rādīts kursīvā.
Semantiskā HTML tagi
Abreviatūra Akronīms
Long citāts Definīcija Adrese dokumenta autoram (-iem) Citāts
Koda atsauce Teletype teksts Loģiskā sadalīšana Vispārējs stila konteiners Svītrots teksts Ievietots teksts Uzsvars Spēcīgs uzsvars
Pirmā līmeņa virsraksts
Otrā līmeņa virsraksts
Trešā līmeņa virsraksts
Ceturtā līmeņa virsraksts
Piektā līmeņa virsraksts
Sestajā līmeņa virsraksts
Tematiskais pārtraukums Teksts, kas jāievada lietotājam
Iepriekš formatēts teksts
Īss cipars Parauga izlaide Apakšraksts Superscript Maināms vai lietotāja definēts teksts
, un . Ir vairāk semantisku HTML tagu, kurus var izmantot, veidojot standartiem atbilstošu vietni.
Kāpēc jums vajadzētu rūpēties par semantiku
Semantikas HTML rakstīšanas priekšrocība izriet no tā, kāds būtu jebkuras tīmekļa lapas braukšanas mērķis - vēlme sazināties. Pievienojot dokumentam semantikas tagus, jūs sniedzat papildu informāciju par šo dokumentu, kas palīdz saziņā. Konkrēti, semantikas tagi pārlūkprogrammai skaidri norāda, kāda ir lapas un tā satura nozīme.
Šī skaidrība tiek paziņota arī ar meklētājprogrammām, nodrošinot pareizo lapu piegādi pareizajos jautājumos.
Semantiskie HTML tagi sniedz informāciju par šo tagu saturu, kas pārsniedz to, kā viņi izskatās lapā. Teksts, kas ir ietverts tagā , tiek nekavējoties atzīts pārlūkprogrammā kā kāda veida kodēšanas valoda.
Tā vietā, lai mēģinātu padarīt šo kodu, pārlūks saprot, ka jūs izmantojat šo tekstu kā koda piemēru kāda rakstu vai tiešsaistes apmācības mērķiem.
Izmantojot semantikas tagus, jūs iegūstat daudz vairāk āķu, lai veidotu savu saturu. Iespējams, ka šodien vēlaties, lai jūsu koda paraugi tiktu parādīti noklusējuma pārlūka stilā, bet rīt jūs vēlaties tos izsaukt ar pelēko fona krāsu, un vēlāk jūs vēlaties definēt precīzu fontu saimei vienlaikus vai fontu kaudzi , ko izmantot Jūsu paraugi. Jūs varat viegli izdarīt visas šīs lietas, izmantojot semantisko atzīmi un gudri pielietoto CSS.
Izmantojiet semantiskos tagus pareizi
Ja vēlaties izmantot semantiskos tagus, lai sniegtu nozīmi, nevis prezentācijas nolūkiem, jums jābūt uzmanīgiem, ka tos nepareizi neizmantojat tikai to kopīgotajām attēlojuma rekvizītām. Daži no visizplatītākajiem semantikas tagiem:
- Blockquote - daži cilvēki izmanto tagu
,
lai ievietotu tekstu, kas nav citāts. Tas ir tādēļ, ka pēc noklusējuma blokshēmas ir ievilktas. Ja jūs vienkārši vēlaties izmantot ievilkšanas priekšrocības, bet teksts nav bloķēšments, izmantojiet CSS marķierus. - p - Daži tīmekļa redaktori izmanto
& nbsp; p> (neatņemama atstarpe, kas atrodas paragraoph), lai papildinātu atstarpi starp lapas elementiem, nevis definētu šīs lapas teksta faktiskos punktus. Tāpat kā iepriekš minētajā indentinga piemērā, lai pievienotu atstarpi, jums vajadzētu izmantot margin vai polsterējuma stilu.
- ul - Tāpat kā blockquote, teksta ievietošana tagā
iezīmē šo tekstu lielākajā daļā pārlūkprogrammu. Tas ir gan semantiski nepareizs, gan nederīgs HTML, jo tikai - tagi ir derīgi tagā
. Atkal izmantojiet margin vai polsterēšanas stilu, lai ievilktu tekstu.
- h1-h6 - virsrakstu tagus var izmantot fontu lielākai un drosmīgākai uzbūvei, taču, ja teksts nav virsraksts, tas nedrīkst būt virsraksta tagā. Tā vietā izmantojiet fonta svara un fonta izmēra CSS rekvizītus, ja vēlaties mainīt konkrētā teksta lielumu vai svaru savā lapā.
Izmantojot HTML tagus, kuriem ir nozīme, jūs izveidojat lapas, kurās tiek sniegta plašāka informācija nekā tikai ar visu apzīmējumu, izmantojot tagus
.
Kuri HTML tagi ir semantisks?
Lai gan gandrīz katram HTML4 tagam un visiem HTML5 tagiem ir semantiska nozīme, daži tagi galvenokārt ir semantiski raksturīgi.
Piemēram, HTML5 ir atkārtoti definējis un tagu nozīmi semantiskā veidā. tags neuzrāda papildu nozīmi, bet gan tekstu, kas parasti tiek attēlots treknrakstā. Tag arī neuzrāda papildu nozīmi vai uzsvaru, bet drīzāk definē tekstu, kas parasti tiek rādīts kursīvā.
Semantiskā HTML tagi
Abreviatūra Akronīms
Long citāts Definīcija Adrese dokumenta autoram (-iem) Citāts
Koda atsauce Teletype teksts Loģiskā sadalīšana Vispārējs stila konteiners Svītrots teksts Ievietots teksts Uzsvars Spēcīgs uzsvars
Pirmā līmeņa virsraksts
Otrā līmeņa virsraksts
Trešā līmeņa virsraksts
Ceturtā līmeņa virsraksts
Piektā līmeņa virsraksts
Sestajā līmeņa virsraksts
Tematiskais pārtraukums Teksts, kas jāievada lietotājam
Iepriekš formatēts teksts
Īss cipars Parauga izlaide Apakšraksts Superscript Maināms vai lietotāja definēts teksts