A webdesign fontos elve az az ötlet, hogy HTML elemeket használnak annak jelzésére, hogy valójában mi az, és nem alapértelmezés szerint hogyan jelenhetnek meg a böngészőben. Ez úgy ismert, hogy szemantikus HTML-t használ.

Mi a szemantikus HTML?

A szemantikus HTML vagy a szemantikai jelölés olyan HTML, amely a bemutatás helyett jelentést vezet be a weboldalra. Például a

 tag azt jelzi, hogy a mellékelt szöveg egy bekezdés. Ez szemantikai és prezentációs egyaránt, mert az emberek tudják, hogy melyek a bekezdések, és a böngészők tudják, hogyan jelenítsék meg őket.

Ennek az egyenletnek a fordított oldalán olyan címkék vannak, mint pl  és  nem szemantikai. Csak azt határozzák meg, hogy a szöveg hogyan nézzen ki (félkövér vagy dőlt), és nem adnak további jelentést a jelölésnek.

Példák a szemantikus HTML-címkékre:

• Fejléccímkék

   keresztül

Sokkal több szemantikus HTML-címke használható a szabványoknak megfelelő webhely készítésekor.

Miért kell törődnie a szemantikával?

A szemantikus HTML írás előnye abból fakad, hogy mi legyen a weboldalak vezető célja: a kommunikációs vágy. Szemantikus címkék hozzáadásával a dokumentumhoz további információkat ad meg arról a dokumentumról, amelyek elősegítik a kommunikációt. Pontosabban, a szemantikus címkék egyértelművé teszik a böngésző számára az oldal és tartalma jelentését. Ezt az egyértelműséget a keresőmotorokkal is kommunikálják, biztosítva, hogy a megfelelő oldalakat szállítsák a megfelelő lekérdezésekhez.

A szemantikus HTML-címkék információkat nyújtanak a címkék tartalmáról, amelyek túlmutatnak azon, hogy miként néznek ki egy oldalon. A  címkét a böngésző azonnal felismeri valamilyen kódoló nyelvként. Ahelyett, hogy megpróbálná megadni a kódot, a böngésző megérti, hogy a szöveget példaként használja a kódra egy cikk vagy egy online oktatóanyag céljából.

A szemantikus címkék használatával sokkal több kampót kapsz a tartalom stílusához is. Talán ma inkább azt szeretné, hogy a kódminták az alapértelmezett böngészőstílusban jelenjenek meg, de holnap érdemes lehet szürke háttérszínnel felhívni őket; később mégis érdemes meghatározni a pontos egyoldalas betűtípust vagy betűkészlet hogy a mintáihoz felhasználja. Ezeket a dolgokat egyszerűen elvégezheti a szemantikus jelölés és az intelligensen alkalmazott CSS használatával.

A szemantikus címkék helyes használata

Ha szemantikus címkéket használ a jelentés közvetítésére, nem pedig bemutatás céljából, ügyeljen arra, hogy ne használja őket helytelenül, csak a közös megjelenítési tulajdonságaikra. A leggyakrabban rosszul használt szemantikai címkék közé tartozik:

• blokk idézet - Néhány ember használja a címke olyan szöveg behúzásához, amely nem idézőjel. Ennek oka, hogy a blokk idézetek alapértelmezés szerint behúzva vannak. Ha egyszerűen be akarja húzni a szöveget, amely nem blokk idézet, akkor használjon CSS margókat.
• o - Néhány webszerkesztő használja (egy bekezdésben nem törhető szóköz), hogy az oldalelemek között több helyet biztosítson, ahelyett, hogy az adott oldal szövegéhez tényleges bekezdéseket definiálna. Az előző példához hasonlóan a margó vagy a kitöltési stílus tulajdonságot is használja a hely hozzáadásához.
• ul - Mint

  , szöveget csatolva a

   címke behúzza ezt a szöveget a legtöbb böngészőben. Ez szemantikailag helytelen és érvénytelen HTML, mert csak
  •  a címkék érvényesek a
    címke. Ismét használjon margót vagy kitöltési stílust a szöveg behúzásához.
  • h1, h2, h3, h4, h5 és h6 - Fejléccímkékkel nagyobb és merészebb betűtípusokat készíthet, de ha a szöveg nem fejléc, akkor használja a font-weight és font-size CSS tulajdonságokat.

  Jelentéssel rendelkező HTML-címkék használatával olyan oldalakat hozhat létre, amelyek több információt közvetítenek, mint azok, amelyek egyszerűen mindent körülvesznek

   címkék.

  Mely HTML tagek szemantikusak?

  Bár szinte minden HTML4 tag és az összes HTML5 a címkék szemantikai jelentéssel bírnak, néhány címke igen elsősorban szemantikus.

  Például a HTML5 újradefiniálta a  és  szemantikusnak kell lenniük. A  a címke nem jelent különösebb jelentőséget; inkább a címkézett szöveget szokták félkövéren megjeleníteni. Hasonlóképpen a  a címke nem jelent különösebb jelentőséget vagy hangsúlyt; inkább olyan szöveget határoz meg, amelyet tipikusan dőlt betűvel jelenítenek meg.

  Szemantikus HTML-címkék

  Rövidítés
  Betűszó
  Hosszú idézet
  Meghatározás
  A dokumentum szerzője (i) címe
  Idézet
  Kód hivatkozás
  Teletype szöveg
  Logikai felosztás
  Általános inline stílusú tároló
  Törölt szöveg
  Beszúrt szöveg
  Hangsúly
  Erős hangsúly
  Első szintű címsor
  Második szintű címsor
  Harmadik szintű címsor
  Negyedik szintű címsor
  Ötödik szintű címsor
  Hatodik szintű címsor
  	Tematikus szünet
  A felhasználó által beírandó szöveg
  Előre formázott szöveg
  Rövid soros idézet
  Minta kimenet
  Előirat
  Felső index
  Változó vagy felhasználó által definiált szöveg