Lekce 8 - Textové tagy v HTML

V předchozím kvízu, Kvíz - Seznamy a tabulky v HTML5, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

Nyní si ukážeme textové tagy a jejich využití. Dovoluji si říct, že téměř na každém webu najdeme např. úvod, představení firmy, článek, určitou specifikaci produktu, popis a plno dalšího, kde můžeme textové tagy využít. Vyplňují náš prostor webu a dodávají mu specifický obsah. Seznámíme se s nejvíce rozšířeným textovým tagem, kterým je <p>.

<p>

Tag <p> (jako Paragraph = odstavec) označuje odstavec textu. HTML dokument má určitou strukturu a text v něm nemůže jen tak volně plavat, měl by být tedy zabalen třeba do odstavců. Prohlížeč mezi odstavce při základním stylu vykresluje volné místo (margin). Vyhneme se tedy nepřehlednému odřádkování a text se dále jednoduše styluje. Element nemá žádné další atributy:

<p>Mám vážné důvody domnívat se, že planeta, odkud přišel malý princ, je planetka B 612.</p>

<p>Jen jednou ji uviděl dalekohledem v roce 1909 nějaký turecký hvězdář. Podal tehdy o svém objevu obsáhlý výklad s ukázkami na mezinárodním astronomickém kongresu. Ale nikdo mu nevěřil, protože byl nezvykle oblečen. Dospělí jsou už takoví.</p>

<p>Naštěstí pro dobrou reputaci planetky B 612 přinutil jeden turecký diktátor svůj lid pod trestem smrti, aby se oblékal po evropsku. Hvězdář předvedl svůj výklad znovu v roce 1920 ve velmi elegantním fraku. A tentokrát mu všichni dali za pravdu.</p>

Výsledek v prohlížeči:

Nadpisy

Dalším velice známým textovým tagem je nadpis. V HTML máme k dispozici 6 typů nadpisů. Hovoříme o nadpisu od úrovně 1 až do úrovně 6. Nadpisy slouží pro lepší orientaci na webu jak pro čtenáře, tak pro vyhledávače. Jsou klíčové pro SEO a právě z nadpisů si boti pro vyhledávače berou mnoho informací. Zaměřme se na to, kdy jakou úroveň správně použít.

<h1>

Nadpis úrovně 1 má nejvyšší váhu a smí být v HTML dokumentu pouze jeden. Dnes, v době dynamických webů, se uchytilo vložení stejného elementu <h1> do všech stránek. Tento hlavní nadpis obsahuje název webu a případně nějaký slogan, např:

<h1>Rybočich - vše pro ryby a akvarijní živočichy</h1>

V prohlížeči to vypadá takto:

Jelikož často používáme pro takovýto název webu grafické logo, vžil se způsob obrázkového nadpisu <h1>, který je přívětivý i pro vyhledávače. Obrázky jsou řádkové elementy a nadpisy blokové, můžeme tedy snadno obrázek vložit přímo do tagu <h1>:

<h1><img src="polozubka.png" alt="Rybočich - vše pro ryby a akvarijní živočichy" title="Rybočich - vše pro ryby a akvarijní živočichy" /></h1>

Jako výsledek dostaneme:

Pro jistotu zadáme alternativní text i titulek, aby vyhledávače nadpis s obrázkem správně zaindexovaly. U některých webů lze vidět obrázkový nadpis řešený tak, že mají v <h1> text, který poté pomocí CSS skryjí nebo nastaví mimo obrazovku. Všechny takovéto nekalé techniky jsou však nebezpečné, protože se vyhledávači od Google nemusí líbit (a také nelíbí) a váš web je poté evidován jako podvodný. To samozřejmě sníží jeho pozici ve vyhledávači a tím i spojenou návštěvnost.

Pokud máte statické webové stránky (např. s <iframe>), bude v nadpisu <h1> spíše zaměření dané stránky, než název webu.

<h2>

Nadpis druhé úrovně se používá již jako nadpis dané podstránky/článku. Leží vždy pod nadpisem h1. Nadpisy ostatně vždy řadíme logicky za sebe. Nadpis h2 se teoreticky může vyskytovat na stránce vícekrát, ale není to obvyklé. V našem příkladu s webem pro akvaristy by nadpis h2 mohl vypadat takto:

<h2>Ryby</h2>
<p>Ryba je vodní živočich s osifikovanou páteří. Řadíme je do obratlovců...</p>

Výsledek:

Nadpis by tedy označoval podstránku, ve které jsou vypsány informace o rybách.

