Από το 1999 μέχρι σήμερα, πολλές από τις ετικέτες του προτύπου HTML 4.01, δεν χρησιμοποιήθηκαν ποτέ ή δεν χρησιμοποιήθηκαν για τον σκοπό που αυτές είχαν δημιουργηθεί. Οι ετικέτες αυτές έχουν αφαιρεθεί τελείως ή ξαναγραφήκαν από την αρχή στην HTML5. Επίσης προστέθηκαν 28 νέες ετικέτες. Μπορείτε να δείτε όλες τις ετικέτες στην Λίστα Ετικετών.
Ακολουθούν όλες οι νέες ετικέτες που προστέθηκαν στην HTML5. Πατώντας στο link κάθε ετικέτας, μπορείτε να δείτε τα λεπτομερή στοιχεία των ετικετών (ορισμός και χρήση, παράδειγμα κώδικα, ιδιότητες και γεγονότα που μπορούν να έχουν)
Ακολουθούν όλες οι νέες ετικέτες που προστέθηκαν στην HTML5. Πατώντας στο link κάθε ετικέτας, μπορείτε να δείτε τα λεπτομερή στοιχεία των ετικετών (ορισμός και χρήση, παράδειγμα κώδικα, ιδιότητες και γεγονότα που μπορούν να έχουν)
Νέες ετικέτες χαρακτιρισμού κειμένου
<article> - ορίζει ένα εξωτερικό περιεχόμενο. Αυτό μπορεί να είναι ένα κείμενο από ένα blog ή από ένα φόρουμ, ή από μια άλλη ιστοσελίδα
<aside> - εμφανίζει το κείμενο ξεχωριστά του γειτονικού κειμένου. Το περιεχόμενο μέσα στην ετικέτα <aside> πρέπει να είναι σχετικό με το περιεχόμενο στο οποίο βρίσκεται. Το περιεχόμενο του μπορεί να τοποθετηθεί σαν πλάγια μπάρα μέσα σε ένα άρθρο σαν επεξηγηματικό κείμενο
<command> - ορίζει ένα κουμπί ελέγχου, όπως radio button, checkbox ή κουμπί (button). Το κουμπί ελέγχου πρέπει να είναι μέσα στην ετικέτα <menu>
<details> - Με την ετικέτα <details> ορίζουμε επιπλέον πληροφορίες για μια σελίδα ή για τμήματα μιας σελίδας, τις οποίες ο επισκέπτης μπορεί να τις εμφανίζει ή να τις αποκρύπτει. Η ετικέτα <summary> ορίζει επικεφαλίδα για το περιεχόμενο της ετικέτας <details>. Η επικεφαλίδα είναι πάντα ορατή, ενώ το κείμενο που βρίσκεται μέσα στην <details> εμφανίζεται μόνο όταν ο χρήστης πατήσει επάνω στην επικεφαλίδα
<summary> - ορίζει μια επικεφαλίδα για το περιεχόμενο της ετικέτας <details>. Η επικεφαλίδα είναι πάντα ορατή, ενώ το περιεχόμενο της ετικέτας <details> εμφανίζεται όταν ο χρήστης πατάει στην επικεφαλίδα. Η ετικέτα <summary> τοποθετείται ΠΑΝΤΑ ΠΡΩΤΗ μέσα στην <detils>
<figcaption> - ορίζουμε την επικεφαλίδα ενός στοιχείου <figure>. Η <figcaption> τοποθετείται μέσα στην ετικέτα <figure> και πρέπει να είναι η πρώτη ή η τελευταία ετικέτα
<figure> - η ετικέτα αυτή χρησιμοποιείται για να ομαδοποιεί στοιχεία. Το περιεχόμενο μέσα στην ετικέτα αυτή είναι ανεξάρτητο και περιέχει κυρίως περισσότερες πληροφορίες για ένα τμήμα της σελίδας. Με την ετικέτα <figcaption> ορίζουμε επικεφαλίδα για το περιεχόμενο της <figure>
<footer> - ορίζουμε το υποσέλιδο μιας σελίδα ή ενός τμήματος της σελίδας. Συνήθως στο υποσέλιδο γράφουμε την copyright πρόταση, το όνομα του συντάκτη ή τα στοιχεία επικοινωνίας
<header> - ορίζουμε την επικεφαλίδα μιας σελίδας ή ενός τμήματος. Το περιεχόμενο μιας επικεφαλίδας είναι συνήθως ένα κείμενο ή μενού πλοήγησης
<hgroup> - ομαδοποιεί ένα σύνολο από επικεφαλίδες για μια σελίδα ή ένα τμήμα. Συχνά βλέπουμε μια επικεφαλίδα και κάτω από αυτήν μια άλλη επικεφαλίδα με μικρότερα γράμματα για να δηλώσει ότι είναι υποσύνολο ή παιδί της πρώτης.
<mark> - ορίζει ένα τονισμένο (highlighted) κείμενο
<meter> - χρησιμοποιείται για να δείξουμε την κλίμακα μέτρησης ενός μεγέθους που αναφερόμαστε. Χρησιμοποιείται μόνο όταν γνωρίζουμε την μικρότερη και την μεγαλύτερη τιμή που μπορεί να πάρει το μέγεθος στο οποίο αναφερόμαστε
<nav> - ορίζει μια περιοχή που περιέχει μενού πλοήγησης (navigation menu). Συνήθως τοποθετούμε τα κουμπιά Προηγούμενο και Επόμενο μέσα στην ετικέτα αυτή
<progress> - μέσα στην ετικέτα αυτή γράφουμε το ποσοστο προόδου μιας διαδικασίας (όπως η ολοκλήρωση της φόρτωσης της σελίδας στον browser).
<ruby> - χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Συνεργάζεται με τις ετικέτες <rp> και <rt>
<rt> - χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Τοποθετείται μέσα στην ετικέτα <ruby> και συνεργάζεται με την ετικέτα <rp>
<rp> - χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Τοποθετείται μέσα στην ετικέτα <ruby> και συνεργάζεται με την ετικέτα <rt> η οποία περιέχει την επεξήγηση
<section> - ορίζει ένα τμήμα μέσα σε μια σελίδα, όπως επικεφαλίδες, υποσέλιδα, ενότητες ή οποιοδήποτε άλλο τμήμα μέσα σε μια σελίδα
<time> - με την ετικέτα αυτή χαρακτηρίζουμε ένα κείμενο σαν ώρα, ημερομηνία ή και τα δύο μαζί
<wbr> - η ετικέτα αυτή δείχνει στον browser σε ποια σημεία μπορεί να συνεχίσει στην επόμενη γραμμή, όταν η λέξη δεν χωράει στο σημείο που εμφανίζεται. Χρησιμοποιείται για μεγάλες λέξεις.
<aside> - εμφανίζει το κείμενο ξεχωριστά του γειτονικού κειμένου. Το περιεχόμενο μέσα στην ετικέτα <aside> πρέπει να είναι σχετικό με το περιεχόμενο στο οποίο βρίσκεται. Το περιεχόμενο του μπορεί να τοποθετηθεί σαν πλάγια μπάρα μέσα σε ένα άρθρο σαν επεξηγηματικό κείμενο
<command> - ορίζει ένα κουμπί ελέγχου, όπως radio button, checkbox ή κουμπί (button). Το κουμπί ελέγχου πρέπει να είναι μέσα στην ετικέτα <menu>
<details> - Με την ετικέτα <details> ορίζουμε επιπλέον πληροφορίες για μια σελίδα ή για τμήματα μιας σελίδας, τις οποίες ο επισκέπτης μπορεί να τις εμφανίζει ή να τις αποκρύπτει. Η ετικέτα <summary> ορίζει επικεφαλίδα για το περιεχόμενο της ετικέτας <details>. Η επικεφαλίδα είναι πάντα ορατή, ενώ το κείμενο που βρίσκεται μέσα στην <details> εμφανίζεται μόνο όταν ο χρήστης πατήσει επάνω στην επικεφαλίδα
<summary> - ορίζει μια επικεφαλίδα για το περιεχόμενο της ετικέτας <details>. Η επικεφαλίδα είναι πάντα ορατή, ενώ το περιεχόμενο της ετικέτας <details> εμφανίζεται όταν ο χρήστης πατάει στην επικεφαλίδα. Η ετικέτα <summary> τοποθετείται ΠΑΝΤΑ ΠΡΩΤΗ μέσα στην <detils>
<figcaption> - ορίζουμε την επικεφαλίδα ενός στοιχείου <figure>. Η <figcaption> τοποθετείται μέσα στην ετικέτα <figure> και πρέπει να είναι η πρώτη ή η τελευταία ετικέτα
<figure> - η ετικέτα αυτή χρησιμοποιείται για να ομαδοποιεί στοιχεία. Το περιεχόμενο μέσα στην ετικέτα αυτή είναι ανεξάρτητο και περιέχει κυρίως περισσότερες πληροφορίες για ένα τμήμα της σελίδας. Με την ετικέτα <figcaption> ορίζουμε επικεφαλίδα για το περιεχόμενο της <figure>
<footer> - ορίζουμε το υποσέλιδο μιας σελίδα ή ενός τμήματος της σελίδας. Συνήθως στο υποσέλιδο γράφουμε την copyright πρόταση, το όνομα του συντάκτη ή τα στοιχεία επικοινωνίας
<header> - ορίζουμε την επικεφαλίδα μιας σελίδας ή ενός τμήματος. Το περιεχόμενο μιας επικεφαλίδας είναι συνήθως ένα κείμενο ή μενού πλοήγησης
<hgroup> - ομαδοποιεί ένα σύνολο από επικεφαλίδες για μια σελίδα ή ένα τμήμα. Συχνά βλέπουμε μια επικεφαλίδα και κάτω από αυτήν μια άλλη επικεφαλίδα με μικρότερα γράμματα για να δηλώσει ότι είναι υποσύνολο ή παιδί της πρώτης.
<mark> - ορίζει ένα τονισμένο (highlighted) κείμενο
<meter> - χρησιμοποιείται για να δείξουμε την κλίμακα μέτρησης ενός μεγέθους που αναφερόμαστε. Χρησιμοποιείται μόνο όταν γνωρίζουμε την μικρότερη και την μεγαλύτερη τιμή που μπορεί να πάρει το μέγεθος στο οποίο αναφερόμαστε
<nav> - ορίζει μια περιοχή που περιέχει μενού πλοήγησης (navigation menu). Συνήθως τοποθετούμε τα κουμπιά Προηγούμενο και Επόμενο μέσα στην ετικέτα αυτή
<progress> - μέσα στην ετικέτα αυτή γράφουμε το ποσοστο προόδου μιας διαδικασίας (όπως η ολοκλήρωση της φόρτωσης της σελίδας στον browser).
<ruby> - χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Συνεργάζεται με τις ετικέτες <rp> και <rt>
<rt> - χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Τοποθετείται μέσα στην ετικέτα <ruby> και συνεργάζεται με την ετικέτα <rp>
<rp> - χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Τοποθετείται μέσα στην ετικέτα <ruby> και συνεργάζεται με την ετικέτα <rt> η οποία περιέχει την επεξήγηση
<section> - ορίζει ένα τμήμα μέσα σε μια σελίδα, όπως επικεφαλίδες, υποσέλιδα, ενότητες ή οποιοδήποτε άλλο τμήμα μέσα σε μια σελίδα
<time> - με την ετικέτα αυτή χαρακτηρίζουμε ένα κείμενο σαν ώρα, ημερομηνία ή και τα δύο μαζί
<wbr> - η ετικέτα αυτή δείχνει στον browser σε ποια σημεία μπορεί να συνεχίσει στην επόμενη γραμμή, όταν η λέξη δεν χωράει στο σημείο που εμφανίζεται. Χρησιμοποιείται για μεγάλες λέξεις.
Νέες ετικέτες εισαγωγής media
<audio> - ορίζει ήχο, όπως ένα τραγούδι ή ένα audio stream. Μπορούμε να γράψουμε κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους browsers που δεν υποστηρίζουν την ετικέτα αυτή.
<video> - εισάγει στην σελίδα ένα βίντεο. Μπορούμε να γράψουμε κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους browsers που δεν υποστηρίζουν την ετικέτα αυτή.
<source> - προσθέσει πολλαπλά media, είτε βίντεο, είτε ήχους. Τοποθετείται μέσα σε ετικέτες όπως <audio> και <video>
<embed> - με την ετικέτα αυτή προσθέτει στην σελίδα μια εξωτερική εφαρμογή, όπως ένα plug-in, ή ένα audio, ή βίντεο κτλ. Για εισαγωγή βίντεο και audio πρέπει να χρησιμοποιούμε τις ετικέτες <video> και <audio> αντίστοιχα
<video> - εισάγει στην σελίδα ένα βίντεο. Μπορούμε να γράψουμε κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους browsers που δεν υποστηρίζουν την ετικέτα αυτή.
<source> - προσθέσει πολλαπλά media, είτε βίντεο, είτε ήχους. Τοποθετείται μέσα σε ετικέτες όπως <audio> και <video>
<embed> - με την ετικέτα αυτή προσθέτει στην σελίδα μια εξωτερική εφαρμογή, όπως ένα plug-in, ή ένα audio, ή βίντεο κτλ. Για εισαγωγή βίντεο και audio πρέπει να χρησιμοποιούμε τις ετικέτες <video> και <audio> αντίστοιχα
Η νέα ετικέτα canvas
<canvas> - ορίζει μια ορθογώνια περιοχή στην οποία μπορούμε να σχεδιάσουμε γραφικά, όπως ορθογώνια, κύκλους, χαρακτήρες, αλλά και εξωτερικές εικόνες. Μπορούμε επίσης να εφαρμόσουμε διάφορα εφέ και μεταμορφώσεις στα γραφικά που σχεδιάζουμε. Περισσότερα για την περιοχή σχεδίασης canvas. Περισσότερα για την ετικέτα <canvas>
Οι νέες ετικέτες μέσα στις φόρμες
<datalist> - ορίζει μια λίστα από επιτρεπτές επιλογές που μπορεί να πάρει ένα πεδίο κειμένου μιας φόρμας. Οι επιτρεπτές επιλογές καθορίζονται με την ετικέτα <option> μέσα στο στοιχείο datalist. Η σύνδεση του στοιχείου datalist με το πεδίο κειμένου, επιτυγχάνεται έχοντας την ίδια τιμή στην ιδιότητα id της ετικέτας <datalist> και στην ιδιότητα list του πεδίου κειμένου.
<keygen> - τοποθετείται μέσα στην ετικέτα <form>. Σκοπός του της ετικέτας <keygen> είναι να παρέχει ασφαλή τρόπο για να ταυτοποιεί (authenticate) τους χρήστες όταν αυτοί κάνουν login ή signup. Κάθε φορά που γίνεται submit η φόρμα, το keygen δημιουργεί ενός ζευγάρι κλειδιών, ένα ιδιωτικό κλειδί (private) και ένα δημόσιο (public). Το ιδιωτικό κλειδί αποθηκεύεται στον client, ενώ το δημόσιο στέλνεται στον server. Το δημόσιο κλειδί χρησιμοποιείται από τον server σαν χαρακτηριστικό ταυτοποίησης ενός χρήστη.
Βέβαια αυτος ο τρόπος ασφάλειας από μόνος του δεν είναι ικανός να αποτρέψει κάποιους hackers να συνδεθούν με έναν λογαριασμό που δεν τους ανήκει, αλλά τουλάχιστον παρέχεται μια ικανοποιητική ασφάλεια.
<output> - γράφεται μέσα στην <form> και χρησιμοποιείται για να εμφανίζει αποτελέσματα από scripts. Ο παρακάτω κώδικας εμφανίζει το αποτέλεσμα που υπολογίζεται μέσα στην JavaScript function με όνομα resCacl():
Καθορισμός λίστας επιτρεπτών επιλογών για ένα πεδίο
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
Οι ιδιότητα list της ετικέτας <input> πρέπει να έχει ίδια τιμή με την ιδιότητα id της ετικέτας <datalist>
<keygen> - τοποθετείται μέσα στην ετικέτα <form>. Σκοπός του της ετικέτας <keygen> είναι να παρέχει ασφαλή τρόπο για να ταυτοποιεί (authenticate) τους χρήστες όταν αυτοί κάνουν login ή signup. Κάθε φορά που γίνεται submit η φόρμα, το keygen δημιουργεί ενός ζευγάρι κλειδιών, ένα ιδιωτικό κλειδί (private) και ένα δημόσιο (public). Το ιδιωτικό κλειδί αποθηκεύεται στον client, ενώ το δημόσιο στέλνεται στον server. Το δημόσιο κλειδί χρησιμοποιείται από τον server σαν χαρακτηριστικό ταυτοποίησης ενός χρήστη.
Βέβαια αυτος ο τρόπος ασφάλειας από μόνος του δεν είναι ικανός να αποτρέψει κάποιους hackers να συνδεθούν με έναν λογαριασμό που δεν τους ανήκει, αλλά τουλάχιστον παρέχεται μια ικανοποιητική ασφάλεια.
Χρήση του keygen σε φόρμα
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
<output> - γράφεται μέσα στην <form> και χρησιμοποιείται για να εμφανίζει αποτελέσματα από scripts. Ο παρακάτω κώδικας εμφανίζει το αποτέλεσμα που υπολογίζεται μέσα στην JavaScript function με όνομα resCacl():
Εισαγωγή πεδίου σε φόρμα το οποίο θα εμφανίζει αποτέλεσμα από JavaScript κώδικα
<form action="demo_form.asp" method="get">
<output id="result">
<script language="javascript">
document.write(sum);
</script>
</output>
</form>
<output id="result">
<script language="javascript">
document.write(sum);
</script>
</output>
</form>
