Ενώ η ανάπτυξή του είχε αρχίσει πολλά χρόνια πριν, το HTML5 άρχισε να κυκλοφορεί στην κοινή χρήση με τους σχεδιαστές ιστοσελίδων / προγραμματιστές το 2010. Ακριβώς έξω από την πύλη, η γλώσσα αισθάνθηκε γνωστή σε πολλούς επαγγελματίες του διαδικτύου, επειδή αντί να προσπαθεί να επανεφεύρει τα πάντα από το μηδέν, βασισμένο στο προηγούμενο. Όποιος γνώριζε το HTML 4.01 βρήκε γρήγορα ότι αρκετά από αυτή την έκδοση θα μπορούσε τώρα να βρεθεί στο HTML5.
Παρόλο που το HTML5 περιλαμβάνει πολλά στοιχεία που έχουν περιληφθεί στην HTML για λίγο, εισήγαγε επίσης μια χούφτα στοιχείων που ήταν νέα στο HTML5. Για πολλά από αυτά τα νέα στοιχεία, χρησιμοποιήθηκε μια προσέγγιση που ονομάζεται "ανοίγοντας τα cowpaths". Αυτός είναι ένας όρος που χρησιμοποιείται συνήθως στην πληροφορική για να σημαίνει ουσιαστικά να δούμε τι κάνουν οι άνθρωποι και να κάνουν αυτό. Στην περίπτωση των σχεδιαστών ιστοσελίδων, αυτό σήμαινε να δούμε πώς είχαν ήδη δημιουργήσει σελίδες και να βασιστούν αποφάσεις σε νέα στοιχεία σχετικά με αυτές τις δραστηριότητες. Για παράδειγμα, πολλοί επαγγελματίες του διαδικτύου θα χτίσουν ιστότοπους με τμήματα που χρησιμοποίησαν τα χαρακτηριστικά ταυτότητας "header", "nav" και "footer". Ως εκ τούτου, το HTML5 εισήγαγε αυτά ως νέα στοιχεία, επιτρέποντας στους επαγγελματίες του διαδικτύου να προσθέσουν μεγαλύτερη σημασία στα έγγραφά τους, χρησιμοποιώντας ειδικά τμήματα διαχωρισμού αντί για απλά τμήματα. Αυτός ο συνδυασμός εξοικείωσης και μια προσέγγιση που αναγνώρισε τις τρέχουσες πρακτικές βοήθησε το HTML5 να αγκαλιαστεί γρήγορα από τη βιομηχανία σχεδιασμού ιστοσελίδων.
Το HTML5 Doctype
Πρώτα απ 'όλα, για να χρησιμοποιήσετε οποιαδήποτε νέα στοιχεία HTML5, το έγγραφό σας πρέπει να περιλαμβάνει το doctype HTML5 που είναι:
Ίσως παρατηρήσετε ότι αυτό το doctype δεν αναφέρεται ρητά "HTML5", αλλά μάλλον απλά δηλώνει την έκδοση ως "html". Αυτό οφείλεται στο γεγονός ότι αυτό το doctype είναι αυτό που προορίζεται να χρησιμοποιηθεί προς τα εμπρός για όλες τις επαναλήψεις της γλώσσας.
Στην πραγματικότητα, το HTML5 υποτίθεται ότι είναι η τελευταία αριθμημένη έκδοση της γλώσσας, με νέες αλλαγές να προστίθενται σε συνεπή βάση στο μέλλον. Στην πραγματικότητα, ορισμένα από τα στοιχεία της παρακάτω λίστας έχουν προστεθεί στη γλώσσα και μετά την αρχική ώθηση το 2010!
Οι ετικέτες HTML5
| Ετικέτα | Εξήγηση | |
|---|---|---|
| Άγκυρα ή σύνδεσμος | ||
| Συντομογραφία | ||
| Διεύθυνση ή συντάκτες του εγγράφου | ||
| Χάρτης εικόνων από την πλευρά του πελάτη | ||
| Αρθρο | ||
| Το εφαπτόμενο περιεχόμενο | ||
| Ροή ήχου | ||
| Τολμηρός | ||
| Διαδρομές URI βάσης για στοιχεία στο έγγραφο | ||
| Αλγόριθμος δύο κατευθύνσεων | ||
| Μεγάλη προσφορά | ||
| Σώμα της σελίδας | ||
| Διακοπή της γραμμής | ||
| Πλήκτρο φόρμας HTML | ||
| Καμβάς για δυναμικά γραφικά | ||
| Σχόλιο | ||
| Επιγραφή πίνακα | ||
| Παραπομπή | ||
| Αναφορά κωδικού | |
| Στήλη πίνακα | ||
| Ομαδοποίηση στήλης πίνακα | ||
| Εντολή ή ενέργεια στη σελίδα | ||
| Ορισμός τύπου εγγράφου | ||
| Πλέγμα δεδομένων | ||
| Προκαθορισμένες επιλογές για άλλα στοιχεία ελέγχου | ||
| Περιγραφή λίστας ορισμών ή εύρος συζήτησης | ||
| Διαγράφηκε κείμενο | ||
| Πρόσθετες πληροφορίες κατά παραγγελία | ||
| Ορισμός | ||
| Συνομιλία | ||
| Λογική διαίρεση | ||
| Λίστα περιγραφής | ||
| Ορισμός λίστας ορισμών ή ομιλητής διαλόγου | ||
| Εμφαση | ||
| Ενσωματωμένο στοιχείο για plugins | ||
| Ομάδα ελέγχου φόρμας | ||
| Η λεζάντα χρησιμοποιείται για ένα | ||
| Εικόνα με προαιρετική λεζάντα | ||
| Υποσέλιδο της σελίδας | ||
| Μορφή | ||
| Τίτλος πρώτου επιπέδου | ||
| Δευτερεύουσα επικεφαλίδα | ||
| Τίτλος τρίτου επιπέδου | ||
| Τίτλος τέταρτου επιπέδου | ||
| Τίτλος πέμπτου επιπέδου | ||
| Τίτλος έκτου επιπέδου | ||
| Επικεφαλής του εγγράφου | ||
|
| Κεφαλίδα μιας σελίδας | |
| Ομάδα επικεφαλής | ||
| Οριζόντιος κανόνας | ||
| Στοιχείο ρίζας μιας ιστοσελίδας | ||
| Γραμματοσειρά με πλάγια γραφή | ||
| Ενσωματωμένο πλαίσιο | ||
| Εικόνα | ||
| Στοιχείο μορφής εισόδου | ||
| Στοιχείο μορφής κουμπιού | ||
| Στοιχείο φόρμας ελέγχου | ||
| Έγχρωμη είσοδος | ||
| Εισαγωγή ημερομηνίας | ||
| Συνολική είσοδος ημερομηνίας και ώρας | ||
| Τοπική είσοδος ημερομηνίας και ώρας | ||
| Εισαγωγή διεύθυνσης email | ||
| Στοιχείο φόρμας φόρτωσης αρχείου | ||
| Στοιχείο πεδίου κρυφής μορφής | ||
| Στοιχείο μορφής εικόνας | ||
| Είσοδος έτους και μήνα | ||
| Εισαγωγή αριθμών | ||
| Στοιχείο μορφής κωδικού πρόσβασης | ||
| Στοιχείο μορφής ραδιοφώνου | ||
| Μη ακριβής εισαγωγή αριθμών | ||
| Στοιχείο μορφής κουμπιού επαναφοράς | ||
| Πεδίο αναζήτησης | ||
| Υποβολή στοιχείου φόρμας κουμπί | ||
| Εισαγωγή τηλεφωνικού αριθμού | ||
| Στοιχείο φόρμας πεδίου κειμένου | ||
| Εισαγωγή ώρας | ||
| Εισαγωγή URL | ||
| Είσοδος έτους και εβδομάδας | ||
| Εισαγμένο κείμενο | ||
| Κείμενο που θα εισαχθεί από το χρήστη | ||
| Δημιουργήστε ασφαλή κλειδιά για τη διαχείριση πιστοποιητικών | ||
| Ετικέτα φόρμας | ||
| Έντυπο πεδίου μορφής | ||
| Στοιχείο λίστας | ||
| Σύνδεση με συναφή έγγραφα | ||
| Κύρια περιοχή περιεχομένου σε μια σελίδα | ||
| Χάρτης εικόνων από την πλευρά του πελάτη | ||
| Επισημασμένο ή επισημασμένο κείμενο | ||
| Λίστα εντολών | ||
| Meta πληροφορίες σχετικά με το έγγραφο | ||
| Βαθμομετρητής | ||
| Ορίστε μια περιοχή με συνδέσμους πλοήγησης | ||
| Περιεχόμενο όταν τα σενάρια δεν είναι διαθέσιμα | ||
| Μη τυποποιημένο αντικείμενο | ||
|
| Καταγεγραμμένος ή αριθμημένος κατάλογος | |
| Ομάδα επιλογών σε μια λίστα επιλογών | ||
| Επιλογή σε μια λίστα επιλογών | ||
| Αποτέλεσμα ενός υπολογισμού υπολογισμού | ||
| Παράγραφος | ||
| Παράμετρος ενός στοιχείου αντικειμένου | ||
|
| Προ-μορφοποιημένο κείμενο | |
| Ένδειξη προόδου | ||
| Σύντομη εισαγωγική παραπομπή | ||
| Ruby παρένθεση | ||
| Ruby κείμενο | ||
| Ruby σχολιασμός | ||
| Κείμενο απεργίας | ||
| Έξοδος δείγματος | ||
| Σενάρια | ||
| Τμήμα σελίδας | ||
| Επιλέξτε ή αναπτυσσόμενες λίστες μενού | ||
| Μικρό μέγεθος γραμματοσειράς | ||
| Πηγή μέσων | ||
| Γενικό εμπορευματοκιβώτιο τύπου inline | ||
| Μεγάλη έμφαση | ||
| Φύλλα στυλ | ||
| Υπογεγραμμένος | ||
| Περίληψη των περιεχομένων του στοιχείου DETAILS | ||
| Υπερηφάνεια | ||
| Τραπέζι | ||
| Γραμμές σώματος πίνακα | ||
| Κυψέλη πίνακα | ||
| Στοιχείο μορφής πολλαπλών γραμμών | ||
| Γραμμές υποσέλιδου πίνακα | ||
| Κεφάλαιο κεφαλίδας πίνακα | ||
| Γραμμές επικεφαλίδας πίνακα | ||
| Ορίζει το χρόνο | ||
| Τίτλος | ||
| Σειρά πίνακα | ||
|
| Μη καταχωρημένη λίστα ή λίστα | |
| Κείμενο με μεταβλητή ή χρήστη | ||
|
Βίντεο ή ταινία που έχουν ενσωματωθεί στη σελίδα |
