Lekce 16 - Ostatní tagy v HTML

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

Dnes si ukážeme tagy, které jsme si doposud nevysvětlili. Některé elementy se hojně využívají a setkáme se s nimi téměř na každém webu. Velmi využívaným elementem je <div>, který si ukážeme jako první:

<div>

Tag <div> nemá žádný sémantický význam. Používá se k seskupování logicky souvisejících blokových elementů. Ty poté můžeme pomocí tagu <div> jednoduše nastylovat pomocí CSS. Podobný význam má v HTML tag <span>, který se používá k seskupování elementů řádkových.

Tento element můžeme samozřejmě vkládat do sebe. Výchozí chování tagu <div> je, že se roztahuje na celou šířku prohlížeče. Vkládají se tedy pod sebe. Toto chování lze jednoduše změnit CSS vlastností float a nebo třeba vlastností flex.

Před HTML 5 se <div> používal pro rozložení (layout) stránky. S příchodem HTML 5 vzniklo několik odvozených elementů. Na mnoho dalších případů opět existují přímo určené tagy, proto bychom se měli před použitím tagu <div> rozmyslet, jestli neexistuje jiný vhodný element (např. <section>, <article>, <footer>...).

Ukázka

Pomocí <div> seskupíme několik elementů a orámujeme je:

<div style="border-radius: 5px; border: 1px solid #000; background-color: #CCCCCC; padding:10px;">
    <h3>Můj div</h3>
    <p>Toto je odstavec v mém divu.</p>
</div>

Zde vidíme jak se nám jednotlivé elementy orámovaly:

<span>

Tag <span> se používá k seskupování logicky souvisejících řádkových (inline) elementů a funguje tedy podobně jako element <div>. Ty poté můžeme pomocí tagu <span> jednoduše ostylovat.

Ukázka

Ukázka použití tagu <span> ke změně barvy textu:

<p>Má oblíbená barva je <span style="color: #008000;">zelená</span>.</p>

Můžeme vidět změnu barvy pouze části textu:

<a>

Tag <a> (jako anchor = kotva) se používá k definici hypertextového odkazu. Můžeme se tak přesouvat mezi jednotlivými stránkami našeho webu nebo odkázat na web jiný.

V prohlížeči se odkazy při výchozím nastavení zobrazí modré a podtržené. Již navštívené odkazy se zobrazí fialové. Aktivní odkaz (když na něj klikneme myší) se zobrazí červeně. To je samozřejmě možné změnit pomocí CSS na každé webové stránce.

Atributy

K elementu můžeme uvést tyto atributy:

• href - Specifikuje URL adresu odkazované stránky.
• hreflang - Specifikuje jazyk odkazovaného dokumentu.
• download - Po kliknutí na hypertextový odkaz se nám začne stahovat soubor s definovaným jménem.
• media - Specifikuje pro která zařízení je obsah odkazovaného dokumentu určen.
• rel - Specifikuje vztah mezi současným a odkazovaným dokumentem.
• referrerpolicy - Určuje, které informace o odkazu se mají odeslat společně s odkazem.
• ping - Po kliknutí na hypertextový odkaz nám atribut ping odešle krátký požadavek HTTP POST na námi definovanou adresu.
• target - Definuje cíl odkazu. Můžeme uvést hodnotu _blank pro otevření v novém okně, _parent pro otevření v nadřazeném okně, _top pro otevření v nejnadřazenějším okně. Výchozí je hodnota _self pro současné okno. Můžeme uvést jméno rámu, ve kterém se má odkaz otevřít.
• type - Specifikuje MIME typ odkazovaného dokumentu.

Ukázka

Uvedeme si několik názorných příkladů:

<p>
Příklad atributu href: <a href="https://www.itnetwork.cz">ITnetwork.cz</a><br>
Příklad atributu hreflang: <a href="https://www.itnetwork.sk" hreflang="sk">ITnetwork ve slovenštině</a><br>
Příklad atributu download: <a href="Cesta/Soubor.zip" download="specialni_soubor">Stáhni soubor</a><br>
Příklad atributu target: <a href="https://www.itnetwork.cz" target="_blank">Otevřu se v novém okně</a>
</p>

Příklad atributu download je zde pouze pro ukázku:

Pomocí odkazů je možné se pohybovat i v rámci jedné stránky. U odkazu vynecháme atribut href a dokonce i samotný text odkazu. Naopak uvedeme atribut id. Takovýto odkaz poté slouží jako kotva a můžeme se na něj odkazovat běžným odkazem pomocí znaku #.

Ukázka použití odkazu pro navigaci v rámci stránky:

<a id="nahoru"></a>
<h1>Ukázka použití kotvy</h1>
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<a href="#nahoru">Nahoru</a>

Po kliknutí na hypertextový odkaz Nahoru se dostaneme zpět na začátek:

Můžeme si to vyzkoušet rovnou i v této lekci. Všechny tyto tagy máme označené přes odkaz, můžeme se tedy přímo kliknutím dostat zpět na

Tag div

Tag span

Tag a

<template>

Tag <template> je využíván jako obsah, který je po načtení stránky skrytý před uživatelem. Obsah se zobrazí až po nějaké akci, kterou vyvolá uživatel. Typicky se pak jedná o skryté informace o produktu, které jsou irelevantní do té doby, dokud produkt zákazníka nezaujme. Zákazník si pak pomocí tlačítka, které je naprogramované pomocí JavaScriptu, zobrazí více informací.

Ukázka

Nelekněte se, kód JavaScriptu je tu pouze pro názornou ukázku:

<button onclick="ukazObsah()">Ukaž skrytý obsah</button>

<template>
  <h2>Implementace</h2>
  <p>Proces uskutečňování teoreticky stanovené myšlenky nebo projektu za účelem jejího dalšího použití.</p>
</template>

<script>
function ukazObsah() {
  let obsah = document.getElementsByTagName("template")[0];
  document.body.innerHTML = obsah.innerHTML;
}
</script>

Po kliknutí na tlačítko se nám zobrazí nadpis s popisem:

Zde zakončíme dnešní lekci.

V další lekci, Ostatní tagy v HTML II. část, si ukážeme tagy <dialog>, <address>, <bdi>, <bdo>, <hr>, <meter>, <progress> a komentář, které se řadí mezi ty ostatní.