XHTML – hlavní sémantické elementy

17. února 2003

•

Hlavní sémantické elementy XHTML jsou takové elementy, které říkají něco o obsahu, který obklopují, a umožňují tak i počítačům porozumět textu alespoň na minimální úrovni.

„Phrase“ elementy – em, strong, dfn, code, samp, kbd, var, cite, abbr a acronym

Povolený obsah: %Inline;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element em v XHTML 1.0 Strict DTD

Element strong v XHTML 1.0 Strict DTD

Element dfn v XHTML 1.0 Strict DTD

Element code v XHTML 1.0 Strict DTD

Element samp v XHTML 1.0 Strict DTD

Element kbd v XHTML 1.0 Strict DTD

Element var v XHTML 1.0 Strict DTD

Element cite v XHTML 1.0 Strict DTD

Element abbr v XHTML 1.0 Strict DTD

Element acronym v XHTML 1.0 Strict DTD

Pomocí tzv. phrase elementů vyznačujeme význam textu. Všechny zmiňované elementy jsou řádkové a mohou obsahovat pouze text nebo další řádkové elementy. Sémantika jednotlivých elementů je následující:

em: Vyznačuje zvýraznění (emphasis).
strong: Označuje důraznější zvýraznení.
dfn: Obsahem tohoto elementu je pojem nebo definice (definition).
code: Používá se k označení počítačového nebo programového kódu.
samp: Vyznačuje vzorový výstup programů, skriptů apod.
kbd: Indikuje text, který má být zadán uživatelem.
var: Označuje proměnnou, její vzorovou hodnotu apod.
cite: Tento element označuje citovaný zdroj, odkaz na další zdroje nebo citaci. Poměrně se vžil zvyk uzavírat do něj jména osob, organizací apod.
abbr: Označuje zkratku (abbreviation), jejíž plné znění by se alespoň při prvním výskytu v dokumentu mělo nacházet v jeho atributu title. Příklady zkratek jsou XHTML, URI, ČR, nebo třeba ÚV KSČ ;-)
acronym: Tento element se používá k uzavírání zkratkových slov. Ty se narozdíl od zkratek vyslovují většinou jako jedno slovo, ne po jednotlivých písmenech. Pravidla pro použití atributu title jsou zde stejná jako u elementu abbr. Příklady zkratkových slov jsou NATO, NASA nebo Čedok.

Všechny tyto elementy lze používat poměrně volně, tzn. že můžete jejich význam různě odvozovat; nic není dáno ve specifikaci úplně na pevno. Např. zde na Intervalu se používá element kbd k uzavírání klávesových zkratek programů a různých cest v menu, pokud se o nich autor v článku zmiňuje.

Co se týče zobrazení phrase elementů ve vizuálních prohlížečích – em, dfn, var a cite jsou obvykle vykresleny kurzívou; strong tučným písmem a code, samp a kbd písmem s pevnou šířkou znaků. Toto zobrazení můžete samozřejmě změnit pomocí stylů tak, aby odpovídalo celkovému pojetí vašeho serveru a informaci, kterou tyto elementy na vašem webu uzavírají. Elementy abbr a acronym nebývají formátovány nijak, proto je u nich použití stylů téměř nutností, aby uživatel vůbec mohl vidět, že se pod zkratkou skrývá její popis. V tomto případě se používá obvykle matné nesouvislé podtržení a kurzor myši indikující nápovědu.

Kromě vizuálních prohlížečů jsou ale tyto elementy použitelné i v jiných výstupech – např. textový prohlížeč, čtečka obrazovky… Jejich interpretace zde již většinou záleží na preferencích uživatele.

Elementy q a blockquote – citace

Povolený obsah: (q) %Inline;

Povolený obsah: (blockquote) %Block;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
cite %URI; #IMPLIED: Tento atribut udává adresu dokumentu, z kterého citace pochází.

Element q v XHTML 1.0 Strict DTD

Element blockquote v XHTML 1.0 Strict DTD

Tyto dva elementy slouží k uzavírání citací. Element q je řádkový a může obsahovat pouze text a řádkové elementy, proto se hodí pro kratší citace uvnitř textu. Naproti tomu element blockquote, jak už název napovídá, je blokový a může přímo obsahovat pouze blokové elementy, ne tedy hned text – ten musí být uzavřen v nějakém „kontejneru“, nejčastěji v odstavci.

Element q má ještě jednu zvláštnost. Kolem textu v něm uzavřeném by se ve vizuálním prohlížeči měly automaticky doplnit uvozovky podle jazyka, v kterém je dokument psán, neměli byste je tedy vkládat do textu. Tyto uvozovky by v případě potřeby měly být i zanořeny (pokud se citace nachází uvnitř jiné citace). Přesné zobrazení uvozovek můžete nastavit pomocí stylů. U elementu blockquote se automatické uvozovky nevyskytují.

q nemá obvykle žádné implicitní vizuální formátování, naopak obsah blockquote je většinou odsazen z obou stran. Toto zobrazení můžete samozřejmě přepsat ve stylech.

Proč používat sémantické elementy?

A proč je tak důležité zabývat se sémantickými a strukturálními elementy, jako jsou dnes probírané phrase elementy, nadpisy, tabulky (těmi se budeme zabývat později) apod.? Pokud s nimi svůj text pečlivě a bohatě vyznačujete, dostáváte do rukou poměrně velké možnosti:

Pomocí stylů můžete jednoduše definovat konzistentní zobrazení na všech stránkách vašeho webu. Můžete vizuálně odlišit různé úseky textu a pomoci tak uživateli v orientaci.
Vyhledávače mají rádi dobře značkovaný text, protože jim pomáhá vaší stránce porozumět a předkládat tak uživateli lepší výsledky, proto se vám také odvděčí vyšší pozicí ve výsledcích vyhledávání.
Správně strukturovaný text může být interpretován podle možností daného zařízení a preferencí uživatele. Hlavně u různých „alternativních“ zařízení může uživateli v mnohém ulehčit práci s vaší stránkou.
Strukturovaný text vám otevírá možnosti strojového zpracování. Můžete např. jednoduše zrealizovat vyhledávání určitých pojmů (které ve všech textech vyznačujete stejným způsobem) jako jsou jména osob (pokud je uzavíráte např. do cite), termíny z dané oblasti (uzavřené např. v elementu dfn) apod. Také můžete vaše texty snadno analyzovat, např. spočítat počet zmínek o nejrůznějších pojmech… To jde samozřejmě zrealizovat i bez zmiňovaného značkování, ovšem výsledky nikdy nebudou stoprocentní, protože stroj jednoduše neví, jak jste kdy které slovo mysleli.

Příklady

Na závěr několik příkladů na použití elementů, které jsme si dnes představili:

<dfn>Plynové trouby</dfn> se obvykle používají k pečení.
Do následujícího pole vložte <kbd>jméno</kbd>.
Nadpisy v XHTML jsou velmi důležité pro <strong>vyhledávače</strong>.
Webové stránky se posílají pomocí protokolu <abbr title=“HyperText Transfer Protocol“>HTTP</abbr>.
Odstavec se v XHTML vytváří pomocí elementu <code>p</code>.
<q>Jediné vítězství nad láskou je útěk</q>, řekl kdysi <cite>Napoleon Bonaparte</cite>.
<blockquote>
<p>Dobrý manžel má hodnotu dvou dobrých manželek, neboť věci mají tím větší hodnotu, čím jsou vzácnější.</p>
</blockquote>