Úprava textu

Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují za sebou řádek (narozdíl od blokových tagů).

Fyzické formátování

Fyzické formátování říká, jak má který text přesně vypadat (tedy jak má být formátován). Nezabývá se logickou rolí formátovaného textu (snad kromě sup a sub).

Tagy fyzického formátování textu
Tag Význam Párový Používat?
b tučné písmo ano ano
i kurzíva ano ano
u podtržení textu ano ne
sub dolní index ano ano
sup horní index ano ano
small zmenšení textu ano  
big zvětšení písma ano  
s přeškrtnutý text ano  ne
strike přeškrtnutý text ano  
tt teletype ano strojopis
font písmo ano ne
basefont základní font ne ne
blink blikání písma ano ne
nobr nezalamovat obsah ano nevím
wbr volitelné zalomení řádku ne klidně

Logické formátování

Vymezuje význam elementu. Přitom vůbec neříká, jak má vymezený text vypadat. Původně mělo mít logické vymezení mnohem větší význam, než jaký mu přisoudil dnešní web, kde se používá zejména formátování fyzického. Dnes se logických značek používá velmi zřídka, navíc často s fyzickým významem.

Tagy logického formátování textu
Tag Význam Párový Obvyklý vzhled
span úsek textu ano normální
strong zvýraznění (tučně) ano tučné
em zvýraznění (kurzíva) ano kurzíva
cite citace ano kurzíva
code výpis kódu ano strojopis
dfn nově použitý termín ano kurzíva
kbd vstup z klávesnice ano strojopis
samp ukázka ano strojopis
var formátování proměnné ano kurzíva
abbr ustálený výraz ano normální
acronym zkratka ano normální
del smazaný obsah ano přeškrtnuto
ins přidaný text ano podtrženo
q citace ano normální
mark vyznačení v citaci ano žluté pozadí
ruby anotace nad textem ano text nad textem

Fyzické formátování

b

Tučný text (z angl. "bold"). Používá se velmi často ke zvýraznění. Bývá zaměňován se <strong>, což je logické zvýraznění realizované tučným písmem.

i

Kurzíva (z angl. "italic"). Bývá zaměňován za <em>, což je logické zvýraznění realizované kurzívou.

u

Podtržení (z angl. "underline"). Doporučuji nepoužívat. Z následujících důvodů:

Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat.

sub

Dolní index (z angl. "subscript"). Pro další snížení a zmenšení je možno použít vícekrát za sebou.

Stejného efektu jako tagem <sub> se dá dosáhnout pomocí CSS stylu vertical-align: sub. Ale <sub> je dobrý tag na vyznačení sémantiky (smyslu) textu. Vždy, když děláte dolní index, např. H2SO4, používejte tag <sub>. Pokud chcete udělat jenom grafický efekt (a zvýrazňovaný prvek není dolním indexem), použijte styl vertical-align: sub. 

sup

Horní index (angl. "superscript").

Platí pro něj totéž, co pro <sub>, akorát že ekvivalentní styl je vertical-align: super, nikoli vertical-align: sup.

small

Zmenšení písma o jeden stupeň.

Možno použít vícekrát za sebou:

<small><small>maličký text</small></small>

Tag <small> je tak úžasně zastaralý, že se už ani neuvádí v přehledech zrušených a zapovězených tagů. Ale v prohlížeči funguje. Přesto použijte raději font-size.

big

Zvětšení písma o jeden stupeň.

Možno použít vícekrát za sebou.

Big je zastaralá metoda. Běžně se zvětšení písma dělá stylem font-size.

s

Přeškrtnuté písmo (z angl. striked). Vizte též <strike> a <del>, kterými lze tento tag nahradit. Text-decoration: line-through také umí přeškrtnout text. Z HTML 5 je tag <s> vypuštěný, podpora nadále nejistá.

strike

Přeškrtnuté písmo. Osobně doporučuji používat spíše <strike> než <s>, třebaže v HTML 4.0 doporučuje opak, totiž používat <s>. Úplně nejlepší je ale texty vůbec neškrtat nebo použít tag <del>.

Přeškrtnutí textu se dá udělat i pouze graficky pomocí CSS stylu text-decoration: line-through.

tt

Teletypový terminál. Že nevíte, co to je? Já také ne. (Nabízí se výraz "dálnopis", což ale problematiku spíše zatemňuje. Asi je to text konzoly vzdáleného připojení terminálu.) Zobrazováno strojopisem, tedy obvykle písmem Courier (ale ne vždy).

font

Nastavení barvy, velikosti a fontu písma.

Atributy tagu <font>
Atribut tagu <font> Význam Hodnoty Nahradit stylem
color barva písma barva color
size velikost, stupeň písma 1 až 7 | +1 | -1 (+-1 až 6)) font-size
face font, druh písma jména fontů oddělená čárkami font-family

