Svarbus interneto dizaino principas yra idėja naudoti HTML elementus nurodant, kokie jie iš tikrųjų yra, o ne tai, kaip jie gali būti rodomi naršyklėje pagal numatytuosius nustatymus. Tai žinoma kaip semantinio HTML naudojimas.

Kas yra semantinis HTML?

Semantinis HTML arba semantinis žymėjimas yra HTML, įvedantis prasmę tinklalapyje, o ne tik pateikimą. Pavyzdžiui, a

 žyma rodo, kad pridedamas tekstas yra pastraipa. Tai yra ir prasminis, ir pristatomasis, nes žmonės žino, kas yra pastraipos, o naršyklės žino, kaip jas rodyti.

Šios lygties atvirkštinėje pusėje pažymėkite tokias žymes kaip  ir  nėra prasminiai. Jie apibrėžia tik tai, kaip tekstas turi atrodyti (paryškintas arba kursyvas), ir nepateikia jokios papildomos reikšmės žymėjimui.

Semantinių HTML žymių pavyzdžiai:

• Antraštės žymos

   per

Kuriant standartus atitinkančią svetainę, galima naudoti daug daugiau prasminių HTML žymių.

Kodėl jums turėtų rūpėti semantika

Semantinio HTML rašymo nauda kyla iš to, kas turėtų būti bet kurio tinklalapio varomoji paskirtis: noras bendrauti. Pridėdami semantines žymas prie savo dokumento, pateikiate papildomos informacijos apie tą dokumentą, kuri padeda bendrauti. Konkrečiai, semantinės žymos leidžia naršyklei aiškiai suprasti, kokia yra puslapio ir jo turinio prasmė. Šis aiškumas taip pat perduodamas paieškos sistemoms, užtikrinant, kad tinkamoms užklausoms būtų pateikti tinkami puslapiai.

Semantinės HTML žymos pateikia informaciją apie tų žymų turinį, kuri apima ne tik tai, kaip jos atrodo puslapyje. Tekstas, pridedamas prie  žymelę naršyklė iš karto atpažįsta kaip tam tikros rūšies kodavimo kalbą. Užuot bandžiusi atkurti tą kodą, naršyklė supranta, kad tą tekstą naudojate kaip kodo pavyzdį straipsnio ar internetinės pamokos tikslais.

Naudojant semantines žymas, suteikiama daug daugiau kabliukų ir jūsų turinio stiliui. Galbūt šiandien norite, kad kodo pavyzdžiai būtų rodomi numatytuoju naršyklės stiliumi, tačiau rytoj galbūt norėsite juos iškviesti pilka fono spalva; vėliau vis tiek galbūt norėsite apibrėžti tikslią šriftų šešioliką, šrifto kamino naudoti jūsų mėginiams. Visus šiuos dalykus galite lengvai atlikti naudodami semantinį žymėjimą ir sumaniai pritaikytą CSS.

Teisingas semantinių žymų naudojimas

Naudodami semantines žymas reikšmei perteikti, o ne pateikimo tikslams, būkite atsargūs, kad jų nenaudotumėte neteisingai paprasčiausiai dėl jų bendrų rodymo savybių. Kai kurios dažniausiai netinkamai naudojamos semantinės žymos yra:

• blokinė citata - Kai kurie žmonės naudoja žyma įtraukiant tekstą, kuris nėra citata. Taip yra todėl, kad blokinės citatos yra įtrauktos pagal numatytuosius nustatymus. Jei norite tiesiog įrašyti tekstą, kuris nėra blokinė citata, naudokite CSS paraštes.
• p - Kai kurie interneto redaktoriai naudoja (nepertraukiama vieta pastraipoje), kad tarp puslapio elementų būtų galima pridėti papildomos vietos, o ne apibrėžti faktines to puslapio teksto pastraipas. Kaip ir ankstesniame pavyzdyje, vietai pridėti turėtumėte naudoti paraštės arba užpildo stiliaus ypatybę.
• ul - Kaip ir su

  , pridedant tekstą a viduje

   žyma įtraukia tą tekstą į daugumą naršyklių. Tai yra semantiškai neteisingas ir netinkamas HTML, nes tik
  •  žymos galioja per
    žyma. Vėlgi, norėdami įrašyti tekstą, naudokite paraštę arba užpildymo stilių.
  • h1, h2, h3, h4, h5 ir h6 - Galite naudoti antraštės žymas, kad šriftai būtų didesni ir drąsesni, tačiau jei tekstas nėra antraštė, vietoj to naudokite šrifto svorio ir šrifto dydžio CSS ypatybes.

  Naudodamiesi prasmę turinčiomis HTML žymomis, sukuriate puslapius, kuriuose pateikiama daugiau informacijos nei tuos, kurie paprasčiausiai viską supa

   žymos.

  Kurios HTML žymos yra semantinės?

  Nors beveik kiekviena HTML4 žyma ir visos HTML5 žymos turi prasminę reikšmę, kai kurios žymos yra pirmiausia prasminis.

  Pvz., HTML5 iš naujo apibrėžė  ir  žymos turi būti semantinės.  žymė nesuteikia ypatingos svarbos; o pažymėtas tekstas paprastai pateikiamas paryškintu šriftu. Taip pat  žymė nesuteikia ypatingos svarbos ar akcento; jis apibrėžia tekstą, kuris paprastai pateikiamas kursyvu.

  Semantinės HTML žymos

  Santrumpa
  Akronimas
  Ilga citata
  Apibrėžimas
  Dokumento (-ų) autoriaus (-ių) adresas
  Citavimas
  Kodo nuoroda
  Teletype tekstas
  Loginis skirstymas
  Bendras tiesioginio stiliaus konteineris
  Ištrintas tekstas
  Įterptas tekstas
  Pabrėžimas
  Didelis akcentas
  Pirmojo lygio antraštė
  Antro lygio antraštė
  Trečio lygio antraštė
  Ketvirto lygio antraštė
  Penkto lygio antraštė
  Šeštojo lygio antraštė
  	Teminė pertrauka
  Tekstas, kurį turi įvesti vartotojas
  Iš anksto suformatuotas tekstas
  Trumpa įterpta citata
  Mėginio išvestis
  Abonementas
  Viršutinis indeksas
  Kintamasis arba vartotojo apibrėžtas tekstas