Και εδώ ξανά στην αρχή του οδηγού να σημειωθεί ότι δεν πρέπει να περιμένετε θαύματα από τα προτεινόμενα στοιχεία σε οπτικό επίπεδο. Γενικά δεν δίνουν κάτι ιδιαίτερο στην εμφάνιση. Το ενδιαφέρον είναι ότι μπορείτε να δομείτε λογικά και σημασιολογικά τα έγγραφά σας με αυτά.
Περιοχές πλοήγησης
Μέσω του στοιχείου nav μπορείτε να σημασιολογικά επισημάνετε γραμμές πλοήγησης ή άλλες περιοχές για πρόσθετα στοιχεία. Αυτό το στοιχείο προορίζεται κυρίως για να επισημάνετε συνδέσμους προς άλλες σελίδες ή πρόσθετες πληροφορίες.
Ένα παράδειγμα:
<nav> <a href="index.html">Αρχική</a> <a href="html5.html">Μάθηση HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Μέσα στο nav μπορείτε να χρησιμοποιήσετε οποιαδήποτε στοιχεία. Μπορείτε να ορίσετε την πλοήγηση με λίστες. Άλλα στοιχεία μπορούν επίσης να χρησιμοποιηθούν εύκολα μέσα στο nav. Το nav μπορεί επίσης να εμφανιστεί πολλαπλές φορές εντός ενός εγγράφου.
Καθορισμός λεπτομερειών
Ένα άλλο ενδιαφέρον στοιχείο είναι το details. Μέσω αυτού μπορεί κανείς - όπως υποδηλώνει ήδη το όνομά του τοις άρτις - να καθορίσει επιπλέον πληροφορίες για ένα περιεχόμενο. Να έχετε υπόψη ότι το στοιχείο details γίνεται αληθώς ενδιαφέρον μόνο σε συνδυασμό με το στοιχείο summary. Περισσότερα γι' αυτό το στοιχείο θα ακολουθήσουν.
Πρώτα ένα παράδειγμα για τη χρήση του details:
<article>
<details>
<summary>Αναφορές στο άρθρο...</summary>
<ul>
<li><a href="αναφορές1.html">Σύνδεσμος 1</a></li>
<li><a href="αναφορές2.html">Σύνδεσμος 2</a></li>
<li><a href="αναφορές3.html">Σύνδεσμος 3</a></li>
</ul>
</details>
<details>
<summary>Πηγές για το άρθρο...</summary>
<ul>
<li><a href="πηγή1.html">Σύνδεσμος 4</a></li>
<li><a href="πηγή2.html">Σύνδεσμος 5</a></li>
<li><a href="πηγή3.html"">Σύνδεσμος 6</a></li>
</ul>
</details>
</article>
Το περιεχόμενο του στοιχείου details παραμένει κρυμμένο έως ότου ο επισκέπτης κάνει κλικ στο στοιχείο summary που περιέχεται σε αυτό.
Αυτό μπορεί να είναι ενδιαφέρον για παράδειγμα σε σχέση με έναν βίντεο-παίκτη. Ένα ακόμη παράδειγμα εδώ:
<video id="ταινία" 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>Εναλλαγή ελέγχου βίντεο / αφαίρεση / εμφάνιση</summary>
<p>
<button id="ξεκίνημα" onClick="ξεκίνα()">Έναρξη / παύση</button>
<button id="σίγαση" onClick="σίγαση()">Σίγαση</button>
<button id="δυνατότερος" onClick="δυνατότερος()">Δυνατότερος</button>
<button id="πιο αδύναμος" onClick="πιο_αδύναμος()">Πιο αδύναμος</button>
</p>
</details>
Όταν η σελίδα φορτώνεται, αρχικά εμφανίζεται μόνο το παράθυρο του παικτών.
Όμως όταν ένας επισκέπτης κάνει κλικ στο σύνδεσμο εναλλαγής εισόδου-εξόδου, τότε εμφανίζονται τα περιεχόμενα που ορίζονται μέσα στο summary.
Σύμφωνα με τις προδιαγραφές, εάν δεν υπάρχει στοιχείο summary, οι περιηγητές θα εμφανίσουν προεπιλεγμένο περιεχόμενο.
Επίσης ενδιαφέρον είναι το χαρακτηριστικό open για τα details.
<details open> … </details>
Όταν αυτό το χαρακτηριστικό ορίζεται, το περιεχόμενο του στοιχείου summary είναι ορατό απευθείας κατά τη φόρτωση της σελίδας.
Συνόψεις
Οπότε ας ρίξουμε άλλη μια ματιά στο στοιχείο summary.
<article>
<details>
<summary>Αναφορές στο άρθρο...</summary>
<ul>
<li><a href="αναφορές1.html">Σύνδεσμος 1</a></li>
<li><a href="αναφορές2.html">Σύνδεσμος 2</a></li>
<li><a href="αναφορές3.html">Σύνδεσμος 3</a></li>
</ul>
</details>
<details>
<summary>Πηγές για το άρθρο...</summary>
<ul>
<li><a href="πηγή1.html">Σύνδεσμος 4</a></li>
<li><a href="πηγή2.html">Σύνδεσμος 5</a></li>
<li><a href="πηγή3.html"">Σύνδεσμος 6</a></li>
</ul>
</details>
</article>
Στο εσωτερικό της summary ορίζεται η περιγραφή που δεν έχει ανοίξει ακόμα σε συνδυασμό με το details. Χάρη στο summary, μπορούν να ενσωματωθούν πρόσθετες πληροφορίες που θα εμφανιστούν μόνο όταν χρειαστεί.
Είναι αλήθεια ότι οι περιοχές που μπορούν να ανοίγονται και να κλείνουν ενδεχομένως να υλοποιηθούν αρκετά εύκολα με JavaScript. Ωστόσο, αν το JavaScript είναι απενεργοποιημένο στον περιηγητή, η εφαρμογή δεν θα λειτουργήσει. Ως εκ τούτου, είναι επιθυμητή η άμεση ευρεία υποστήριξη των details και summary.
Περιοχές περιθωρίων και μαργιναλιών
Πρόσθετες πληροφορίες, μαργιναλίες, αναφορές κ.λπ. μπορούν να επισημανθούν στο HTML5 με το στοιχείο aside. Ο περιεχόμενος που επισημαίνεται με αυτόν τον τρόπο βρίσκεται στο πλαίσιο του συνολικού εγγράφου, αλλά δεν του ανήκει απευθείας.
Σημειώστε ότι στην προδιαγραφή του HTML5 δεν καθορίζεται η διάσταση που θα πρέπει να ισχύει για μια περιοχή που έχει επισημανθεί μέσω του aside. Έτσι, το περιεχόμενο μπορεί να εμφανιστεί, για παράδειγμα, ως μαργινάλια, αλλά και ως πλαϊνή μπάρα.
Το ακόλουθο παράδειγμα δείχνει τον ορισμό μιας περιοχής aside.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Δημιουργία Ιστοσελίδων (Μέρος 10): jQuery mobile (2)</h2>
<p>Σε αυτό το εγχειρίδιο δημιουργείται η πρώτη πραγματική σελίδα jQM. Προϋπόθεση για αυτό είναι το βασικό πλαίσιο HTML που έχετε ήδη μάθει.</p>
<aside>
<h3>Περαιτέρω πληροφορίες</h3>
<ul>
<li><a href="#/fn1">Υπάρχουν περαιτέρω πληροφορίες…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Πλοήγηση</h2>
<ul>
<li><a href="#">Αρχική σελίδα</a></li>
<li><a href="# ">Επικοινωνία</a></li>
</ul>
</nav>
</aside>
</body>Προσθήκη χρονικών στοιχείων
Τα χρονικά στοιχεία μπορούν να χαρακτηριστούν ειδικά με το νέο στοιχείο time. Το ιδιαίτερο αυτού του στοιχείου είναι ότι τα χρονικά στοιχεία είναι αναγνώσιμα τόσο από ανθρώπους όσο και από μηχανές.
Για τους ανθρώπους, οι χρονικοί πίνακες γράφονται στο στοιχείο time. Για να δώσουμε στους περιηγητές τη δυνατότητα να διαβάσουν επίσης τις πληροφορίες χρόνου, χρησιμοποιείται το χαρακτηριστικό datetime του στοιχείου time.
<p>Θα συναντηθούμε στις <time datetime="2014-04-15 19:00">15η Απριλίου στις 19:00</time>. </p>
Σε αυτό το σημείο θα θέλαμε να επισημάνουμε ότι στους τρέχοντες περιηγητές δεν έχει εμφανιστεί καμία οπτική επίδραση, αλλά χρησιμοποιείται αποκλειστικά για να κάνει τα χρονικά στοιχεία αναγνώσιμα από μηχανές.
Επισήμανση κειμένων
Με το στοιχείο mark υπάρχει η δυνατότητα να τονίζονται οπτικά λέξεις ή ολόκληρα αποσπάσματα κειμένου. Στην προδιαγραφή του HTML5 τονίζεται ρητά ότι το στοιχείο πρέπει να χρησιμοποιείται μόνο σε συνδυασμό με κειμενικό περιεχόμενο. Επίσης, πρέπει να έχει μια συγκεκριμένη σχέση με το περιβάλλον.
Ένα παράδειγμα:
<p>Σε αυτό το εγχειρίδιο δημιουργείται η πρώτη πραγματική σελίδα jQM. Προϋπόθεση για αυτό είναι το <mark>βασικό πλαίσιο HTML</mark>, το οποίο έχετε ήδη μάθει.</p>
Πώς ακριβώς υλοποιούνται οι τονισμοί από τους περιηγητές δεν έχει καθοριστεί.
Ο Google Chrome και ο Firefox χρησιμοποιούν και οι δύο ένα κίτρινο φόντο.
Επισήμανση διαλόγων
Η επισήμανση διαλόγων στο HTML5 έχει επίσης ληφθεί υπόψη. Γι' αυτό υπάρχει το στοιχείο dialog. Προς το παρόν, το στοιχείο dialog υποστηρίζεται μόνο από το Safari και το Google Canary, δηλαδή την προεκδοχική έκδοση του περιηγητή.
Εδώ μια παράδειγμα:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Αυτό είναι το περιεχόμενο του πλαισίου.</p>
<button id="hide">Κλείσιμο</button>
</dialog>
<button id="show">Εμφάνιση περιεχομένου</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>
Μόλις κάνετε κλικ στο κουμπί, εμφανίζεται ο διάλογος. Για να λειτουργήσει, στο προηγούμενο παράδειγμα βασίζεται σε μια συνδυασμό των HTML5, CSS και JavaScript.