Příklad: <font color="red" face="Arial, Helvetica">červené písmo Arialem</font>

U face lze sice zadávat více fontů (pokud není prohlížečem rozpoznán první název, jde k dalšímu), ale v praxi je nutno zůstat u základních fontů, které budou pravděpodobně nainstalované na klientském počítači.

Je doporučováno tag <font> nepoužívat (je zastaralý). Například specifikace HTML 5 ho označuje jako "deprecated". Přesto se o funkčnost tagu <font> v budoucích prohlížečích nebojím. Tag <font> lze nahradit nejlépe tagem <span> s atributem style s definicí CSS stylu nebo s předem definovanou třídou.

Příklad: <span style="color: red; font-family: Arial, Helvetica">červené písmo Arialem</span>

size

Velikost písma se v HTML nenastavuje v bodech jako všechny ostatní rozměry, ale ve stupních. Stupně jsou jakési imaginární jednotky vymyšlené pouze pro účel HTML. Stupňů písma je sedm. Od vysloveně mrňavého stupně jedna, které se skoro nedá číst, až po kravskou velikost 7. Běžné písmo je stupeň číslo 3.

Přesné velikosti písem nejsou nijak konkrétně stanoveny. Uživatel si může písmo zvětšovat a zmenšovat v prohlížeči. Dělá se to příkazem Zobrazit - Velikost písma (nebo tak něco -- v každém prohlížeči to může být jinak). Přesné velikosti písma lze dosáhnout pouze pomocí CSS.

Kromě přímého nastavení stupně písma se může použít relativní zápis +-, např. size="+1" znamená zvětšení písma o jeden stupeň.

V praxi doporučuji <font size="..."> vůbec nepoužívat a velikost písma definovat pomocí CSS stylu font-size.

Na tag <font> si dejte pozor. Nechová se zcela neutrálně (jako se chová <span>), takže když použijete <font> i třeba bez parametrů, je možné, že písmo přece ovlivní (zejména se to stává v Exploreru), většinou nějak záhadně.

basefont

Základní, přednastavený font pro celou stránku. Musí se deklarovat bezprostředně za tagem <body>. Nepárový tag. Má stejné atributy jako <font>, ale u velikosti nelze použít relativní stupeň.

Používání tohoto tagu se silně nedoporučuje, protože se jeho vlastnosti nevztahují na tabulky a občas ani na nadpisy. Podpora v moderních prohlížečích je vágní a nejistá. Z HTML 5 byl vypuštěn. Prostě je zastaralý.

Příklad: <body><basefont face="arial" color="navy">Tmavomodrý Arial bude na celé stránce. Snad.

Tag basefont se dá velmi snadno nahradit tím, že se příslušné vlastnosti písma nastaví pomocí CSS stylů pro tag <body>. Například:

<style>
body {font-family: arial; color: navy;}
</style>

blink

Blikající písmo (z angl. blink = mrkat). Velmi zastaralý a nikde nepodporovaný tag. Dříve nahraditelné CSS stylem text-decoration: blink, v roce 2015 už nefunkční.

Logické vyznačování

span

Logické vymezení části textu, která bude jinak formátována nebo na ni bude vázán skript. Je příbuzný s tagem <div> s tím rozdílem, že <span> je in-line, tzn. nezalamuje před a po sobě řádku.

U tagu span lze použít pouze obecné atributy. Ale mají zde velký význam, zejména atributy style, class a id.

Více informací o tagu span.

strong

Silné zvýraznění (z angl. strong = silný, mocný). Prohlížeče pro něj používají tučné písmo, proto bývá zaměňován s tagem <b>. Je ale dobré uvědomit si rozdíl:

Někomu to připadá jako totéž, já tam ale rozdíl vidím.

em

Zvýraznění (emphasis). Prohlížeče vykreslují kurzívou. Nejsprávnější tag pro zvýrazňování (a pro tento účel jen zřídka používaný).

Totéž co u <strong>: <i> je kurzíva, <em> je zvýraznění, které se náhodou vykresluje kurzívou.

Další tagy logického formátování nejsou prakticky vůbec používané.

cite

Citace, která na rozdíl od blokové citace <blockquote> nezalamuje řádek (je in-line). Takřka neužívaný tag zobrazovaný kurzívou. Některé vyhledávače prý neindexují vnitřek tohoto tagu, protože se domnívají, že jde o externí citaci.

code

Výpis kódu, například programu. Prohlížeče používají neproporcionální písmo (strojopis). Velmi zřídka používaný tag, já jej používám na výpis kódových příkazů.

dfn

Definice nového výrazu. Prohlížeče to zobrazují kurzívou nebo tučnou kurzívou. Prakticky nepoužívaný tag.

kbd

Vstup z klávesnice zobrazený strojopisem. Nepoužívaný tag.

samp

