HTML > Tagy

V PDF

V DOC

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.

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: neco@nazev.cz. 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
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.


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
&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.


Dále se mrkneme na

HTML a odkazy

V PDF

V DOC

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist