Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

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 H2O, indexaci proměnných jako X1 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:

Dolní a horní index
index.html

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

Zalomení textu
index.html

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

Ruby anotace
index.html

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:

Zkratka
index.html

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

<em>

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

Zdůraznění
index.html

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

Silné zdůraznění
index.html

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

Definice
index.html

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:

Zobrazení kódu
index.html

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

Ukázkový výstup
index.html

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

Klávesnice
index.html

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

Proměnná
index.html

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

Tučný
index.html

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

Italika
index.html

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

Podtržený
index.html

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

Přeškrtnutý
index.html

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

Zvýrazněný
index.html

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ší.


 

Předchozí článek
Textové tagy v HTML
Všechny články v sekci
HTML5
Článek pro vás napsal Tomáš Muzikant
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje vývoji automatizačních linek do výrobního průmyslu. Ve volném čase se věnuje JavaScriptu a vývoji webových stránek.
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!