Tagů je spoustu. Pokud bych teď měl zpaměti všechny napsat, do kupy bych to nedal.
V následujícícm přehledu jsou uvedeny nejčastěji používané tagy, se kterými si často vystačíme.
Pokud Vám však následující přehled bude málo, můžete se podívat na mnohem rozsáhlejší přehled tagů i s jejich popisem, nebo se podívat na abecední seznam všech tagů.
Párové tagy
Například tag li není v HTML povinně párový (nemusí mít ukončovací značku). V XHTML (rozšířené verzi HTML) však je povinně párový. Ideální tedy bude, pokud ho budem psát vždy jako párový, pak si nemusíme lámat hlavu, zda to máme či nemáme dobře.
| Tag | Význam tagu |
|---|---|
| html | Vymezuje HTML dokument. |
| head | Vymezuje hlavičku dokumentu. |
| title | Název konkrétní stránky (HTML dokumentu), pro každou HTML stránku (HTML soubor) by měl být unikátní, zapisuje se do hlavičky. Zobrazí se v záhlaví prohlížeče – úplně nahoře. |
| body | Vymezuje obsah stránky. To co napíšeme mezi značky <body> </body> se zobrazí v prohlížeči. |
| Tag | Význam tagu |
|---|---|
| h1 | Nadpis první úrovně (obecně se do něj vkládá název či slogan stránky) |
| h2–h6 | Nadpisy dalších úrovní |
| p | Odstavec |
| ul | Odrážkový seznam (unordered list) |
| li | Položka seznamu |
Jak takový seznam vypadá:
<ul>
<li>První položka seznamu</li>
<li>Druhá položka seznamu</li>
<li>Třetí položka seznamu</li>
</ul>
Podívejme se nyní na výsledek (Úpravy vzhledu seznamu – zda bude či nebude mít odrážky, rozestup položek, … se pak provádí pomocí CSS.)
Opět připomínám, že zápis můžeme napsat následovně, a v prohlížeči se nám zobrazí stejně, ale ta přehlednost:
<ul><li>První položka seznamu</li><li>Druhá položka seznamu</li><li>Třetí položka seznamu</li></ul>
I když jsme položky napsali za sebe, v prohlížeči se opět zobrazí pod sebou. Pokud bychom je chtěli mít i v prohlížeči vedle sebe, musíme použít CSS.
| Tag | Význam tagu |
|---|---|
| ol | Číslovaný seznam (ordered list) |
<ol>
<li>První položka seznamu</li>
<li>Druhá položka seznamu</li>
<li>Třetí položka seznamu</li>
</ol>
A v prohlížeči…
Seznamy se pak často používají na tvorbu menu stránek.
| Tag | Význam tagu |
|---|---|
| address | Jak již název napovídá, tento tag obaluje adresu. |
<address>
Jméno Příjmení<br>
Ulice č.p.<br>
PSČ Město
</address>
A co je to zvláštní <br>? Dozvíme se o kousek níže.
| Tag | Význam tagu |
|---|---|
| dl | Definiční seznam |
| dt | Termín |
| dd | Definice termínu |
<dl>
<dt>Hemoglobin</dt>
<dd>Červené krevní barvivo</dd>
<dt>Osteologie</dt>
<dd>Nauka o kostech</dd>
<dt>Evaporace</dt>
<dd>Vypařování</dd>
</dl>
A jak tento seznam vykreslí prohlížeč… No, nic moc, ale pomocí CSS se dají udělat přímo kouzla.
| Tag | Význam tagu |
|---|---|
| b | Tučný text |
| i | Kurzíva |
| u | Podtržený text; neměli bychom však tento tag používat. Podtržení je vyhraněno pro odkazy, se kterými by se pak podtržený text pletl, a navíc je tento tag zastaralý. |
| strong | Zvýrazněný text (upozornění na důležitost), vykreslen tučně |
| em | Zvýrazněny text vykreslený kurzívou |
I když se b, strong a i, em vykreslují stejně, význam mají odlišný; b pouze ztučňuje text, nedává mu na rozdíl od strong důležitost.
Příklad: E-mail: [email protected]. I když je slovo E-mail tučně, rozhodně nemá vyšší důležitost než samotný e-mail, proto použijeme tag b. Rozdíl je snad již zřetelnější. Občas si někde můžete přečíst, že tagy b a i jsou nesémantické a měli byste použít strong a em; je to samozřejmě nesmysl.
| Tag | Význam tagu |
|---|---|
| pre | Předformátovaný text – text v tomto tagu se formátuje stejně jako ve zdrojovém kódu. (Font a další vlastnosti se dají nastavit opět v CSS) |
Nejlepší bude opět příklad:
<p>Nějak mě zrovna nenapadá,
jaký ukázkový text napsat.</p>
<pre>Nějak mě zrovna nenapadá,
jaký ukázkový text napsat.</pre>
A mrk v prohlížeči.
| Tag | Význam tagu |
|---|---|
| abbr | Vysvětlení zkratky (IE 6 tento tag nepobírá.) |
| acronym | Vysvětlení zkratkového slova |
Rozdíl mezi zkratkou a zkratkovým slovem je následující. Zkratka (např. HTML) se hláskuje, čte po jednotlivých písmenech. Zkratkové slovo se potom čte stejně, jak se píše, například NASA (National Aeronautics and Space Administration, Národní úřad pro letectví a kosmonautiku).
K vysvětlení zkratky či zkratkového slova se pak využívá atribut title (pozor, neplést s tagem title). Po najetí myší na dané slovo se pak objeví bublinka s vysvětlením. Zkratka nebo zkratkové slovo se často podtrhává (přerušovaně na rozdíl od odkazů) a po najetí se většinou objeví ikonka otazníčku (HTML). Vím, že se opakuji :-), ale opět nám pomáhá CSS.
Podíváme se na příklad:
<abbr title=“HyperText Markup Language“>HTML</abbr>
<acronym title=“National Aeronautics and Space Administration“>NASA</acronym>
Obzvláště pro zrakové postižené, kteří využívají při procházení www stránek hlasovou čtečku, je tag abbr důležitý, aby čtečka zkratku přečetla správně po písmenech. Jak již jsem naznačil, problém je s IE 6, ale zrakově postižení to většinou vědí, a tak používají jiný prohlížeč; nebo se to dá řešit pomocí skriptu (ale o tom možná později).
Nepárové tagy
| Tag | Význam tagu |
|---|---|
| br | Zalomení řádku |
| hr | Horizontální čára |
Tady to je snad jasné i bez příkladu.
| Tag | Význam tagu |
|---|---|
| sub | Dolní index |
| sup | Horní index |
Na příkladu to bude hned jasné:
H<sub>2</sub>CO<sub>3</sub> = H2CO3
10<sup>2</sup> = 102
Někdy je výhodnější použít entity pro horní index, aby se nezvětšovala výška řádku, ale potom je index hůře čitelný. Avšak i s velkým indexem lze výška řádku poupravit.
„Zastaralé“ tagy
Dále jsou uvedeny příklady tagů, které se dají využít ke změně vzhledu prvků v HTML dokumentu. Jelikož však dnešním trendem tvorby www je striktní oddělení obsahu a vzhledu (HTML dokument se stará pouze o obsah), měli bychom se těmto tagům vyvarovat.
Mezi takové tagy patří font, big, small.
Obzvláště bychom se pak měli vyvarovat tagům jako blink a marquee (blikající a jezdící text).
Aneb tagy dobré akorát tak na epileptický záchvat.
Entity
Možná jste už přemýšleli o tom, jak vypisuji ukázky kódu na tomto webu. Pokud do HTML souboru napíšeme například <p>Brum brum</p>, vykreslí se pouze Brum brum, tagy pro odstavec zobrazeny nebudou. Jak tedy na to? Využijeme tzv. entit. Začínají znakem & a končí ;. Co je mezi těmito znaky, závisí na dané entitě.
| Zápis entity | Co se zobrazí | Popis |
|---|---|---|
| | Nedělitelná mezera (non-breaking space); v místě nedělitelné mezery se text nezalomí na další řádek. | |
| – | – | Pomlčka; na klávesnici je spojovník a často je v textu za pomlčku zaměňován. Více o problematice interpunkčních znamének pojednává stránka o typografii. |
| — | — | Delší pomlčka |
| … | … | Výpustka; ty „tři tečky“ například na konci nedokončené věty. Avšak správně to nemají být tři tečky, ale právě ona výpustka. Vizuálně se od třech teček liší, jelikož mezi tečkami výpustky je tenká mezírka. |
| „ | „ | Levé dolní české uvozovky |
| “ | “ | Pravé horní české uvozovky; místo uvedených uvozovek (kulatých) se často nesprávně používají horní rovné uvozovky („“). Yuhů k tomu však na svém webu zaujímá názor, se kterým souhlasím: „Psát kulaté uvozovky při běžné práci pomocí altu nebo entitami je pakárna dobrá tak akorát na zblbnutí. Doporučuji raději používat rovné uvozovky, už proto, že si na ně čtenáři na internetu zvykli. Kulaté uvozovky používám jedině pokud: mám krátký text, na kterém mi enormně záleží, nebo mám dlouhý text, který se nebude nikdy měnit, takže se vyplatí prohnat to nějakým programem pro zaměňování (nejčastěji prostě jenom Edit > Replace).“ |
| < | < | Less-than sign; menší než; mimo jiné se dá využít právě i pro ukázku zápisu tagů |
| > | > | Greater-than sign |
| & | & | Ampersand; pro vypsání znaku &. Samozřejmě, že lze napsat i pomocí klávesy, avšak takto napsaný & není v souladu s normou; je totiž vyhrazen jako první znak každé entity. |
| → | → | Šipka vpravo |
| ↑ | ↑ | Šipka nahoru |
| × | × | Krát; velmi často se však místo tohoto znaku píše chybně písmeno x. |
| ∞ | ∞ | Nekonečno |
| α | α | Řecké písmeno alfa (malé) |
| β | β | Beta |
| γ | γ | Gama |
| δ | δ | Delta |
| ξ | ξ | Ksí si nemůžeme neukázat. |
| ω | ω | Omega |
| Ω | Ω | Omega (velká); pomocí entit lze řecká písmena psát velká i malá. Vidíte jak? |
| ² | ² | Mocnina (na druhou) |
| ³ | ³ | Mocnina (na třetí) |
| ∑ | ∑ | Suma, součet |
| √ | √ | Odmocnina |
| ∩ | ∩ | Průnik |
| ∂ | ∂ | Parciální derivace |
| ♠ | ♠ | Piky |
| ♥ | ♥ | Srdce |
| • | • | Puntík |
Tento přehled je pouze část z celkového počtu použitelných entit. Pokud máte zájem poznat více entit, pohledejte na Internetu.
Entity se dají zapisovat i pomocí číslic. Například i písmeno ř se dá napsat pomocí ř, ale jak sami uznáte, je to značně nepraktické.
Pokud chcete vidět, jak entity fungují v praxi, prohlédněte si třeba zdrojový kód této stránky.
Komentáře
Pokud chceme nějaký úsek svého HTML kódu okomentovat, použijeme následujícího zápisu.<!-- Text komentáře -->
Tento zápis se v prohlížeči nezobrazí. Je však čitelný v HTML kódu. Uvidí ho i uživatelé našeho webu, pokud si dají zdrojový kód dané stránky zobrazit.
Zakomentovat lze i část kódu, u které třeba zatím nechceme, aby „něco“ prováděl. Cokoli je tedy napsáno mezi <!– a –> se v prohlížeči nezobrazí.
Příklad:
<h1>Blu blu blu</h1> <!– Toto je název mých www stránek. –>
<!– <p>Odstavec, který bude na stránkách zobrazen až později, ale už ho chceme mít v kódu připraven.</p> –>
<!– Začátek seznamu –>
<ul>
<li>První položka seznamu</li>
<li>Druhá položka seznamu</li>
<li>Třetí položka seznamu</li>
</ul>
<!– Konec seznamu –>
Komentáře se často používají k označení jednotlivých částí kódu pro větší přehlednost a rychlejší orientaci.
