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

HTML a CSS Manuál Textové tagy 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:

HTML tag abbr označující zkratku

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:

HTML tag em označující zdůraznění

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

HTML tag strong označující silné zdůrazně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. 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:

HTML tag dfn označující definici

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:

HTML tag code označující zdrojový kód

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

HTML tag samp označující výstup aplikace

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

Výsledek:

HTML tag kbd označující vstup uživatele z klávesnice

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

HTML tag var označující proměnnou

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:

HTML tag b označující tučné písmo

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

HTML tag i označující jiný přízvuk nebo náladu

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

HTML tag u označující pravopisnou chybu

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

HTML tag s označující neplatnou informaci

<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ě devbook.cz <mark>zvýšila o 300%</mark>.</p>

Výsledek:

HTML tag mark označující zvýraznění

 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Textové tagy - Český HTML 5 manuál

 

 

Komentáře
Zobrazit starší komentáře (17)

Avatar
Amomym
Člen
Avatar
Amomym:

chci se zeptat jak dát tagy tak jak je to tu na devbooku, že se dá

a tam se vloží code a je to orámované a barevné, jak toho docílit aby to bylo něco jak zde na devbooku?

 
Odpovědět 3.3.2013 0:26
Avatar
David
Redaktor
Avatar
David:

nevím jak to mají tady ale mělo by to jít přes div nastylovat ho. A do divu dáš text který si obarvíš jak chceš.

Odpovědět 3.3.2013 6:38
Nic néni nemožné!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Amomym
David Čápka:

To nemá s HTML nic společného, zpracovává to PHP na serveru.

Odpovědět 3.3.2013 7:19
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Amomym
Člen
Avatar
Avatar
matesax
Redaktor
Avatar
Odpovídá na Amomym
matesax:

Nač? Nechápu tyhle paskvily... Normálně

<code></code>

a je to... Totéž s b, nebo u,...

Editováno 3.3.2013 7:51
 
Odpovědět 3.3.2013 7:50
Avatar
Amomym
Člen
Avatar
Odpovídá na matesax
Amomym:

já vím, ale já jsem se ptal na to zvíraznění kódu viš

 
Odpovědět 3.3.2013 9:10
Avatar
matesax
Redaktor
Avatar
Odpovídá na Amomym
matesax:

Tak se vyjadřuj tak, aby ti všichni rozuměli... :) Chceš SyntaxHighlighter - znám třeba Generic Syntax Highlighter...

A orámování a tak - to snad nemyslíš vážně - CSS...

Editováno 3.3.2013 9:59
 
Odpovědět 3.3.2013 9:58
Avatar
Amomym
Člen
Avatar
Odpovídá na matesax
Amomym:

jo, díky za rady, zatím budu využívat to základní a pak přejdu na složitější

 
Odpovědět 3.3.2013 10:55
Avatar
Amomym
Člen
Avatar
Odpovídá na matesax
Amomym:

jo, díky za rady, zatím budu využívat to základní a pak přejdu na složitější

 
Odpovědět 3.3.2013 10:55
Avatar
Odpovídá na David Čápka
Michal Doubek (HAPPY DAY):

u tagu <abbr> má pro vyhledavač význam title? protože ten se používá při najetí myší.

Odpovědět 2.6.2014 14:46
Svoboda tvé pěsti končí na špičce mého nosu
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.

Zobrazeno 10 zpráv z 27. Zobrazit vše