Svarīgs tīmekļa dizaina princips ir ideja izmantot HTML elementus, lai norādītu, kādi tie patiesībā ir, nevis kā tie pēc noklusējuma var parādīties pārlūkprogrammā. Tas ir pazīstams kā semantiskā HTML izmantošana.

Kas ir semantiskais HTML?

Semantiskais HTML jeb semantiskais marķējums ir HTML, kas ievada tīmekļa lapas nozīmi, nevis tikai prezentāciju. Piemēram, a

 tags norāda, ka pievienotais teksts ir punkts. Tas ir gan semantisks, gan prezentatīvs, jo cilvēki zina, kas ir rindkopas, un pārlūkprogrammas zina, kā tos parādīt.

Šī vienādojuma otrā pusē ir tagi, piemēram,  un  nav semantiski. Tie nosaka tikai to, kā tekstam jāizskatās (treknrakstā vai kursīvā), un marķējumam nesniedz papildu nozīmi.

Semantisko HTML tagu piemēri:

• Galvenes tagi

   cauri

Veidojot standartiem atbilstošu vietni, ir daudz vairāk semantisko HTML tagu.

Kāpēc jums vajadzētu rūpēties par semantiku

Semantiskā HTML rakstīšanas priekšrocība izriet no tā, kādam jābūt jebkuras tīmekļa lapas virzības mērķim: vēlmei sazināties. Pievienojot dokumentam semantiskās atzīmes, jūs sniedzat papildu informāciju par šo dokumentu, kas palīdz saziņā. Semantiskie tagi pārlūkam skaidri norāda, kāda ir lapas un tās satura nozīme. Šī skaidrība tiek paziņota arī ar meklētājprogrammām, nodrošinot pareizo lapu piegādi pareizajiem vaicājumiem.

Semantiskie HTML tagi sniedz informāciju par šo tagu saturu, kas pārsniedz to, kā tie izskatās lapā. Teksts, kas ir pievienots  tag pārlūkprogrammā uzreiz tiek atpazīts kā kāda veida kodēšanas valoda. Tā vietā, lai mēģinātu atveidot šo kodu, pārlūkprogramma saprot, ka rakstu vai tiešsaistes apmācības vajadzībām šo tekstu izmantojat kā koda piemēru.

Semantisko tagu izmantošana dod daudz vairāk āķu arī sava satura veidošanai. Iespējams, šodien jūs vēlaties, lai kodu paraugi tiktu parādīti noklusējuma pārlūka stilā, bet rīt, iespējams, vēlēsities tos izsaukt ar pelēku fona krāsu; Vēlāk, iespējams, vēlēsities definēt precīzu fonu saimi ar vienu atstarpi fontu kaudze izmantot jūsu paraugiem. Visas šīs lietas varat viegli izdarīt, izmantojot semantisko marķējumu un gudri lietoto CSS.

Pareiza semantisko tagu izmantošana

Izmantojot semantiskos tagus, lai nodotu nozīmi, nevis prezentācijas nolūkos, esiet piesardzīgs, lai tos nepareizi neizmantotu tikai to parastajām displeja īpašībām. Daži no visbiežāk nepareizi izmantotajiem semantiskajiem tagiem ir:

• blokķēde - Daži cilvēki lieto tags teksta ievilkšanai, kas nav pēdiņa. Tas ir tāpēc, ka blokķēdes pēc noklusējuma ir ievilktas. Ja jūs vienkārši vēlaties ievilkt tekstu, kas nav bloku citāts, tā vietā izmantojiet CSS piemales.
• lpp - Daži tīmekļa redaktori izmanto (nepārtraukta atstarpe, kas atrodas rindkopā), lai pievienotu papildu atstarpi starp lapas elementiem, nevis definētu faktiskos punktus šīs lapas tekstam. Tāpat kā iepriekšējā piemērā, lai pievienotu atstarpi, tā vietā jāizmanto rekvizīts margin vai polsterējuma stils.
• ul - Kā ar

  , pievienojot tekstu a iekšpusē

   tag ievada šo tekstu lielākajā daļā pārlūkprogrammu. Šis ir gan semantiski nepareizs, gan nederīgs HTML, jo tikai
  •  tagi ir derīgi
    tagu. Atkal izmantojiet piemales vai pildījuma stilu, lai ievilktu tekstu.
  • h1, h2, h3, h4, h5 un h6 - Varat izmantot virsrakstu tagus, lai fontus padarītu lielākus un drosmīgākus, bet, ja teksts nav virsraksts, tā vietā izmantojiet CSS īpašības font-weight un font-size.

  Izmantojot HTML tagus, kuriem ir nozīme, jūs izveidojat lapas, kas sniedz vairāk informācijas nekā tās, ar kurām visu vienkārši ieskauj

   tagus.

  Kuri HTML tagi ir semantiski?

  Kaut arī gandrīz katrs HTML4 tags un visi HTML5 tagiem ir semantiska nozīme, dažiem tagiem ir galvenokārt semantisks.

  Piemēram, HTML5 ir atkārtoti definējis  un  tagiem jābūt semantiskiem. The  birka nepiešķir īpašu nozīmi; drīzāk marķētais teksts parasti tiek attēlots treknrakstā. Tāpat arī  tags nepiešķir īpašu nozīmi vai uzsvaru; drīzāk tas definē tekstu, kas parasti tiek pasniegts kursīvā.

  Semantiskie HTML tagi

  Abreviatūra
  Akronīms
  Garš citāts
  Definīcija
  Adrese dokumenta autoram (-iem)
  Citēšana
  Koda atsauce
  Teletipa teksts
  Loģisks sadalījums
  Vispārējs inline stila konteiners
  Dzēsts teksts
  Ievietots teksts
  Uzsvars
  Liels 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
  Sestā līmeņa virsraksts
  	Tematisks pārtraukums
  Teksts, kas jāievada lietotājam
  Iepriekš formatēts teksts
  Īss ieskats citātā
  Parauga izeja
  Apakšraksts
  Virsraksts
  Mainīgs vai lietotāja definēts teksts