Lekce 4 - Rozložení stránky v HTML II. část

V minulé lekci, Rozložení stránky v HTML (layout), jsme si ukázali HTML 5 layout webové stránky, který bychom měli dodržovat.

Vítejte u dalšího dílu, kde si probereme další HTML 5 tagy a ukážeme si jejich použití.

<main>

V minulé lekci jsme rozebírali hlavní strukturu stránky. Jako další HTML element, který k layoutu patří je <main>. Vše v tomto tagu by mělo být unikátní. Jako příklad si uvedeme ITnetwork. ITnetwork má na webu sekce, které se opakují (hlavička, zápatí, navigace...), nic z toho by v tagu <main> nemělo být. Co by ale v něm být mělo je každý článek, ten je totiž na síti unikátní.

Tag by měl být na stránce pouze jeden a neměl by být potomkem tagů <article>, <aside>, <footer>, <header> a nebo <nav>, které známe z minulého dílu.

Tag <main> můžeme využít například takto:

<main>
  <article>
    <h1>Základy HTML 5</h1>
    <p>Jazyk HTML je základem pro tvorbu webů. Sám o sobě je velmi jednoduchý a všechny webové stránky ho využívají. Složitější weby HTML míchají s několika dalšími jazyky, některé z nich si v seriálu také ukážeme.</p>
  </article>
</main>

Kromě optimalizace pro případné indexování stránek nemá tag význam, bez stylu vypadá stránka takto:

<time>

Další si uvedeme tag <time>. Tento tag nic extra nedělá a nikdy jsem ho ani na stránce v kódu neviděl. Tento tag může však zajistit lepší indexaci naší stránky, protože stroj tento čas zpracuje bez námahy a chápe ho. Kromě lepší indexace to může využít nějaký upomínkovač, který bude vyhledávat tyto tagy.

Ukážeme si pár příkladu pro formátování tohoto tagu:

<p>25. narozeniny budu mít <time datetime="2022-07-10">10. července</time>.</p>

<p>Koncert od skupiny Queen bude ve <time datetime="20:00">20:00</time>. Budou hrát přes <time datetime="PT2H30M">2h 30m</time>.</p>

V prohlížeči nic extra neuvidíme, jak jsem zmínil již výše, jde pouze pro usnadnění pochopení času pro boty:

<summary> a <details>

Tyto tagy spolu navzájem souvisejí. Tag <summary> v HTML 5 označuje titulek sekce s detaily, kdy se po kliknutí na něj ukážou detaily. Používá se v tagu <details> a měl by být shrnutím skrytých detailů.

Tag <details> se v HTML 5 používá k označení zmíněných podrobnějších informací, které jsou skryty a uživatel je může zobrazit. Tag <details> může mít atribut open. Atribut je typu boolean a pokud je uveden, zobrazí se sekce <details> otevřená. Jako příklad si uvedeme krátký kód:

<img src="/images/713/html/assets/ntb.png" alt="Ultrabook ASUS ZENBOOK" style="width: 150px; float: left" />
<details open>
        <summary>Ultrabook ASUS ZENBOOK</summary>
        <p>
                Ultra mobilní notebook v hliníkovém kabátě v neuvěřitelně tenkém provedení.
                Osmijádrový procesor Intel Core i7-7700HQ (2.8GHz); 8GB operační paměti DDR4 (2666MHz);
                13.3" HD LED displej; grafika Intel HD Graphics; 64GB SSD + 500GB HDD; rozhraní:
                Bluetooth, Wi-Fi, kamera, USB 3.0; operační systém Windows Home Premium x64
        </p>
</details>

V prohlížeči se nám zobrazí již rozbalený detail:

Můžeme také nastylovat onu šipku. Jako příklad zde uvedu pouze znak + pro rozbalení a znak - pro zabalení. HTML je stejné až na atribut open u tagu <details>, CSS vypadá takto:

details[open] > summary:before {
    content: "- ";
}
details > summary:before {
    content: "+ ";
}
details > summary::-webkit-details-marker {
    display: none;
}

Prohlížeč zobrazí pouze titulek a po rozkliknutí se zobrazí další obsah elementu <details>:

<figure> a <figcaption>

Tag <figure> označuje ilustraci a jedná se o jeden z nejméně pochopených tagů. Vlastností ilustrace je, že se týká článku. Ilustrace může být obrázek, fotografie, diagram, graf apod. Nemusí to však být jen obrázek, ilustrovat obsah článku může i tabulka nebo zdrojový kód. Element je chápán jako samostatný a je z hlavního obsahu odkazován. Pokud ho přesuneme do jiného bloku, nenaruší se tok dokumentu.

Častou chybou je, že si lidé myslí, že tag <figure> je každý obrázek na webu. Element je ovšem určen k doplnění hlavního obsahu.

S <figure> je úzce svázán tag <figcaption>, který nastavuje popisek. Ukážeme si příklad použití těchto dvou elementů:

<p>
        Kos černý (Turdus merula) je pták žijící v celé Evropě a v jižní Asii, byl introdukován i do
        Austrálie a na Nový Zéland. Díky své přizpůsobivosti se adaptoval na život v blízkosti člověka a
        úspěšně žije a hnízdí i v těsném sousedství lidských sídel. Samci jsou nepřehlédnutelní svým
        charakteristickým černým peřím a žlutým zobákem, upozorňují na sebe také melodickým zpěvem.
</p>

<figure>
  <img src="/images/713/html/assets/kos-cerny.jpg" alt="Kos Černý"
  width="320" />
  <figcaption>Kos Černý na plotě</figcaption>
</figure>

Využijeme i trochu CSS:

figcaption {
   font-style: italic;
   color: darkgray;
}

Ve výsledku budeme mít tuto webovou stránku:

Snad byl alespoň tento tag užitečný, můžeme tak bez JavaScriptu mít rozbalovací podrobnosti. Využít to můžeme i v testech, kde do detailů dáme například celé řešení příkladu.

V následujícím kvízu, Kvíz - Rozložení stránky a layout v HTML5, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.