Psst. EU dotace 85 % pro OSVČ a firmy lze nyní čerpat i na e-learning. Více informací
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij halloweenské akce 80% výuky zdarma!
Python týden

Lekce 8 - Textové tagy v HTML

V minulé lekci, Pokročilé tabulky v HTML, jsme si ukázali tagy k tvorbě pokročilých HTML5 tabulek jako <thead>, <thfoot>, <tbody>, <caption>, <colgroup> a <col>.

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:

Odstavec
index.html

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:

Nadpis h1
index.html

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:

Nadpis h1 a img
index.html

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>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Výsledek:

Nadpis h1
index.html

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:

Nadpisy h3,h4,h5,h6
index.html

Tagy <h1><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:

Citace
index.html

<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:

Označení názvu díla
index.html

<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:

Nově vložený text
index.html

Č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:

Nově vložený text
index.html

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ší.


 

Předchozí článek
Pokročilé tabulky v HTML
Všechny články v sekci
HTML5
Článek pro vás napsal Tomáš Muzikant
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje vývoji automatizačních linek do výrobního průmyslu. Ve volném čase se věnuje JavaScriptu a vývoji webových stránek.
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!