"Vzorek", což znamená výstup programu. Zobrazováno strojopisem. Občas to používám, když chci naznačit, že se jedná o nějaký výstup nebo prostě něco odlišného od normálního textu.

var

Proměnná. Zobrazováno kurzívou. Použití snad jen mezi programátory pro formátování zdrojáků.

abbr

Něco jako vysvětlení zkratky. Zajímavým atributem je obecný atribut title, který by jako hodnotu měl obsahovat význam té zkratky. Často se používá v blozích. Internet Explorer <abbr> nepodporuje (nerozezná tag). Nové v HTML 4.0.

Příklad: <abbr title="Cascading Style Sheets">CSS</abbr>

acronym

Totéž, co <abbr>, rozdíl je v tom, že písmena se nehláskují, ale čtou dohromady (např. NATO). V HTML 5 je tag acronym zrušen a má být nahrazen tagem <abbr>.

del

Odstraněný text. Prohlížeče jej zobrazují jako přeškrtnutý, staré prohlížeče jej zobrazí normálně. Novinka v HTML 4.0. Osobně raději odstraněný text mažu, ale jsou případy, kdy se vyplatí tag del používat -- zejména ve zpravodajství při vyznačení opravy chyby.

Tagy del a ins nejsou ani blokové, ani in-line. Mohou obsahovat další blokové tagy, aniž by zalamovaly řádek.

ins

Přidaný text. Zobrazováno podtržením. Atribut datetime vyjadřuje čas, kdy došlo k přidání. Datetime má formát rrrr-mm-ddThh:mm:ssTZD. Používá se zřídka, nejčastěji ve zpravodajství a na blozích -- ani v těch případech se stejně většinou neuvádí čas. Podtržení lze samozřejmě zrušit CSS zápisem text-decoration: none.

q

Citace (angl. quote = citovat) podle definice HTML 4.0, svou funkcí velmi podobná tagu <cite> a <blockquote>.. Liší se atributem cite, která obsahuje zdroj citace. Mozilla (Firefox), Webkig (Chrome) a Opera kolem obsahu tagu <q> dělají automaticky uvozovky. Internet Explorer (žádná verze snad kromě osmé) uvozovky nepřidává. Vzhled uvozovek lze ovlivnit CSS vlastností quote.

Příklad: <q cite="https://yuhu.cz">Bydlím ve Slaném, mám se dobře</q>

mark

HTML 5 vymyšlenost. Mark má za úkol vyznačit text, který v původním kontextu vyznačený nebyl. Hodí se tedy zejména dovnitř citací, ve kterých chci zdůraznit nějakou jejich část. Nebo by se mohl hodit vyhledávačům na ztučnění nalezených slov ve snippetech (samozřejmě po přestylování). Výchozí formátování vnitřku tagu <mark> je žluté pozadí a černé písmo (takže fakt přitahuje pozornost).

ruby, rt

Tagy <ruby>, <rt> a <rp> se používají v nelatinkových jazycích, možná jenom v japonštině, které se týká většina dostupných příkladů. V tagu <ruby> je uzavřen text, který má "ruby anotaci". Ruby anotace je obalena tagem <rt>. Anotace se zobrazuje malým písmem nad slovem, vystředěná.

<ruby>
spodní vysvětlované slovo
<rt>anotace nad slovem</rt>
</ruby>

Jeden čas jsem se zabýval tím, jak ruby anotace použít k logickému zobrazování akordů nad textem písničky, ale nehodilo se to na to.

Tag <rp> má obsahovat alternativu pro prohlížeče, které <ruby> nepodporují. Což myslím už dnes (2015) už žádné nejsou.

Tagy pro práci se zalamováním řádků

nobr

Zakázané zalomení řádku. Text se prostě nezalomí, i kdyby došel do konce místa, který řádek má. Používá se zejména v odkazových proužcích a sloupečcích, aby nebyly odkazy rozhozené přes dva řádky.

V moderním webdesignu se používání tagu <nobr> nedoporučuje a nahrazuje se CSS stylem white-space: nowrap. Upřímně je však nutno přiznat, že ten styl ne vždy funguje spolehlivě, takže tag <nobr> rozhodně nepatří do starého železa.

wbr

Volitelné zalomení řádku. Je užitečné v situacích, kdy je v textu příliš dlouhé slovo, které by mohlo rozpadnout design stránky. V takovém případě se doprostřed slova může vložit tag <wbr>. Potom:

Wbr je funkční ve všech prohlížečích. Býval to relikt z dob pravěkého HTML 1, ve verzích 3.2 a 4.01 byl zavrhnut, ale znovu se objevil ve specifikaci HTML 5. Mám z toho radost, protože je to užitečný tag.

Příklad: nejneobhospo<wbr>dařovávatelněj<wbr>šími

Další informace o WBR a volitelném zalamování řádků v jednom starším článku.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.