Frázové tagy - Český HTML 5 manuál

Frázové tagy jsou velmi důležité řádkové (in-line) elementy, které umožňují dodat části textu nějaký význam. Vyskytují se tedy v odstavcích <p>. Často jsou špatně chápány jako elementy měnící styl textu. V prvních verzích HTML tomu opravdu tak bylo, ale nyní mění význam textu a změna jeho vzhledu je pouze vedlejší efekt. Určitě vám došlo, že si těchto tagů budou všímat vyhledávače a budou důležité z hlediska SEO optimalizace webů. Všechny níže uvedené tagy jsou párové a jsou rozděleny do třech skupin:

Základní

Následující tagy se často vyskytují v běžném textu.

<abbr>

<abbr> (jako Abbreviation = zkratka) označuje zkratku v textu. Může se jednat jak o zkratku (MHD) tak o zkratkové slovo (Čedok). V atributu title obvykle píšeme celý význam zkratky. Ukažme si příklad:

<p>Včera jsem jel zas po roce v <abbr title="Městská hromadná doprava">MHD</abbr>,
to byla síla, ani jsem si nesedl.</p>

Výsledek:

Informaci předáváme nejen uživateli, ale i vyhledávačům.

<em>

<em> (jako emphasis = zdůraznění) označuje část textu, která má větší význam než okolní text. Text je v prohlížeči ve výchozím nastavení vykreslen jako kurzíva.

<p>O HTML 3 ani nemluvím, ve čtvrté verzi se již daly dělat slušné weby,
ale s nástupem <em>HTML 5</em> to jde samo!</p>

Výsledek:

<strong>

<strong> (=silný, jako silné zdůraznění) je významově podobný <em>, ale označuje ještě silnější zdůraznění. Právě částí textu ve strong si vyhledávače všímají nejvíce. Ve výchozím nastavení je vykreslen tučně.

<p>V dnešním dílu si uvaříme <strong>Houbové nudle</strong>, jedná se o
<strong>starý čínský recept</strong>, který se předával z generace na generaci...</p>

Výsledek:

<dfn>

<dfn> (jako definition = definice) se používá k označení části textu, kde definujeme nějaký pojem. Někdy můžeme elementu dodat i titulek. Definice se vykreslí kurzívou. Ukažme si příklad:

<p><dfn>Internet Explorer</dfn> je nejpopulárnější stahovač internetových prohlížečů.</p>

Výsledek:

Počítačové (programátorské) tagy

Následující tagy byly vytvořeny za účelem zobrazení zdrojových kódu a dokumentování aplikací, např. jejich vstupů a výstupů.

<code>

<code> označuje úryvek zdrojového kódu. Ve výchozím nastavení je vykreslen neproporcionálním písmem (monospace). Pozor: obsah code se stále chová jako HTML, čili pohlcuje mezery, tabulátory a i HTML závorky, případně HTML tagy. Často se proto <code> vkládá do <pre></pre>, které zachovává bílé znaky a text se ještě převede na entity.

< pre>
<code>
&lt;!doctype html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Titulek&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        Tělo
    &lt;/body&gt;
&lt;/html&gt;
</code>
< /pre>

Výsledek:

<samp>

<samp> (jako sample output = ukázkový výstup) slouží k označení textu, který vypíše aplikace, tedy jejího výstupu. Při výchozím nastavení je vykreslen neproporcionálním písmem. Např.:

<p>Při instalaci programu se objeví chybová hláška: <samp>Nenalezen soubor sys.dll.
Chcete přesto pokračovat?</samp>. Tuto chybu ignorujte, program bude přesto
fungovat.</p>

Výsledek:

<kbd>

<kbd> (jako keyboard = klávesnice) označuje text, který má být uživatelem vložen z klávesnice. Opět slouží k dokumentaci aplikací. Při výchozím nastavení je vykreslen neproporcionálním písmem.

<p>Vložte <kbd>www.itnetwork.cz</kbd> do adresního řádku prohlížeče.</p>

Výsledek:

<var>

<var> (jako variable = proměnná) slouží k označení proměnné v textu. Při výchozím nastavení je obsah vykreslen kurzívou. Například:

<p>Nyní máme v proměnné <var>playerX</var> uloženou vzdálenost hráče od pravého
okraje obrazovky.</p>

Výsledek:

Prezentační

Následující tagy byly zavedeny ve starší verzi HTML pro stylování textu. Následně byly nahrazeny tagy výše zmíněnými. V HTML 5 byl ovšem jejich význam redefinován a nyní se netýkají pouze změny stylu, ale i změny významu. Nicméně se je nedoporučuje používat, protože je jejich význam matoucí a ústí k špatnému myšlení ve smyslu stylování pomocí tagů namísto CSS. Navíc je matoucí jejich pojmenování podle toho, jak vypadají.

<b>

<b> (jako bold = tučný) označuje text, který se stylisticky odlišuje od ostatního textu, ale zároveň není důležitý, abychom ho zvýraznily tagy <em> nebo <strong>.

<p>Následující část textu se sice zobrazí <b>tučně</b>, ale nemá žádný vyšší význam.</p>

Výsledek:

<i>

<i> (jako italic = italika) se vykresluje italikou (kurzívou). Označuje text, který je řečený jiným přízvukem nebo v jiné náladě. Také se občas používá pro termíny nebo idiomy.

<p>Mezi noční sovy patří také ohrožený <i>Bubo bubo</i> (Výr velký).</p>

Výsledek:

<u>

Text v <u> (jako underline = podtržený) se vykresluje podtržený. Příliš se nepoužívá, protože si uživatelé internetu zvykli podtržený text chápat jako odkaz. Tag se významově používá pro jakési těžko definovatelé naznačení netextového významu. Příkladem je např. podtržení překlepu nebo podtržení čínských jmen, kde je to zvykem jako u nás psát je s velkým písmenem.

<p>Často vídávám psát <u>připoměl</u>, i když to není gramaticky správně.</p>

Výsledek:

<s>

<s> (jako strike = přeškrtnutý) označuje text, který již není aktuální nebo korektní (např. minulá cena zboží nebo zdůraznění nesprávného tvrzení/postupu). Plést se může s tagem <del>, který označuje odstraněný text.

<p>Vítejte v České republice. Za hodinu internetu nyní na cestách zaplatíte
<s>10 Kč</s> 200 Kč.</p>

Výsledek:

<mark>

<mark> (= označit/zvýraznit) jako jediný z prezentačních tagů pochází nové specifikace HTML 5. Umožňuje zvýraznit část textu. Používá se buď při zvýraznění textu pro aktuální potřebu uživatele (např. při vyhledávání) nebo při zvýraznění části citace, která je nyní klíčová. Při standardním nastavení je vykreslen se žlutým pozadím.

<p>Během roku se návštěvnost sociální sítě itnetwork.cz <mark>zvýšila o 300%</mark>.</p>

Výsledek: