Tässäkin opetusohjelman alussa haluaisin taas muistuttaa, ettette saa odottaa esitetyiltä elementeiltä mitään ihmeitä. Ulkomuodollisesti ne eivät nimittäin vielä tee paljoakaan vaikutusta. Ne ovat kuitenkin mielenkiintoisia sen kannalta, että voitte rakentaa asiakirjanne loogisesti ja semanttisesti.
Navigointialueet
nav-elementin avulla voit merkitä navigointipalkit tai muut alueet lisäelementeille semanttisesti. Tämän elementin tarkoituksena on siis pääasiassa merkitä linkkejä muihin sivuihin tai täydentäviä tietoja.
Esimerkki:
<nav> <a href="index.html">Kotisivu</a> <a href="html5.html">Opi HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">WordPress</a> </nav>
nav-elementin sisällä voit käyttää mitä tahansa elementtejä. Voit siis edelleen määritellä navigoinnin listojen avulla. Muita elementtejä voi kuitenkin myös käyttää ongelmitta nav-elementin sisällä. nav-elementti voi myös esiintyä samassa asiakirjassa useita kertoja.
Tarkemmat tiedot
Toinen mielenkiintoinen elementti on details. Sen avulla voi – ja nimen perusteella voi jo päätellä – antaa lisätietoja sisällöstä. Huomioi, että details-elementtä käytetään oikein vasta yhdessä summary-elementin kanssa. Lisää tästä elementistä sitten seuraavassa.
Aluksi esimerkki details-elementin käytöstä:
<article>
<details>
<summary>Viittaukset artikkeliin...</summary>
<ul>
<li><a href="viittaus1.html">Linkki 1</a></li>
<li><a href="viittaus2.html">Linkki 2</a></li>
<li><a href="viittaus3.html">Linkki 3</a></li>
</ul>
</details>
<details>
<summary>Lähteet artikkeliin ...</summary>
<ul>
<li><a href="laähde1.html">Linkki 4</a></li>
<li><a href="lähde2.html">Linkki 5</a></li>
<li><a href="lähde3.html">Linkki 6</a></li>
</ul>
</details>
</article>details-elementin sisältö pysyy piilossa vierailijalta, kunnes tämä napsauttaa summary-elementtiä, joka sisältyy details-elementtiin.
Tämä voisi olla mielenkiintoista esimerkiksi videon toiston yhteydessä. Tässäkin esimerkki:
<video id="elokuva" 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>Videosoittimen ohjaus näytä/piilota</summary>
<p>
<button id="aloitus" onClick="aloitus()">Aloita/Tauko</button>
<button id="mykistä" onClick="mykistä()">Mykistä</button>
<button id="kovaääni" onClick="kovaääni()">Kovaääni</button>
<button id="hiljaisempi" onClick="hiljaisempi()">Hiljaisempi</button>
</p>
</details>
Kun sivu latautuu, näkyy ensin vain soitinikkuna.
Mutta kun vierailija napsauttaa Näytä/Piilota-linkkiä, summary-elementin määrittelemät sisällöt näytetään.
Specifikaation mukaan selaimet näyttävät oletussisällön, jos summary-elementtiä ei löydy.
Mielenkiintoista on myös open-attribuutti details-elementille.
<details open> … </details>
Kun tämä attribuutti on asetettu, summary-elementin sisältö näkyy suoraan sivun latautuessa.
Yhteenveto
Nyt siis vielä hieman tarkempi katsaus summary-elementtiin.
<article>
<details>
<summary>Viittaukset artikkeliin...</summary>
<ul>
<li><a href="viittaus1.html">Linkki 1</a></li>
<li><a href="viittaus2.html">Linkki 2</a></li>
<li><a href="viittaus3.html">Linkki 3</a></li>
</ul>
</details>
<details>
<summary>Lähteet artikkeliin ...</summary>
<ul>
<li><a href="lähde1.html">Linkki 4</a></li>
<li><a href="lähde2.html">Linkki 5</a></li>
<li><a href="lähde3.html">Linkki 6</a></li>
</ul>
</details>
</article>
Sisällä summary määritellään siis yhdistettynä details avaamaton sisältö. Kiitos summary on mahdollista liittää lisätietoja, jotka näytetään tarvittaessa.
Myönnettäköön, että taitettavia ja avattavia alueita voisi toteuttaa myös aivan yksinkertaisesti JavaScriptillä. Mikäli kuitenkin JavaScript on poistettu käytöstä selaimessa, sovellus ei toimi. Siksi onkin toivottavaa, että details ja summary saavat pian laajaa tukea.
Reunat ja marginaalit
Lisätietoja, marginaaleja, ristiviittauksia jne. voidaan HTML5:ssä erottaa aside-elementillä. Tällä tavoin merkitty sisältö sijaitsee osana koko dokumenttia, mutta ei ole suoraan siihen liittyvä.
Huomaa, että HTML5-spesifikaatiossa ei ole määritelty, minkä kokoisia aside-merkityt alueet tulisi olla. Näin ollen aside sisältö voi näkyä esimerkiksi marginaalina tai sivupalkkina.
Seuraava esimerkki näyttää aside-alueen määrittelyn.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Web-sovellusten luominen (Osa 10): jQuery mobile (2)</h2>
<p>Tässä opetusohjeessa luodaan ensimmäinen todellinen jQM-sivu. Tämän edellytyksenä on HTML-pohja, jonka olet jo oppinut tuntemaan.</p>
<aside>
<h3>Lisää tietoa</h3>
<ul>
<li><a href="#/fn1">Lisätietoja löytyy täältä…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigointi</h2>
<ul>
<li><a href="#">Etusivu</a></li>
<li><a href="# ">Yhteystiedot</a></li>
</ul>
</nav>
</aside>
</body>Aikamerkinnät
Aikamerkinnät voidaan erityisesti erottaa uudella time-elementillä. Tämän elementin erityispiirteenä on, että sekä ihmiset että koneet voivat lukea aikamerkinnät.
Ihmisille aikamerkinnät kirjoitetaan time-elementtiin. Jotta selaimetkin voivat lukea aikatiedot, käytetään time-elementin datetime-attribuuttia.
<p>Tapaa meidät <time datetime="2014-04-15 19:00">15. huhtikuuta klo 19</time>. </p>
Tässä vaiheessa on vielä kerran huomautettava, että nykyisissä selaimissa tällä ei ole aluksi visuaalista vaikutusta, vaan sen tarkoituksena on tehdä aikamerkinnät koneen luettaviksi.
Tekstin korostaminen
Mark-elementillä on mahdollista korostaa sanoja tai kokonaisia tekstipasskeja visuaalisesti. HTML5 määrää nimenomaisesti, että elementtiä tulisi käyttää vain tekstisisältöjen yhteydessä. Lisäksi sen tulisi olla tietyn suhteessa kontekstiin.
Esimerkki:
<p>Tässä opetusohjeessa luodaan ensimmäinen jQM-sivu. Tämän edellytyksenä on <mark>HTML-pohja</mark>, jonka olet jo oppinut tuntemaan.</p>
Kuinka selaimet toteuttavat korostuksen, se ei ole määritelty.
Sekä Google Chrome että Firefox käyttävät kuitenkin molemmat keltaista taustaa.
Keskustelujen erottaminen
Myös HTML5:ssä on otettu huomioon eritellyt keskustelut. Tähän tarkoitukseen on olemassa dialog-elementti. Tällä hetkellä dialog-elementtiä tukevat kuitenkin ainoastaan Safari ja Google Canary, eli selaimen kehittäjäversio.
Tässäkin esimerkki:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Tämä on laatikon sisältö.</p>
<button id="hide">Sulje</button>
</dialog>
<button id="show">Näytä sisältö</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>
Kun painiketta klikataan, keskustelu tulee näkyviin. Jotta kaikki toimisi, edellisessä esimerkissä luotettiin HTML5:n, CSS:n ja JavaScriptin yhdistelmään.
