A webes szabványok mozgalmának egyik fontos elve, amely a mai iparágunkért felelős, az az elképzelés, hogy a HTML-elemeket használjuk, nem pedig az alapértelmezés szerint a böngészőben. 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 egy
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 és címkék nem szemantikusak, mert csak a szöveg megjelenésének módját határozzák meg (merész vagy dőlt), és nem jelentenek további jelentést a jelölésnek.
A szemantikus HTML-címkék közé tartoznak a
, , és fejléc-címkék. 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. A címkéhez tartozó szöveget a böngésző azonnal felismeri bizonyos típusú kódolási nyelveként.
Ahelyett, hogy megpróbálná megjeleníteni ezt a kódot, a böngésző megérti, hogy a kód példájaként a cikket egy cikk vagy egy online bemutató céljára használja.
A szemantikus címkék használatával számos további kampó található a tartalom megfogalmazásához. Talán ma úgy tetszik, hogy a kódminták az alapértelmezett böngésző stílusban jelenjenek meg, de holnap szürke háttérszínnel szeretné felhívni őket, majd később meg szeretné határozni a pontos mono-spaced font-család vagy betűkészlet felhasználását 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 - Vannak, akik a címkét használják a szöveg beillesztéséhez, 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 - Egyes webes szerkesztők
& nbsp; (a paragrafusban nem megszakító helyet használva) extra területet adnak az oldalelemek közé, ahelyett, hogy meghatároznák 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 a blockquote, a szöveget egy
címke belsejébe helyezi, amely a legtöbb böngészőben szöveget tartalmaz. Ez semantikusan hibás és érvénytelen HTML, mivel csak - címkék érvényesek egy
tag alatt. Ismételten használd a margó- vagy párnázási stílust a szöveg behúzására.
- h1-h6 - A fejléc-címkék segítségével a betűkészletek nagyobbak és merészebbek lesznek, de ha a szöveg nem címsor, akkor nem kell egy címkecímke belsejében. 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
címkékkel körülvev
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 újraértelmezte a és címkék jelentését szemantikailag. A címke nem jelent különösebb jelentőséget, hanem olyan szöveget, amelyet jellemzően félkövér formában jelenít meg. Az címke nem jelent különösebb jelentőséget vagy hangsúlyt, hanem inkább olyan szöveget határoz meg, amely tipikusan dőlt betűvel jelenik 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ú 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
, és fejléc-címkék. 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. A címkéhez tartozó szöveget a böngésző azonnal felismeri bizonyos típusú kódolási nyelveként.
Ahelyett, hogy megpróbálná megjeleníteni ezt a kódot, a böngésző megérti, hogy a kód példájaként a cikket egy cikk vagy egy online bemutató céljára használja.
A szemantikus címkék használatával számos további kampó található a tartalom megfogalmazásához. Talán ma úgy tetszik, hogy a kódminták az alapértelmezett böngésző stílusban jelenjenek meg, de holnap szürke háttérszínnel szeretné felhívni őket, majd később meg szeretné határozni a pontos mono-spaced font-család vagy betűkészlet felhasználását 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 - Vannak, akik a címkét használják a szöveg beillesztéséhez, 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 - Egyes webes szerkesztők
& nbsp; (a paragrafusban nem megszakító helyet használva) extra területet adnak az oldalelemek közé, ahelyett, hogy meghatároznák 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 a blockquote, a szöveget egy
címke belsejébe helyezi, amely a legtöbb böngészőben szöveget tartalmaz. Ez semantikusan hibás és érvénytelen HTML, mivel csak - címkék érvényesek egy
tag alatt. Ismételten használd a margó- vagy párnázási stílust a szöveg behúzására.
- h1-h6 - A fejléc-címkék segítségével a betűkészletek nagyobbak és merészebbek lesznek, de ha a szöveg nem címsor, akkor nem kell egy címkecímke belsejében. 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
címkékkel körülvev
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 újraértelmezte a és címkék jelentését szemantikailag. A címke nem jelent különösebb jelentőséget, hanem olyan szöveget, amelyet jellemzően félkövér formában jelenít meg. Az címke nem jelent különösebb jelentőséget vagy hangsúlyt, hanem inkább olyan szöveget határoz meg, amely tipikusan dőlt betűvel jelenik 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ú 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