Dôležitým princípom hnutia Web Standards, ktorý je zodpovedný za odvetvie, ktoré dnes máme, je myšlienka používania prvkov HTML pre to, čo sú skôr než ako sa môžu v prehliadači zobraziť štandardne. Toto je známe ako používanie sémantického HTML.
Čo je sémantický HTML
Sémantický HTML alebo sémantický značkovanie je HTML, ktorý predstavuje význam pre webovú stránku a nie pre prezentáciu. Napríklad značka
označuje, že priložený text je odsek.
Toto je sémantické aj prezentačné, pretože ľudia vedia, čo sú odseky a prehliadače vedia, ako ich zobraziť.
Na druhej strane tejto rovnice tagy ako a nie sú sémantické, pretože definujú iba to, ako by text mal vyzerať (tučné alebo kurzíva) a neposkytuje žiadny ďalší význam značke.
Príklady sémantických značiek HTML zahŕňajú hlavičky značky
až , , a . Existuje mnoho ďalších sémantických tagov HTML, ktoré je možné použiť pri vytváraní webových stránok vyhovujúcich normám.
Prečo by ste mali starať o sémantiku
Výhoda písania sémantického HTML vyplýva z toho, čo by malo byť cieľom všetkých webových stránok - túžba komunikovať. Pridaním sémantických značiek do dokumentu poskytnete ďalšie informácie o tomto dokumente, ktoré pomáhajú pri komunikácii. Konkrétne sémantické značky jasne ukazujú prehliadaču, čo znamená stránka a jej obsah.
Táto zrozumiteľnosť je komunikovaná aj s vyhľadávacími mechanizmami, ktoré zabezpečujú, že správne stránky sa doručia na správne dopyty.
Sémantické značky HTML poskytujú informácie o obsahu týchto značiek, ktoré presahujú len to, ako vyzerajú na stránke. Text, ktorý je priložený k značke , okamžite rozpozná prehliadač ako určitý typ kódovacieho jazyka.
Namiesto pokusu o vykreslenie tohto kódu prehliadač chápe, že tento text používate ako príklad kódu na účely článku alebo online tutoriálu nejakého druhu.
Používanie sémantických značiek vám poskytne oveľa viac hákov na štýl vášho obsahu. Možno dnes dáte prednosť tomu, aby sa vzorky kódu zobrazovali v predvolenom štýle prehliadača, ale zajtra ich chcete zavolať sivou farbou pozadia a neskôr chcete definovať presnú jednozložkovú rodinu písiem alebo zásobník fontov, ktorý sa má používať vaše vzorky. Môžete ľahko urobiť všetky tieto veci pomocou sémantického značkovania a inteligentne aplikované CSS.
Používajte sémantické značky správne
Ak chcete používať sémantické značky na vyjadrenie významu, a nie na účely prezentácie, musíte dávať pozor, aby ste ich nepoužívali nesprávne jednoducho pre svoje bežné zobrazovacie vlastnosti. Medzi najčastejšie zneužité sémantické značky patria:
- blockquote - Niektorí ľudia používajú značku na odsadenie textu, ktorý nie je citátom. Je to preto, že blokové kvóty sú predvolene odsadené. Ak jednoducho chcete mať výhodu odsadenia, ale text nie je bloková, použite namiesto toho okraje CSS.
- p - Niektorí weboví redaktori používajú
& nbsp; (nerozbitný priestor obsiahnutý v paragrafe), aby pridali viac priestoru medzi prvkami stránky, namiesto definovania skutočných odsekov pre text tejto stránky. Rovnako ako v prípade vyššie uvedeného odsadenia, mali by ste pridať medzeru alebo vlastnosť štýlu políčka.
- ul - ako blockquote, prikladanie textu vo vnútri značky
odsadzuje text vo väčšine prehliadačov. Toto je sémanticky nesprávny aj neplatný kód HTML, keďže tagy - sú platné v rámci značky
. Znova použite okraj alebo štýl vycpávky na odsadenie textu.
- h1-h6 - Značky nadpisov môžu byť použité na vytváranie väčších a odvážnejších písiem, ale ak text nie je názov, nemal by byť v hlavičke. Ak chcete zmeniť veľkosť alebo váhu konkrétneho textu na vašej stránke, použite namiesto toho vlastnosti CSS pre veľkosť písma a veľkosť písma.
Pomocou značiek HTML, ktoré majú zmysel, vytvárate stránky, ktoré poskytujú viac informácií, než len všetko okolo
.
Ktoré HTML značky sú sémantické?
Zatiaľ čo takmer každá značka HTML4 a všetky značky HTML5 majú sémantický význam, niektoré značky majú predovšetkým sémantický charakter.
Napríklad HTML5 zmenil definíciu značiek a , aby boli sémantické. Značka nepredstavuje väčší význam, ale skôr text, ktorý je zvyčajne vykreslený tučným písmom. Značka tiež neprináša ďalšiu dôležitosť alebo dôraz, ale skôr definuje text, ktorý sa zvyčajne zobrazuje kurzívou.
Sémantické HTML tagy
Skratka akronym
Dlhý citát definícia Adresa autora (autorov) dokumentu citácie Odkaz na kód Text teletypu Logické rozdelenie Generic kontajner inline štýlu Odstránený text Vložený text Dôraz Silný dôraz
Titulok prvej úrovne
Titulok druhej úrovne
Nadpis tretej úrovne
Nadpis štvrtej úrovne
Nadpis na piatej úrovni
Titul šiestej úrovne
Tematická prestávka Text, ktorý má byť zadaný používateľom
Predformátovaný text
Krátka inline citácia Vzorový výstup index nazvaný Variabilný alebo užívateľom definovaný text
, a . Existuje mnoho ďalších sémantických tagov HTML, ktoré je možné použiť pri vytváraní webových stránok vyhovujúcich normám.
Prečo by ste mali starať o sémantiku
Výhoda písania sémantického HTML vyplýva z toho, čo by malo byť cieľom všetkých webových stránok - túžba komunikovať. Pridaním sémantických značiek do dokumentu poskytnete ďalšie informácie o tomto dokumente, ktoré pomáhajú pri komunikácii. Konkrétne sémantické značky jasne ukazujú prehliadaču, čo znamená stránka a jej obsah.
Táto zrozumiteľnosť je komunikovaná aj s vyhľadávacími mechanizmami, ktoré zabezpečujú, že správne stránky sa doručia na správne dopyty.
Sémantické značky HTML poskytujú informácie o obsahu týchto značiek, ktoré presahujú len to, ako vyzerajú na stránke. Text, ktorý je priložený k značke , okamžite rozpozná prehliadač ako určitý typ kódovacieho jazyka.
Namiesto pokusu o vykreslenie tohto kódu prehliadač chápe, že tento text používate ako príklad kódu na účely článku alebo online tutoriálu nejakého druhu.
Používanie sémantických značiek vám poskytne oveľa viac hákov na štýl vášho obsahu. Možno dnes dáte prednosť tomu, aby sa vzorky kódu zobrazovali v predvolenom štýle prehliadača, ale zajtra ich chcete zavolať sivou farbou pozadia a neskôr chcete definovať presnú jednozložkovú rodinu písiem alebo zásobník fontov, ktorý sa má používať vaše vzorky. Môžete ľahko urobiť všetky tieto veci pomocou sémantického značkovania a inteligentne aplikované CSS.
Používajte sémantické značky správne
Ak chcete používať sémantické značky na vyjadrenie významu, a nie na účely prezentácie, musíte dávať pozor, aby ste ich nepoužívali nesprávne jednoducho pre svoje bežné zobrazovacie vlastnosti. Medzi najčastejšie zneužité sémantické značky patria:
- blockquote - Niektorí ľudia používajú značku na odsadenie textu, ktorý nie je citátom. Je to preto, že blokové kvóty sú predvolene odsadené. Ak jednoducho chcete mať výhodu odsadenia, ale text nie je bloková, použite namiesto toho okraje CSS.
- p - Niektorí weboví redaktori používajú
& nbsp; (nerozbitný priestor obsiahnutý v paragrafe), aby pridali viac priestoru medzi prvkami stránky, namiesto definovania skutočných odsekov pre text tejto stránky. Rovnako ako v prípade vyššie uvedeného odsadenia, mali by ste pridať medzeru alebo vlastnosť štýlu políčka.
- ul - ako blockquote, prikladanie textu vo vnútri značky
odsadzuje text vo väčšine prehliadačov. Toto je sémanticky nesprávny aj neplatný kód HTML, keďže tagy - sú platné v rámci značky
. Znova použite okraj alebo štýl vycpávky na odsadenie textu.
- h1-h6 - Značky nadpisov môžu byť použité na vytváranie väčších a odvážnejších písiem, ale ak text nie je názov, nemal by byť v hlavičke. Ak chcete zmeniť veľkosť alebo váhu konkrétneho textu na vašej stránke, použite namiesto toho vlastnosti CSS pre veľkosť písma a veľkosť písma.
Pomocou značiek HTML, ktoré majú zmysel, vytvárate stránky, ktoré poskytujú viac informácií, než len všetko okolo
.
Ktoré HTML značky sú sémantické?
Zatiaľ čo takmer každá značka HTML4 a všetky značky HTML5 majú sémantický význam, niektoré značky majú predovšetkým sémantický charakter.
Napríklad HTML5 zmenil definíciu značiek a , aby boli sémantické. Značka nepredstavuje väčší význam, ale skôr text, ktorý je zvyčajne vykreslený tučným písmom. Značka tiež neprináša ďalšiu dôležitosť alebo dôraz, ale skôr definuje text, ktorý sa zvyčajne zobrazuje kurzívou.
Sémantické HTML tagy
Skratka akronym
Dlhý citát definícia Adresa autora (autorov) dokumentu citácie Odkaz na kód Text teletypu Logické rozdelenie Generic kontajner inline štýlu Odstránený text Vložený text Dôraz Silný dôraz
Titulok prvej úrovne
Titulok druhej úrovne
Nadpis tretej úrovne
Nadpis štvrtej úrovne
Nadpis na piatej úrovni
Titul šiestej úrovne
Tematická prestávka Text, ktorý má byť zadaný používateľom
Predformátovaný text
Krátka inline citácia Vzorový výstup index nazvaný Variabilný alebo užívateľom definovaný text