Mi a Szemantikus HTML és miért kell használnia?

Fontos elv a Web Standards mozgalom, amely felelős az ipar már ma is az ötletet, hogy a HTML elemek, amik ahelyett, hogy miként jelenik meg a böngésző alapértelmezés szerint. Ezt a Szemantikus HTML használatával ismerik.

Mi az a Szemantikus HTML?

A szemantikai HTML vagy a szemantikai jelölés a HTML, amely a weboldal helyett értelmezést jelent, nem csak prezentációt. Például a

A címke azt jelzi, hogy a mellékelt szöveg egy bekezdés.

Ez mind szemantikai, mind bemutató, hiszen az emberek tudják, hogy mely bekezdések és böngészők tudják, hogyan kell megjeleníteni őket.

Az egyenlet flip oldalán a címkék tetszenek és nem szemantikai jellegűek, mert csak azt határozzák meg, hogy a szöveg hogyan nézzen ki (félkövér vagy dőlt), és ne adjon további jelentést a jelölésnek.

A szemantikus HTML-címkék közé tartozik a fejléc-címkék

keresztül

,

, és . Számos olyan szemantikus HTML-címke létezik, amelyet szabványos weboldal létrehozásakor lehet használni.

Miért kell gondoskodnod a szemantikáról?

A szemantikai HTML-írás előnye abból ered, hogy mi legyen a weboldal vezetési célja - a kommunikáció vágya. A dokumentum szemantikai címkéinek hozzáadásával további információkat nyújt a dokumentumról, amely segíti a kommunikációt. Pontosabban, a szemantikai címkék világossá teszik a böngésző számára, hogy egy oldal és tartalmának jelentése.

Ez az egyértelműség a keresőmotorokkal is kommunikál, biztosítva, hogy a megfelelő oldalakat a megfelelő lekérdezésekhez szállítsák.

A szemantikus HTML-címkék információkat nyújtanak a címkék tartalmáról, amely túlmutat az oldalon. Szöveg, amely a tagot a böngésző azonnal felismeri, mint valamilyen kódolási nyelvet.

Ahelyett, hogy tegyék a kódot, a böngésző úgy értelmezi, hogy az Ön által használt, hogy a szöveg, mint például a kód céljára egy cikket, vagy online tanfolyam valamilyen.

A szemantikus címkék használatával számos további kampó található a tartalom megfogalmazásához. Talán ma azt szeretné, hogy a kód minták jelennek meg az alapértelmezett böngésző a stílus, de holnap hívni kívánt őket egy szürke háttér színét, és később meg szeretné határozni a pontos mono elhelyezkedő font család vagy font köteg használni a mintákat. Könnyedén mindezeket a dolgokat egyszerű szemantikai jelöléssel és elegánsan alkalmazott CSS-kel egyszerűen elvégezheti.

Szemantikus címkék helyes használata

Ha szemantikai címkéket szeretnél használni, nem pedig prezentáció célok érdekében, akkor óvatosnak kell lenned, ha nem használod őket helytelenül a közös megjelenítési tulajdonságok miatt. A leggyakoribb félreértett szemantikai címkék közé tartoznak a következők:

• blockquote - Néhányan használják a

  címke a szöveg behúzásához, amely nem idézet. Ez azért van, mert a blokkvázlatok alapértelmezés szerint behúzódnak. Ha egyszerűen csak a behúzás előnyeit kívánja előnyben részesíteni, de a szöveg nem blokkolt, használja a CSS margókat.

• p - Néhány webszerkesztő használ (egy paragrafushoz tartozó megszakító hely), hogy extra területet adjon az oldalelemek között, nem pedig az adott oldal szövegére vonatkozó tényleges bekezdéseket. Mint az előzőekben említett behúzási példa esetében is, a margót vagy a kitöltési stílus tulajdonságot kell hozzáadni a tér hozzáadásához.
• ul - Mint blokkvota, szöveg beszúrásához a
  A legtöbb böngészőben szöveges címkét jelölhet meg. Ez semantikusan hibás és érvénytelen HTML, mint csak
  • a címkék érvényesek a
    címke. Ismételten használd a margó- vagy párnázási stílust a szöveg behúzására.
  • h1-h6 - A cím címkéket lehet használni, hogy a betűtípusok nagyobb és bátrabb, de ha a szöveg nem egy címsor, hogy ne legyen benne egy fejléc címke. Használja a betűtípus-súly és a betűméret CSS-tulajdonságait, ha módosítani szeretné az adott szöveg méretét vagy súlyát.

  A jelentéstartalmú HTML címkék használatával olyan oldalakat hozhat létre, amelyek több információt szolgáltatnak, mint csupán a mindent körülvevő tartalmakkal

  címkéket.

  Milyen HTML-címkék szemantikai jellegűek?

  Míg a szinte minden HTML4 címke és az összes HTML5 címke szemantikus jelentéssel bír, egyes címkék elsősorban szemantikai természetűek.

  Például a HTML5 újradefiniálta a és a címkék legyenek szemantikusak. A címke nem jelent különösebb jelentőséget, hanem olyan szöveget, amelyet tipikusan félkövér formában jelenítenek meg. A a tag nem jelent különösebb jelentőséget vagy hangsúlyt, hanem olyan szöveget határoz meg, amelyet tipikusan dőlt betűvel rendeznek.

  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ú konténer
  	Törölt szöveg
  	Beillesztett szöveg
  	Hangsúly
  	Erős hangsúlyt
  	Első szintű főcím
  	Második szintű főcím
  	Harmadik szintű címsor
  	Negyedik szintű címsor
  	Ötödik szintű főcím
  	Hatodik szintű főcím
  	Tematikus szünet
  	A felhasználó által beírandó szöveg
  	Előre formázott szöveg
  	Rövid inline ajánlat
  	Minta kimenet
  	Alsó index
  	mutatószám
  	Változó vagy felhasználó által definiált szöveg