Lekce 9 - Textové tagy v HTML II. část

V minulé lekci, Textové tagy v HTML, jsme si ukázali textové tagy, mezi které patří <p>, <q>, <blockquote>, <h1>, <h2>, <h3>, <h4> a další.

V dnešní lekci si ukážeme textové tagy, mezi které patří třeba <wbr>, <br>, <ruby>,<rt>, <em>, <strong>, <samp>, <var> a další. Začneme horním a dolním indexem.

<sub> a <sup>

Tag <sub> označuje dolní index. Text v tomto elementu se zobrazí půl znaku pod řádkou. Použití se nabízí např. u chemických vzorců jako H₂O, indexaci proměnných jako X₁ a podobně. Pro horní index se v HTML používá tag <sup>. Lehce si to můžeme zapamatovat podle ptáka supa, který letí vysoko nad námi. Takže horní index <sup> jako sup:

<p>Chemický vzorec vody je H<sub>2</sub>O. Mocninu se základem X a exponentem 2 zapíšeme jako X<sup>2</sup></p>

Výsledek:

<wbr> a <br>

Nepárový tag <wbr /> (jako word break = zalomení slov) označuje místo v dlouhém slově, kde je vhodné ho zalomit. Tím předejdeme vytékáním dlouhých slov z malých rámečků nebo nechtěnému rozšíření stránky. K vynucení zalomení textu použijeme tag <br>:

<p>Nejdelší české slovo na světě bylo NEJNEVYKRYSTALI<wbr />ZOVÁVATELNĚJŠÍMI.</p>
<p>V tomto textu použiji zalomení,<br />
zbytek bude na dalším řádku.</p>

Výsledek:

Tag <wbr> si můžeme vyzkoušet zmenšením okna, kdy se slovo na obrazovku již nevejde a bude se muset zalomit.

<ruby>

Tag <ruby> definuje tzv. ruby anotace, které se používají v asijské typografii. Jedná se o malé glosy, které se píši nad složité symboly, aby pomáhaly při jejich výslovnosti.

Symboly vložíme do elementu <ruby>, vysvětlivky poté ještě do elementu <rt>.

<rt> a <rp>

Tag <rt> označuje danou informaci o výslovnosti. Tag <rp> není povinný a uvnitř elementu <ruby> označuje text, který se zobrazí v případě, že prohlížeč ruby anotace nepodporuje. Pokud nejsou podporovány, zobrazí se vše v jednom řádku. Závorky ve výsledku budou kolem ruby anotace v tagu <rt>:

<ruby>
    symbol <rt> ruby anotace </rt>
</ruby>
<br />
<ruby>
symbol <rt><rp>(</rp>ruby anotace<rp>)</rp></rt>
</ruby>

Ruby anotace bude vypadat následovně:

Frázové tagy

Dalším tématem jsou frázové tagy, které 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í,
• počítačové (programátorské) a
• prezentační.

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 jeho 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>

Zkusme přemístit kurzor myši na MHD, měla by se zobrazit zkratka:

Informaci takto 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.

<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>

Text je v prohlížeči ve výchozím nastavení vykreslen jako kurzíva:

<strong>

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

<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>

Ve výchozím nastavení, jak můžeme vidět, je vykreslen tučně:

<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:

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

Definice se vykreslí ve výchozím nastavení kurzívou:

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>

Tag <code> označuje úryvek zdrojového kódu. Ve výchozím nastavení je vykreslen neproporcionálním písmem (monospace).

Obsah v tagu <code> se stále chová jako HTML, čili pohlcuje mezery, tabulátory, HTML závorky a případně i HTML tagy.

Často se proto <code> vkládá do tagů <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>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>

Při výchozím nastavení je vykreslen neproporcionálním písmem:

<kbd>

Tag <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>Vložte <kbd>www.itnetwork.cz</kbd> do adresního řádku prohlížeče.</p>

Při výchozím nastavení je vykreslen také neproporcionálním písmem:

<var>

Tag <var> (jako variable = proměnná) slouží k označení proměnné v textu:

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

Při výchozím nastavení je obsah vykreslen kurzívou:

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>

Tag <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>

Označený text se tedy zobrazí tučně:

<i>

Tag <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 definovatelné naznačení netextového významu. Příkladem je např. podtržení překlepu nebo podtržení čínských jmen, kde je zvykem je psát s velkým písmenem jako u nás:

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

Výsledek:

<s>

Tag <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í či 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>

Tag <mark> (= označit/zvýraznit) jako jediný z prezentačních tagů pochází t 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>Během roku se návštěvnost sociální sítě itnetwork.cz <mark>zvýšila o 300%</mark>.</p>

Při standardním nastavení je vykreslen se žlutým pozadím:

Pro dnešek jsme se naučili mnoho tagů, tak to zde utneme a těším se na příště

V další lekci, Multimédia v HTML 5, si ukážeme tagy k tvorbě multimédií, mezi které patří <img>, <map>, <area>, <canvas> a další.