Samuti märgitakse selle õpetuse alguses, et te ei tohiks oodata nendelt esitletud elementidelt imesid. Visuaalselt pole need tegelikult eriti atraktiivsed. Huvitavad on nad aga muidugi seetõttu, et saate oma dokumente loogiliselt ja semantiliselt struktureerida.
Navigeerimisalad
Kasutades nav-elementi saate navigeerimisribasid või muid alasid täiendavalt märgendada. Selle elemendi peaeesmärk on märgistada hüperlingid teistele lehtedele või täiendavatele teabeallikatele.
Näide:
<nav> <a href="index.html">Kodu</a> <a href="html5.html">HTML5 õppimine</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
nav-elemendi sees võite kasutada ükskõik milliseid elemente. Navigatsiooni saate endiselt defineerida loendite abil. Samuti saab teisi elemente hõlpsasti kasutada nav sees. nav võib dokumendis esineda ka mitu korda.
Detailid märkimine
Veel üks huvitav element on details. Selle abil saab – nagu elemendi nimest võib juba aimata – anda lisateavet sisu kohta. Pange tähele, et details-element saab tõeliselt huvitavaks alles koos summary-elemendiga. Rohkem selle elemendi kohta edaspidi.
Esmalt näide details kasutamisest:
<article>
<details>
<summary>Viited artiklile...</summary>
<ul>
<li><a href="viited1.html">Link 1</a></li>
<li><a href="viited2.html">Link 2</a></li>
<li><a href="viited3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Allikaviited artiklile ...</summary>
<ul>
<li><a href="allikas1.html">Link 4</a></li>
<li><a href="allikas2.html">Link 5</a></li>
<li><a href="allikas3.html"">Link 6</a></li>
</ul>
</details>
</article>details-elemendi sisu jääb külastajale varjatuks seni, kuni ta klõpsab details sees olevat summary-elementi.
Huvitav võiks see olla näiteks seoses videopleieriga. Ka siin näide:
<video id="video" 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>Videopleieri juhtnuppude näitamine/peitmise võimalus</summary>
<p>
<button id="start" onClick="start()">Algus/Paus</button>
<button id="vaikne" onClick="vaikne()">Vaigista</button>
<button id="valjem" onClick="valjem()">Valjem</button>
<button id="vaiksem" onClick="vaiksem()">Vaiksem</button>
</p>
</details>
Kui leht laaditakse, näete alguses ainult videopleieri akent.
Kui külastaja klõpsab aga sisse- ja väljalülitamise lingil, kuvatakse summary sees määratletud sisud.
Vastavalt spetsifikatsioonile kuvavad brauserid, kui summary-elementi ei leita, vaikeinfor
<details open> … </details>
Kui see atribuut on seatud, on summary-elemendi sisu lehe laadimisel kohe nähtav.
Kokkuvõtted
Nüüd siis veel üks veidi detailsem vaade summary-elemendile.
<article>
<details>
<summary>Viited artiklile...</summary>
<ul>
<li><a href="viited1.html">Link 1</a></li>
<li><a href="viited2.html">Link 2</a></li>
<li><a href="viited3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Allikaviited artiklile ...</summary>
<ul>
<li><a href="allikas1.html">Link 4</a></li>
<li><a href="allikas2.html">Link 5</a></li>
<li><a href="allikas3.html"">Link 6</a></li>
</ul>
</details>
</article>
Summary elemendis määratletakse seega sisu, mis pole veel avatud, koos details elemendiga. Tänu summary elemendile on võimalik lisada täiendavat teavet, mis kuvatakse vajaduse korral.
Admit, et kokkuvõtlikult võiks kokku panna ja kokku panna loomulikult ka lihtsalt JavaScripti abil. Kuid kui brauseris on JavaScript inaktiveeritud, siis rakendus ei tööta. Seega on details ja summary laialdane toetus soovitav.
Äärealad ja marginaalid
Lisateave, marginaalid, ristviited jne HTML5-s saab tähistada aside elemendiga. Selle elemendi abil tähistatud sisu on küll osa dokumendi kontekstist, kuid ei ole sellega otseselt seotud.
Palun pange tähele, et HTML5 spetsifikatsioonis pole määratletud, mis suund peaks aside elemendiga tähistatud alale kehtima. Seega võiks aside sisu näidelda näiteks marginaalina või külgribana.
Järgmine näide näitab aside ala määratlust.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Veebirakenduste loomine (Osa 10): jQuery mobil ( 2)</h2>
<p>Selles õpetuses luuakse esimene päris jQM leht. Selleks on vajalik HTML-i põhi, mille olete juba õppinud.</p>
<aside>
<h3>Jätkuvad</h3>
<ul>
<li><a href="#/fn1">Jätkuvat teavet on...</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigatsioon</h2>
<ul>
<li><a href="#">Avaleht</a></li>
<li><a href="# ">Kontakt</a></li>
</ul>
</nav>
</aside>
</body>Ajaandmete lisamine
Ajaandmeid saab uue time elemendiga eraldi tähistada. Selle elemendi eripära seisneb selles, et ajainformatsioonid on loetavad nii inimestele kui ka masinatele.
Inimestele kirjutatakse ajainformatsioonid time elemendisse. Ajainformatsioonide brauseritele lugemise võimaldamiseks kasutatakse time elemendi datetime atribuuti.
<p>Kohtume <time datetime="2014-04-15 19:00">15. aprillil kell 19.00</time>. </p>
Sellega ei kaasne praeguste brauseritega visuaalseid mõjusid, vaid see on mõeldud ainult masinatele loetavaks muutmiseks.
Teksti esile tõstmine
Kasutades mark elementi, saab sõnu või tekstilõike visuaalselt esile tõsta. HTML5 spetsifikatsioonis rõhutatakse, et seda elementi tuleks kasutada ainult teksti sisaldavate sisude puhul ja see peab olema teatud seose kontekstis.
Näide:
<p>Selles õpetuses luuakse esimene päris jQM leht. Selleks on vajalik <mark>HTML-i põhi</mark>, mille olete juba õppinud.</p>
Kuidas brauserid esiletoomist rakendavad, pole selgelt määratletud.
Nii Google Chrome kui ka Firefox kasutavad siiski mõlemad kollast taustavärvi.
Dialoogide esiletõstmine
HTML5-s on arvestatud ka dialoogide eraldi tähistamisega. Selleks on olemas dialog element. Praegu toetavad dialogi elementi aga ainult Safari ja Google Canary, seega brauseri arendusversioon.
Selleks on siin näide:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>See on kasti sisu.</p>
<button id="hide">Suletud</button>
</dialog>
<button id="show">Näita sisu</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>
Kui nupule vajutada, näete dialoogi. Selleks, et see toimiks, kasutab eelnev näide HTML5, CSS-i ja JavaScripti kombinatsiooni.
