Veebikujunduse oluline põhimõte on idee kasutada HTML-elemente selle asemel, et näidata, mis need tegelikult on, selle asemel, kuidas need brauseris vaikimisi võivad ilmuda. Seda tuntakse kui semantilise HTML-i kasutamist.

Mis on semantiline HTML?

Semantiline HTML ehk semantiline märgistus on HTML, mis tutvustab veebilehele tähendust, mitte ainult esitlust. Näiteks a

 silt näitab, et lisatud tekst on lõik. See on nii semantiline kui ka esitlev, sest inimesed teavad, mis on lõiked, ja brauserid teavad, kuidas neid näidata.

Selle võrrandi tagaküljel on sellised sildid nagu  ja  pole semantilised. Need määratlevad ainult selle, kuidas tekst peaks välja nägema (paksus või kaldkirjas), ja ei anna märgistusele täiendavat tähendust.

Semantiliste HTML-siltide näited on järgmised:

• Päise sildid

   läbi

Standarditele vastava veebisaidi loomisel on veel palju semantilisi HTML-silte, mida kasutada.

Miks peaksite semantikast hoolima

Semantilise HTML-i kirjutamise eelis tuleneb sellest, mis peaks olema iga veebilehe juhtiv eesmärk: soov suhelda. Lisades oma dokumendile semantilised sildid, esitate selle dokumendi kohta lisateavet, mis aitab suhtlemisel. Täpsemalt teevad semantilised sildid brauserile selgeks, mis on lehe ja selle sisu tähendus. Seda selgust teavitatakse ka otsingumootoritest, tagades õigete päringute jaoks õigete lehtede edastamise.

Semantilised HTML-sildid pakuvad teavet nende siltide sisu kohta, mis ületab nende lehe väljanägemise. Tekst, mis on suletud  brauser tunnistab sildi kohe teatud tüüpi kodeerimiskeelena. Selle koodi renderdamise asemel saab brauser aru, et kasutate seda teksti koodi näitena artikli või veebipõhise õpetuse jaoks.

Semantiliste siltide kasutamine annab teile palju rohkem konksu ka oma sisu kujundamiseks. Võib-olla eelistate täna, et teie koodinäidised kuvatakse brauseri vaikestiilis, kuid homme võiksite neid helistada halli taustavärviga; hiljem võiksite siiski määratleda täpse ühevälise fontide perekonna või fondivirna proovide jaoks kasutada. Kõiki neid asju saate hõlpsasti teha, kasutades semantilist märgistust ja nutikalt rakendatud CSS-i.

Semantiliste siltide õige kasutamine

Kui kasutate semantilisi silte tähenduse edastamiseks, mitte esitluse eesmärgil, olge ettevaatlik, et te ei kasutaks neid valesti lihtsalt nende tavaliste kuvaomaduste jaoks. Mõned kõige sagedamini väärkasutatud semantilised sildid on järgmised:

• plokkpakkumine - Mõned inimesed kasutavad silt taanetava teksti taandamiseks, mis pole tsitaat. Selle põhjuseks on asjaolu, et plokkpakkumised on vaikimisi taandatud. Kui soovite lihtsalt taandada teksti, mis pole blokeeritud pakkumine, kasutage selle asemel CSS-veeriseid.
• lk - Mõned veebitoimetajad kasutavad (lõigus sisalduv katkematu tühik), et lisada lehe elementide vahele lisaruumi, selle asemel, et määratleda selle lehe tekstile tegelikke lõike. Nagu eelmises näites, peaksite ruumi lisamiseks selle asemel kasutama atribuuti marginaal või polsterdusstiil.
• ul - Nagu ka

  , lisades teksti a sisse

   silt taandab seda teksti enamikus brauserites. See on nii semantiliselt vale kui ka vale HTML, sest ainult
  •  sildid kehtivad a jooksul
    silt. Jällegi kasutage teksti taandamiseks veerist või täidisstiili.
  • h1, h2, h3, h4, h5 ja h6 - Fondide suuremaks ja julgemaks muutmiseks võite kasutada pealkirja silte, kuid kui tekst pole pealkiri, kasutage selle asemel omadusi font-weight ja font-size CSS.

  Tähendusega HTML-märgendite abil saate luua lehti, mis edastavad rohkem teavet kui need, mis lihtsalt ümbritsevad kõike

   sildid.

  Millised HTML-märgendid on semantilised?

  Kuigi peaaegu iga HTML4 silt ja kõik HTML5 siltidel on semantiline tähendus, mõnedel siltidel on peamiselt semantiline.

  Näiteks HTML5 on uuesti määratlenud  ja  et need oleksid semantilised. The  silt ei anna erilist tähtsust; pigem on märgistatud tekst tavaliselt rasvases kirjas. Samamoodi  silt ei anna erilist tähtsust ega rõhuasetust; pigem määratleb see teksti, mis tavaliselt renderdatakse kursiivis.

  Semantilised HTML-märgendid

  Lühend
  Lühend
  Pikk tsitaat
  Definitsioon
  Dokumendi autori (te) aadress
  Viide
  Koodiviide
  Teletüübi tekst
  Loogiline jaotus
  Sisseehitatud üldine konteiner
  Kustutatud tekst
  Lisatud tekst
  Rõhk
  Tugev rõhuasetus
  Esimese taseme pealkiri
  Teise taseme pealkiri
  Kolmanda taseme pealkiri
  Neljanda taseme pealkiri
  Viienda taseme pealkiri
  Kuuenda taseme pealkiri
  	Temaatiline paus
  Kasutaja sisestatav tekst
  Eelvormindatud tekst
  Lühike sisuline tsitaat
  Proovi väljund
  Alaindeks
  Ülaindeks
  Muutuja või kasutaja määratud tekst