HTML a CSS pro začátečníky (část 21): Sémantika pro web (4)

Zde znovu na začátku průvodce upřímněji upozorňuji, že byste neměli očekávat žádné zázraky od představených prvků. Vzhledově totiž zatím moc nestojí za to. Jsou však zajímavé s ohledem na to, že vám umožňují logicky a sémanticky strukturovat vaše dokumenty.

Navigační oblasti

Pomocí prvku nav můžete sémanticky označit navigační pruhy nebo jiné oblasti pro další prvky. Tento prvek je určen především k označení hypertextových odkazů na jiné stránky nebo na doplňující informace.

Příklad:

<nav>
   <a href="index.html">Domů</a>
   <a href="html5.html">Učte se HTML5</a>
   <a href="css.html">CSS</a>
   <a href="cms.html">Joomla!</a>
   <a href="wordpress.html">Wordpress</a>
</nav>

Uvnitř prvku nav můžete použít libovolné prvky. Navigaci tedy stále můžete definovat pomocí seznamů. Další prvky lze ale také snadno vložit dovnitř prvku nav. nav se může navíc v dokumentu vyskytovat i vícekrát.

Poskytování detailů

Dalším zajímavým prvkem je details. Pomocí tohoto prvku lze – jak už název naznačuje – poskytnout další informace o obsahu. Moldet si, že prvek details se stává opravdu zajímavým až ve spojení s prvkem summary. Více o tomto prvku pak následuje.

Nejprve příklad použití prvku details:

<article>
  <details>
    <summary>Odkazy k článku...</summary>
    <ul>
      <li><a href="odkaz1.html">Odkaz 1</a></li>
      <li><a href="odkaz2.html">Odkaz 2</a></li>
      <li><a href="odkaz3.html">Odkaz 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Zdroje k článku ...</summary>
    <ul>
      <li><a href="zdroj1.html">Odkaz 4</a></li>
      <li><a href="zdroj2.html">Odkaz 5</a></li>
      <li><a href="zdroj3.html"">Odkaz 6</a></li>
    </ul>
  </details>
</article>

Obsah prvku details je skrytý před návštěvníkem, dokud neprovede kliknutí na prvku summary, který je součástí details.

To by mohlo být například zajímavé v souvislosti s video přehrávačem. I zde je příklad:

<video id="film" width="320" height="180" autoplay>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>
<details open>
  <summary>Skrytí/zobrazení ovládání videopřehrávače</summary>
  <p>
    <button id="start" onClick="start()">Start/Pauza</button>
    <button id="stumm" onClick="stumm()">Ztlumit zvuk</button>
    <button id="lauter" onClick="lauter()">Hlasitější</button>
    <button id="leiser" onClick="leiser()">Tišší</button>
  </p>
</details>

Při otevření stránky uvidíte pouze okno přehrávače.

Pokud však návštěvník klepne na odkaz pro zobrazení a skrytí, budou zobrazeny obsahy definované uvnitř prvku summary.

Dle specifikace by prohlížeče měly zobrazit výchozí obsah, pokud nebude nalezen prvek summary.

Je také zajímavé 'open'-atribut pro prvky details.

<details open>
…
</details>

Pokud je toto nastaveno, bude obsah prvku summary viditelný při načtení stránky.

Shrnutí

Nyní tedy ještě trochu podrobnější pohled na prvek summary.

<article>
  <details>
    <summary>Odkazy k článku...</summary>
    <ul>
      <li><a href="odkaz1.html">Odkaz 1</a></li>
      <li><a href="odkaz2.html">Odkaz 2</a></li>
      <li><a href="odkaz3.html">Odkaz 3</a></li>
    </ul>
  </details>
  <details>
    <summary>Zdroje k článku ...</summary>
    <ul>
      <li><a href="zdroj1.html">Odkaz 4</a></li>
      <li><a href="zdroj2.html">Odkaz 5</a></li>
      <li><a href="zdroj3.html"">Odkaz 6</a></li>
    </ul>
  </details>
</article>

V rámci summary se definuje obsah, který ještě není otevřen, ve spojení s details. Díky summary je tak možné integrovat další informace, které se zobrazí pouze při potřebě.

Samozřejmě by bylo možné rozbalovat a skrývat oblasti také pomocí JavaScriptu. Pokud je však JavaScript v prohlížeči deaktivován, aplikace nebude fungovat. Proto je široká podpora pro details a summary žádoucí.

Okraje a poznámky

Dodatečné informace, poznámky, odkazy atd. lze v HTML5 označit pomocí prvku aside. Obsah označený tímto prvkem se nachází v kontextu s celým dokumentem, ale není s ním přímo spojen.

Upozorňujeme, že v HTML5 specifikaci není stanoveno, jaký rozměr by měl mít oblast označená pomocí prvku aside. Obsah označený pomocí aside by se tak mohl zobrazovat například jako poznámka, nebo jako boční panel.

Následující příklad ukazuje definici oblasti označené pomocí aside.

<body>
  <header>
   <h1>PSD-Tutorials.de</h1>
  </header>
 <article>
  <h2>Vytváření webových aplikací (část 10): jQuery mobile (2)</h2>
    <p>V tomto tutoriálu se vytvoří první skutečná jQM stránka. Pro tuto úlohu je zapotřebí základní struktura HTML, kterou již znáte.</p>
    <aside>
     <h3>Další informace</h3>
      <ul>
       <li><a href="#/fn1">Další informace najdete zde…</a></li>
      </ul>
     </aside>
    </article>
    <aside>
     <nav>
      <h2>Navigace</h2>
      <ul>
       <li><a href="#">Domů</a></li>
       <li><a href="# ">Kontakt</a></li>
     </ul>
     </nav>
   </aside>
  </body>

Přidání časových údajů

Časové údaje lze speciálně označit pomocí nového prvku time. Zvláštností tohoto prvku je, že časové údaje jsou čitelné pro lidi i pro stroje.

Pro lidi jsou časové údaje psány do prvku . Aby mohly prohlížeče také získat informace o čase, používá se atribut datetime prvku time.

<p>Sejdeme se v 
<time datetime="2014-04-15 19:00">15. dubna v 19:00 hodin</time>.
</p>

Zde bych rád ještě jednou upozornil, že v současných prohlížečích to zpočátku nemá žádný vizuální dopad, slouží pouze k usnadnění strojového čtení časových údajů.

Zvýraznění textu

Pomocí prvku mark je možné vizuálně zvýraznit slova nebo celé textové pasáže. V HTML5 specifikaci je explicitně uvedeno, že prvek by měl být používán pouze ve spojení s textovým obsahem a musí být v určitém vztahu k okolí.

Příklad:

<p>V tomto tutoriálu se vytvoří první skutečná jQM stránka. Pro tuto úlohu je zapotřebí <mark>základní struktura HTML</mark>, kterou již znáte.</p>

Způsob zvýraznění textu prohlížečem není pevně stanoven.





Pokud však Google Chrome a Firefox oba používají žluté pozadí.

Dialogy označit

V HTML5 je také uvažováno o zvláštním označení dialogů. K tomu slouží prvek dialog. V současné době je prvek dialog podporován pouze v prohlížečích Safari a Google Canary, tedy vývojové verzi prohlížeče.

I zde máme příklad:

<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Toto je obsah dialogového okna.</p>
<button id="hide">Zavřít</button>
</dialog>
<button id="show">Zobrazit obsah</button>
</div>
<script type="text/JavaScript">
(function() {  
    var dialog = document.getElementById('dialog');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('hide').onclick = function() {  
        dialog.close();  
    };  
})(); 
</script>