Arī šeit, sākot šo pamācību, vēlos uzsvērt, ka no iepriekš minētajiem elementiem nevajadzētu sagaidīt brīnumus. Vizuāli tie patiešām vēl daudz nedarbojas. Tomēr tie ir interesanti no aspekta, ka ar tiem varat loģiski un semantiski strukturēt savus dokumentus.
Navigācijas jomas
Ar nav-elementu varat semantiski iezīmēt navigācijas joslas vai citas papildu elementu jomas. Šis elements tiek domāts galvenokārt, lai atzīmētu hiper saites uz citām lapām vai uz papildu informāciju.
Piemērs:
<nav> <a href="index.html">Mājas lapa</a> <a href="html5.html">Mācīties HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Iekšpus nav jūs varat izmantot jebkurus elementus. Tādējādi jūs varat joprojām definēt navigāciju, izmantojot sarakstus. Tomēr citi elementi ielikumā nav var tikt izmantoti bez problēmām. nav var būt arī vairākkārtu vienā dokumentā.
Norādes sniegšana
Vēl viens interesants elements ir details. Ar to - un šis elements nosaukums jau liecina - varat sniegt papildu informāciju par saturu. Pievērsiet uzmanību tam, ka details-elements tiek patiešām interesants tikai, ja to izmanto kopā ar summary-elementu. Par šo elementu vairāk sekojoši.
Sākumā piemērs, kā izmantot details:
<article>
<details>
<summary>Saite uz rakstu…</summary>
<ul>
<li><a href="saite1.html">Saite 1</a></li>
<li><a href="saite2.html">Saite 2</a></li>
<li><a href="saite3.html">Saite 3</a></li>
</ul>
</details>
<details>
<summary>Avotu informācija par rakstu…</summary>
<ul>
<li><a href="avots1.html">Saite 4</a></li>
<li><a href="avots2.html">Saite 5</a></li>
<li><a href="avots3.html">Saite 6</a></li>
</ul>
</details>
</article>Details-elementa saturs tiek paslēpts apmeklētājam līdz brīdim, kad viņš noklikšķina uz summary-elementa iekšā, kas atrodas details.
Šis varētu būt interesanti, piemēram, saistībā ar video atskaņotāju. Arī šeit ir piemērs:
<video id="video" platums="320" augstums="180" autoplay>
<source src="video.mp4" tips = "video/mp4">
<source src="video.webm" tips = "video/webm">
<source src="video.ogv" tips = "video/ogg">
</video>
<details open>
<summary>Video atskaņotāja kontrole iel./izsl.</summary>
<p>
<poga id="starta" onClick="sākt()">Sākt/Pauze</ poga>
<button id="mute" onClick="mute()">Izslēgt skaņu</button>
<button id="loud" onClick="loud()">Skaļāk</button>
<button id="mazāki" onClick="mazāki()">Klusāk</button>
</p>
</details>
Kad lapa tiek atvērta, sākumā redzama tikai atskaņotāja logs.
Ja apmeklētājs noklikšķina uz Iel./Izsl. saites, tad summary definētie saturs tiks parādīts.
Pēc specifikācijas, pārlūki, ja nav atrasts summary-elements, parādīs noklusēto saturu.
Ir interesants arī open-atribūts details.
<details open> … </details>
Kad šis atribūts ir iestatīts, summary-elements tiks parādīts tieši, kad lapa tiek ielādēta.
Kopsavilkumi
Tagad vēlreiz nedaudz detalizēti aplūkosim summary-elementu.
<article>
<details>
<summary>Saite uz rakstu…</summary>
<ul>
<li><a href="saite1.html">Saite 1</a></li>
<li><a href="saite2.html">Saite 2</a></li>
<li><a href="saite3.html">Saite 3</a></li>
</ul>
</details>
<details>
<summary>Avotu informācija par rakstu…</summary>
<ul>
<li><a href="avots1.html">Saite 4</a></li>
<li><a href="avots2.html">Saite 5</a></li>
<li><a href="avots3.html">Saite 6</a></li>
</ul>
</details>
</article>
Iekšā summary tātad tiek definēts vēl neaizvērtā saturs, kas saistīts ar details. Pateicoties summary, varat iekļaut papildu informāciju, kas tiks parādīta tikai pēc nepieciešamības.
Protams, klapojamos un nolaižamos apgabalus varētu vienkārši izveidot, izmantojot JavaScript. Taču, ja pārlūkprogrammā ir atspējots JavaScript, lietojumprogramma nedarbosies. Tāpēc plaša details un summary atbalsts būtu vēlams.
Malu un apakšpiezīmju apgabali
Papildu informāciju, apakšpiezīmes, krustnorādes u.c. HTML5 var atzīmēt ar aside elementu. Ar šo izteiktu saturu atrodas kopā ar pilnīgo dokumentu, bet nav tieši saistīts ar to.
Lūdzu, ņemiet vērā, ka HTML5 specifikācijā nav noteikts, kādai dimensijai būtu jābūt apgabalam, kurš ir atzīmēts ar aside. Tāpēc šis saturs var tikt attēlots kā apakšpiezīme, bet arī kā sānjosla, piemēram.
Šī piemērā ir attēlota aside apgabala definīcija.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Tīmekļa lietotnes izveide (10. daļa): jQuery mobilie (2)</h2>
<p>Šajā pamācībā tiks izveidota pirmā īstā jQM lapa. Šim nolūkam jums jau ir jāzina HTML pamatstruktūra.</p>
<aside>
<h3>Papildinformācija</h3>
<ul>
<li><a href="#/fn1">Papildinformāciju var atrast...</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigācija</h2>
<ul>
<li><a href="#">Sākumlapa</a></li>
<li><a href="# ">Kontakti</a></li>
</ul>
</nav>
</aside>
</body>Laika norāžu pievienošana
Laika norādes var būt īpaši atzīmētas ar jauno time elementu. Šī elementa izšķirīgā iezīme ir tāda, ka laika norādes ir lasāmas gan cilvēkiem, gan mašīnām.
Cilvēkiem laika norādes tiek ierakstītas laika elementā. Lai arī pārlūkiem būtu iespēja izlasīt laika informāciju, tiek izmantots time elementa datetime atribūts.
<p>Satiksmejamies <time datetime="2014-04-15 19:00">15. aprīlis plkst. 19:00</time>. </p>
Šajā vietā vēlreiz jāpiemin, ka pašreizējiem pārlūkiem tas vispirms nav vizuālas ietekmes, bet ekskluzīvi paredzēts tam, lai laika norādes būtu lasāmas mašīnai.
Teksta izcelšana
Ar mark elementu ir iespējams izcelt vārdus vai pilnus tekstus. HTML5 specifikācijā skaidri norādīts, ka elements jāizmanto tikai saistībā ar tekstveida saturu. Turklāt tam jābūt noteiktā attiecībā pret kontekstu.
Piemērs:
<p>Šajā pamācībā tiks izveidota pirmā īstā jQM lapa. Tās priekšnoteikums ir HTML pamatstruktūra, kuru jūs jau esat iepazinuši.</p>
Kā pārlūki īstenos izcelšanu, tas netiek noteikts.
Gūgls Hroms un Fēnikss abi izmanto dzelteno fonu.
Sarunu atzīmēšana
HTML5 arī domāja par dialogu atsevišķu atzīmēšanu. Šim nolūkam ir dialog elements. Šobrīd dialog elements tiek atbalstīts tikai ar Safari un Google Canary, t.i., pārlūka izstrādātāja versiju.
Arī šeit ir piemērs:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Šī ir izvēlnes saturs.</p>
<button id="hide">Aizvērt</button>
</dialog>
<button id="show">Rādīt saturu</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>