<h3,h4,h5,h6>

Další 4 nadpisy jsou již určeny pro lepší orientaci v textu. Pojďme si ukázat, jak se používají:

<h2>Ryby</h2>
<p>Ryba je vodní živočich s osifikovanou páteří. Řadíme je do obratlovců...</p>

<h3>Sladkovodní</h3>
<p>Sladkovodní ryby jsou výborná volba pro domácí akvária.</p>

<h4>Vrubozobcovité<h4>

<h5>Kančík tyrkysový</h5>
<p>Modrofialová rybička, která je vhodná do větších akvárií...</p>

<h4>Polozubkovité</h4>

<h5>Polozubka jatuarana</h5>
<p>Agresivní rybka, hledající potravu u dna...</p>

<h5>Polozubka stříbřitá</h5>
<p>Má nejmenší šupiny ze všch a ploché zoubky ve 2 řadách...</p>
<h6>Obrázky polozubek</h6>
<p><img src="polozubka.png" alt="Polozubka u dna" /></p>
<p><img src="polozubka.png" alt="Polozubka při krmení" /></p>


<h3>Slanovodní</h3>
<p>Pěstování slanovodních ryb je složitější, musíte totiž vodu osolit.</p>

<h4>Mečounovité</h4>
 . . .

V reálu by byly ryby rozděleny do několika podstránek a nepotřebovali bychom tedy tolik nadpisů. Výše uvedená ukázka je spíše teoretická a poslední 2 úrovně nadpisů se příliš nepoužívají.

Atributy

Nadpisy obsahovaly atribut align pro zarovnání, který však již není validní. Jako v blokovém elementu v nich nyní text zarovnáme v CSS pomocí:

/* více elementů zároveň: */
h3,h4,h5,h6,p {
  text-align: center;
}
/* nebo pouze jeden takto: */
p {
  text-align: center;
}

Výsledek předchozího příkladu s výše uvedeným CSS:

Tagy <h1> až <h6> tedy nemají žádné atributy.

<q>

Tag <q> označuje krátkou řádkovou citaci. Používá se pro citaci části díla z jiného zdroje (např. z jiného webu nebo z knihy). Jedná se o řádkový element.

Prohlížeče citovaný text při základním nastavení vykreslí v uvozovkách.

Pro delší blokové citace použijeme tag <blockquote>.

Atributy

Můžeme uvést atribut:

• cite - Označuje zdroj, ze kterého pochází citace.

Ukázka:

<p>Jak řekl Karel Čapek: <q>Představte si to ticho, kdyby lidé říkali jen to, co vědí.</q></p>

Výsledek:

<cite>

Tag <cite> se používá k označení názvu díla. Může se jednat o knihu, článek, hru, sochu, film apod. Tag bývá často špatně pochopen, nepoužívá se k označení jména autora:

<p>Včera jsem přečetl Ginsbergovo <cite>Kvílení</cite>.</p>

Výsledek:

<ins> a <del>

Tag <ins> označuje text, který byl do dokumentu vložen (tedy text, který přibyl po jeho editaci). Obvykle je tento text prohlížeči vykreslen jako podtržený. Velmi často se používá v kontextu s tagem <del>, který označuje opak, tedy jaký text byl po editaci odstraněn.

Atributy

Můžeme specifikovat následující atributy:

• cite - Obsahuje URL dokumentu, který objasňuje změnu textu.
• datetime - Obsahuje datum změny ve formátu YYYY-MM-DD hh:mm:ss, kde
  • YYYY = ROK, např. 2020
  • MM = MĚSÍC, např. 10 pro říjen, 01 pro leden
  • DD = DEN, např. 26
  • hh = hodina, např. 23
  • mm = minuta, např. 48
  • a ss = sekunda, např. 03

Sekundy uvádět nemusíme, můžeme zadat např. pouze hodinu 2020-10-01 23:00.

Ukázka použití:

<p>Můj současný stroj je notebook značky <del>Apple</del> <ins>ASUS</ins>.</p>

Živá ukázka:

Často se označuje smazaný text červeně a přidaný zeleně pomocí CSS:

del {
   background-color: #fbb;
}
ins {
   background-color: #d4fcbc;
}

Ve výsledku to vypadá mnohem lépe:

V další lekci, Textové tagy v HTML II. část, si ukážeme textové tagy, mezi které patří třeba <wbr>, <br>, <ruby>,<rt>, <em>, <strong>, <samp>, <var> a další.