Přehled tagů

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.

TagVýznam tagu
htmlVymezuje HTML dokument.
headVymezuje hlavičku dokumentu.
titleNá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.
bodyVymezuje obsah stránky. To co napíšeme mezi značky <body> </body> se zobrazí v prohlížeči.
TagVýznam tagu
h1Nadpis první úrovně (obecně se do něj vkládá název či slogan stránky)
h2–h6Nadpisy dalších úrovní
pOdstavec
ulOdrážkový seznam (unordered list)
liPolož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.

TagVý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.

TagVýznam tagu
addressJak 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.

TagVýznam tagu
dlDefiniční seznam
dtTermín
ddDefinice 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.

TagVýznam tagu
bTučný text
iKurzíva
uPodtrž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ý.
strongZvýrazněný text (upozornění na důležitost), vykreslen tučně
emZvýrazněny text vykreslený kurzívou

I když se bstrong a iem 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.

TagVýznam tagu
prePř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.

TagVýznam tagu
abbrVysvětlení zkratky (IE 6 tento tag nepobírá.)
acronymVysvě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

TagVýznam tagu
brZalomení řádku
hrHorizontální čára

Tady to je snad jasné i bez příkladu.

TagVýznam tagu
subDolní index
supHorní 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ří fontbigsmall.

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 entityCo se zobrazíPopis
&nbsp; Nedělitelná mezera (non-breaking space); v místě nedělitelné mezery se text nezalomí na další řádek.
&ndash;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.
&mdash;Delší pomlčka
&hellip;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.
&bdquo;Levé dolní české uvozovky
&ldquo;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).“
&lt;<Less-than sign; menší než; mimo jiné se dá využít právě i pro ukázku zápisu tagů
&gt;>Greater-than sign
&amp;&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.
&rarr;Šipka vpravo
&uarr;Šipka nahoru
&times;×Krát; velmi často se však místo tohoto znaku píše chybně písmeno x.
&infin;Nekonečno
&alpha;αŘecké písmeno alfa (malé)
&beta;βBeta
&gamma;γGama
&delta;δDelta
&xi;ξKsí si nemůžeme neukázat.
&omega;ωOmega
&Omega;ΩOmega (velká); pomocí entit lze řecká písmena psát velká i malá. Vidíte jak?
&sup2;²Mocnina (na druhou)
&sup3;³Mocnina (na třetí)
&sum;Suma, součet
&radic;Odmocnina
&cap;Průnik
&part;Parciální derivace
&spades;Piky
&hearts;Srdce
&bull;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í &#345;, 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.