De asemenea, la începutul tutorialului, vă reamintim că nu ar trebui să vă așteptați la minuni din elementele prezentate. Din punct de vedere vizual, acestea nu arată prea impresionant. Totuși, ele sunt interesante din punct de vedere al structurării logice și semantice a documentelor voastre.
Domenii de navigare
Prin intermediul elementului nav se pot marca semantic bare de navigare sau alte domenii destinate unor elemente suplimentare. Acest element este conceput mai ales pentru a marca legături către alte pagini sau către informații complementare.
Un exemplu:
<nav> <a href="index.html">Pagina de start</a> <a href="html5.html">Învățați HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">WordPress</a> </nav>
În interiorul elementului nav puteți folosi orice elemente. Deci puteți defini navigarea în continuare folosind liste. Alte elemente pot fi de asemenea utilizate fără probleme în interiorul elementului nav. De asemenea, nav poate apărea de mai multe ori într-un document.
Specificarea detaliilor
Alt element interesant este details. Prin acesta se pot furniza – cum lasă deja să se înțeleagă numele elementului – informații suplimentare despre un conținut. Rețineți că elementul details devine cu adevărat interesant doar în combinație cu elementul summary. Mai multe despre acest element vor urma mai jos.
Mai întâi un exemplu pentru utilizarea elementului details:
<article>
<details>
<summary>Referințe la articol...</summary>
<ul>
<li><a href="ref1.html">Link 1</a></li>
<li><a href="ref2.html">Link 2</a></li>
<li><a href="ref3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Surse pentru articol...</summary>
<ul>
<li><a href="source1.html">Link 4</a></li>
<li><a href="source2.html">Link 5</a></li>
<li><a href="source3.html"">Link 6</a></li>
</ul>
</details>
</article>
Conținutul elementului details este ascuns față de vizitatori până când aceștia dau click pe elementul summary inclus în details.
Ar putea fi interesant de exemplu în legătură cu un player video. Aici avem și un exemplu:
<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>Afișare/ascundere controale player video</summary>
<p>
<button id="start" onClick="start()">Start/Pauză</button>
<button id="mute" onClick="mute()">Fără sunet</button>
<button id="louder" onClick="louder()">Mai tare</button>
<button id="quieter" onClick="quieter()">Mai încet</button>
</p>
</details>
Când pagina este încărcată, inițial se vede doar fereastra playerului.
Dar dacă un vizitator dă clic pe link-ul de afișare/ascundere, conținutul definit în interiorul elementului summary va fi afișat.
Conform specificației, browserele ar trebui să afișeze un conținut implicit dacă nu se găsește niciun element summary.
De asemenea, interesant este și atributul open pentru elementele details.
<details open> … </details>
Dacă acest atribut este setat, conținutul elementului summary va fi vizibil direct la încărcarea paginii.
Sumar
Așadar, acum să aruncăm o privire mai detaliată asupra elementului summary.
<article>
<details>
<summary>Referințe la articol...</summary>
<ul>
<li><a href="ref1.html">Link 1</a></li>
<li><a href="ref2.html">Link 2</a></li>
<li><a href="ref3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Surse pentru articol...</summary>
<ul>
<li><a href="source1.html">Link 4</a></li>
<li><a href="source2.html">Link 5</a></li>
<li><a href="source3.html"">Link 6</a></li>
</ul>
</details>
</article>
În cadrul elementului summary se definește conținutul care nu este încă deschis, în legătură cu elementul details. Datorită elementului summary, se pot integra informații suplimentare care vor fi afișate doar la nevoie.
Desigur, zonele expansibile și colapsabile ar putea fi realizate și simplu cu JavaScript. Cu toate acestea, dacă JavaScript-ul este dezactivat în browser, aplicația nu va funcționa. De aceea, ar fi de dorit o susținere largă în viitor pentru elementele details și summary.
Zone marginale și informații suplimentare
Informații suplimentare, detalii marginale, referințe etc. pot fi marcate în HTML5 cu elementul aside. Conținutul marcat de acesta se află în contextul documentului global, dar nu îi este direct asociat.
Vă rugăm să rețineți că în specificația HTML5 nu este stabilită dimensiunea pe care o poate avea o zonă marcată cu elementul aside. Prin urmare, conținutul elementului aside ar putea fi afișat ca detalii marginale, dar și ca sidebar, de exemplu.
Exemplul următor prezintă definiția unei zone marcate cu elementul aside.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Crearea unui aplicații web (Partea 10): jQuery mobile (2)</h2>
<p>În acest tutorial va fi creată prima pagină reală jQM. Un lucru necesar pentru acest lucru este structura de bază HTML, pe care ați învățat-o deja.</p>
<aside>
<h3>Informații suplimentare</h3>
<ul>
<li><a href="#/fn1">Informații suplimentare găsiți aici…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigare</h2>
<ul>
<li><a href="#">Prima pagină</a></li>
<li><a href="# ">Contact</a></li>
</ul>
</nav>
</aside>
</body>Adăugarea indicarea timpului
Indicările de timp pot fi marcate special cu noul element time. Caracteristica acestui element constă în faptul că indicările de timp sunt citite atât de oameni, cât și de mașini.
Pentru oameni, indicările de timp sunt scrise în elementul time. Pentru a oferi browserelor șansa de a citi și ele informațiile temporale, se folosește atributul datetime al elementului time.
<p>Ne întâlnim pe <time datetime="2014-04-15 19:00">15 aprilie la ora 19</time>. </p>
La acest punct, vrem să subliniem faptul că, în browserele actuale, acest lucru nu are inițial nicio repercusiune vizuală, ci este destinat exclusiv pentru a face timpurile citibile de către mașini.
Sublinierea textelor
Prin intermediul elementului mark există posibilitatea de a evidenția vizual cuvinte sau pasaje întregi de text. Specificația HTML5 subliniază faptul că elementul ar trebui folosit doar în legătură cu conținuturi textuale. De asemenea, trebuie să aibă o anumită relație cu contextul.
Un exemplu:
<p>În acest tutorial va fi creată prima pagină reală jQM. Un lucru necesar pentru acest lucru este <mark>structura de bază HTML</mark>, pe care ați învățat-o deja.</p>
Cum browser-ele interpretează sublinierea nu este specificat.
Google Chrome și Firefox se bazează amândouă pe un fundal galben.
Marcati dialogurile
În HTML5 s-a gândit și la marcarea separată a dialogurilor. Pentru aceasta, există elementul dialog. În prezent, elementul dialog este susținut exclusiv de Safari și Google Canary, adică de versiunea pentru dezvoltatori a browser-ului.
De asemenea, un exemplu și pentru acest caz:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Acesta este conținutul casetei.</p>
<button id="hide">Închideți</button>
</dialog>
<button id="show">Afișați conținutul</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>
Odată ce butonul este apăsat, dialogul va fi vizibil. Pentru ca totul să funcționeze, în exemplul anterior s-a recurs la o combinație de HTML5, CSS și JavaScript.
