Zvýraznění textu na webu a úvod do sémantiky
Používáte tag<b> a <strong> a nevíte, jaký je mezi nimi rozdíl? Nevíte, co je to sémantika? Tak je tento článek určen právě pro Vás ;-)
Záhadné slovíčko "sémantika"
Každý jazyk má své pravidla a normy, které by se měly a někdy i musí dodržovat. Tyto pravidla nemá jen náš rodný český jazyk, ale i jazyky "počítačové", jako jsou například programovací jazyky či značkovací jazyk (X)HTML.
Český jazyk má gramatická pravidla, která například určují, že ve slově hrady musí vždy být tvrdé y. To prostě nejde vyvrátit a považuje se to za hrubou chybu. Ke gramatickým pravidlům by se dala přirovnat syntaktická pravidla v programovacích jazycích. A stejně tak je na tom i validita značkovacího jazyku (X)HTML.
Český jazyk má kromě gramatických pravidel i stylistická pravidla. No a u značkovacího jazyka (X)HTML se tomu říká sémantika. Bohužel sémantiku si narozdíl od validity nemůžete ověřit. Je to stejné jako v českém jazyce, gramatické chyby Vám v dnešní době umí odhalit většina programů. Ale žádný z nich Vás určitě nebude upozorňovat, že jste ve větě použili mnoho stejných slov a nebo že jste mohli použít synonymum k určitému slovu, aby to vypadalo lépe.
Je sémantika nutná?
Na tuto otázku je snadná odpověď. Napsali byste větu, kde se bude nějaké slovo několikrát opakovat? Napsali byste svůj životopis tak, aby nebyl pochopitelný? Na tuto otázku si každý sám odpovězte a pak se rozhodněte, jestli chcete mít svůj web sémantický.
Já osobně sémantiku považuji za nutnost, stejně tak jako validitu. Byť sám dobře vím, že můj web není na 100% sémantický, protože používám nesémantický tag <div>.
Výhody sémantiky
Pokud se rozhodnete pro tvorbu sémantického webu, jistě Vás potěší následnující fakta:
- Čím více máte sémantičtější web, tím větší máte pravděpodobnost, že bude mít lepší SEO a tím se může objevit na lepších pozicích ve vyhledávačích.
- Sémantický web by se měl bez větších problému zobrazit i návštěvníkovi s vypnutými styly. Tím se stává přístupnějším.
- Máte moderní web (
), protože podle moderního pojetí webdesignu mají (X)HTML tagy určovat smysl, kdežto styly mají určovat vzhled.
No už bylo dost teoretického žvástání a tak se vrhneme na praktický příklad, který by nám měl osvětlit nejasnosti .
Zvýraznění textu
Předem si musíme uvědomit, že zvýraznění může být dvojí, vzhledové a logické. S tím souvisí tagy <b> a <strong>. Oba tyto tagy text na webu vizuálně zvýrazní. Avšak nejsou stejné, tag <strong> totiž text nejen graficky zvýrazní, ale i jeho význam zdůrazní.
- Text mezi tagy
<b> </b>je jen tučným písmem, nic víc. Význam tohoto textu je stejný jako okolní text. - Text mezi tagy
<strong> </strong>má větší význam než okolní text. Je prostě logicky významný. To, že se zobrazí taktéž tučně jako u tagu<b>, je vedleší věc.
Dva příklady na zvýraznění textů
Pro ještě lepší pochopení uvedu dva příklady. Pokud máte na webu větu "Dnes je poslední den, kdy se můžete zdarma registrovat ...", jistě nějaké to slovíčko zvýrazníte, abyste upoutali pozornost čtenáře. Věta bude tedy vypadat takto: "Dnes je poslední den, kdy se můžete zdarma registrovat ...". A jaký tag použijeme? Samozřejmě <;code class="inline"><strong>, protože to není tučný text bez významu, ale naopak důležitý text, který musí být zvýrazněn jak logicky, tak vizuálně.
Druhým příkladem může být věta: "Obsah čtverce vypočítáme vzorcem a2, za předpokladu, že a je strana čtverce.". V této větě jsem použil oba dva tagy. Na vzorec jsem použil tag <strong>, protože má větší význam než okolní text. Na zápis "... a je strana čtverce." jsem naopak použil tag <b>, protože písmeno a nemělo žádný logický význam. Jen jsem ho chtěl vizuálně zvýraznit od okolního textu.
Další zvýrazňovací tagy
Existují další zvýrazňovací tagy <i> a <em>. Rozdíl mezi nimi je stejný jako v předchozím případě. Tag <i> jen vizuálně zvýrazní text od okolního tím, že ho zobrazí kurzívou. Tag <em> text nejen vizuálně zvýrazní (taktéž kurzíva), ale i logicky zdůrazní.
Shrnutí na závěr
Tag <strong> dává textu větší význam než tag <em>. Tagy <b> a <i> nemají žádný sémantický význam, jen text vizuálně rozliší od okolního textu, nic víc.
Nezapomeňte, že u všech těchto tagů si můžete po vizuální stránce hrát jak chcete. Třeba jako já, pro tag <strong> jsem použil klasický tučný černý text, u tagu <b> jen šedý tučný text. V tomto případě mi stačilo v CSS změnit styl pro tag <b>:
b{
color: #585858;
}
Zaujalo Vás téma sémantika a chcete se o ní dozvědět více? Rada je snadná, navštivte stránky www.semantika.name, kterou napsal Lukáš Havrlant.
Kategorie: Web a vše kolem něj ≈ 04. 03. 2006 ≈ Počet zobrazení: 3165x
Komentáře
sice jsem se nic novýho nedozvěděl, ale někomu se bude třeba hodit
BTW: já taky používám div-y
Už ale nevím přesně tu adresu. Vzpomínáš?
. Jednomu rádoby "SEO Analyzeru vadilo, že používám <b> a považoval to za chybu. Na začátku jsi přece psal, že styly jsou pro vzhled..
Ten druhý příklad mi připadá spíše jako taková prasárnička. Zas na druhou stranu podle věty "(X)HTML tagy určovat smysl" tam tag <b> nemá vůbec co dělat.
No musím přiznat, žes mě teďka dostal
Upřímě řečeno jí nedávám až zas takový význam, pač sám Mazlo ([[655]]) vydíš, že je to pěkně zamotané a zapeklité ;)
No přece místo "dali" by mělo být "dala"
(a kdybys tam náhodou chtěl nějaký to "i/y", i když to není správně, tak tvrdý)
Ale jinak hezkej článek.
Jinak "dle mého skromného názoru", je v HTML, a to jak s X tak i bez něj, dost málo značek na to, aby se daly stoprocentně sémantické weby psát. Takové si můžeš napsat snad jen v XML
.