Τα δομικά στοιχεία της HTML - άρθρο, τμήμα, πλοήγηση και κατά μέρος - είναι, με την πρώτη ματιά, μερικά από τα ευκολότερα τμήματα της προδιαγραφής HTML5 για κατανόηση και εφαρμογή. Ωστόσο, είναι στην πραγματικότητα μερικά από τα ανεπαρκώς προσδιορισμένα, κακώς κατανοητά και ανεπαρκώς εφαρμοσμένα μέρη του HTML5.
Δημιουργήθηκε αυθαίρετα. Προσπαθούν να εισαγάγουν έναν εντελώς νέο τρόπο δομής ιστοσελίδων. παραβιάζουν τις αρχές σχεδιασμού της HTML. βλάπτουν την προσβασιμότητα για ορισμένους χρήστες. και δεν πρέπει να τα χρησιμοποιήσετε.
Ναι, έρχομαι έξω στα όπλα - που λάμπει από αυτό το συγκεκριμένο τμήμα του HTML5, αλλά παρακαλώ μην υποθέσετε ότι είμαι «anti-HTML5». Έχω γράψει ένα βιβλίο για το HTML5 , Μου αρέσει ο ανοιχτός ιστός, μου αρέσουν τα καλά πρότυπα του διαδικτύου και μου αρέσει το γεγονός ότι μετά από μια δεκαετία στασιμότητας, η καινοτομία στις τεχνολογίες του διαδικτύου συμβαίνει τώρα με απόλυτα φουσκωτή ταχύτητα. Αυτό, όμως, δεν σημαίνει ότι πρέπει να αποδεχτούμε όλα όσα μας δίνονται. Δεν χρειάζεται να φάμε τα πάντα στην πλάκα HTML5, ακόμη και αν βρούμε μέρη του πιάτου μάλλον νόστιμα. Ορισμένα μέρη πιθανώς πρέπει να σταλούν πίσω στον σεφ.
Υπάρχουν καλά και κακά μέρη στην πολύ τεράστια προδιαγραφή HTML5 και πρόκειται να σκεφτούμε κριτικά για ένα πολύ συγκεκριμένο μέρος της προδιαγραφής: την τοποθέτηση ή τα «δομικά» στοιχεία που εισάγει η HTML5. Ας δούμε λοιπόν τα καπέλα μας και να δούμε από πού προέρχονται πραγματικά αυτά τα νέα στοιχεία, πώς πρέπει να χρησιμοποιηθούν και πώς εμείς, η κοινότητα του σχεδιασμού ιστοσελίδων, τους έχουμε παρανοήσει κατά βάση, ουσιαστικά παραγκωνίζοντας το spec. Θα θέσουμε υπό αμφισβήτηση την ίδια τη βάση για αυτά τα στοιχεία και θα αποδώσουμε μερικούς μύθους γι 'αυτούς κατά μήκος του δρόμου.
Ας καταρρίψουμε ένα μύθο που έχει επαναληφθεί στο ad nauseum σχετικά με αυτά τα στοιχεία: την ιδέα ότι βασίζονται στην έρευνα για το πώς εμείς, η κοινότητα του ιστού, επισημάναμε τα έγγραφά μας. Είναι ένας μύθος που έχει επαναληφθεί εδώ και χρόνια σε βιβλία, blogs και συνομιλίες και δεν είναι αλήθεια. Πώς ξέρω? Ρώτησα.
Όταν έψαχνα την προέλευση αυτών των στοιχείων, αποφάσισα να ρωτήσω τον συντάκτη της προδιαγραφής HTML5, τον Ian Hickson, από πού προήλθαν αυτά τα στοιχεία. Απάντησε:
Εγώ και άλλοι συνεισφέροντες του WHATWG [πρόσθεσε], [2004], διότι ήταν προφανή στοιχεία που έπρεπε να προσθέσουν αφού είδαν πως οι συγγραφείς χρησιμοποίησαν HTML4. Εμείς αργότερα (τέλη του 2005 στις αρχές του 2006) διενεργήσαμε κάποια αντικειμενική έρευνα για να μάθουμε ποια ήταν τα πρώτα δέκα μαθήματα HTML και αποδείχθηκε ότι βασικά αντιστοιχούσαν ακριβώς στα στοιχεία που είχαμε προσθέσει, κάτι που ήταν βολικό.
Ας σπάσουμε αυτό το θέμα: πρώτον, ο Hickson και τα μέλη WHATWG πρόσθεσαν αυτά τα στοιχεία πριν γίνει οποιαδήποτε έρευνα . Μπορείτε να βουτήξετε στα αρχεία αλληλογραφίας της WHATWG (ευτυχώς δημόσια) και να ανακαλύψετε τις πρώτες συζητήσεις για αυτά τα στοιχεία για τον εαυτό σας. Για παράδειγμα, μπορείτε να δείτε τον Hickson να τους συζητά το Νοέμβριο του 2004, με σχόλια όπως αυτό :
Ναι, σκοπεύω να συμπεριλάβω πράγματα όπως [σημασιολογικά στοιχεία] στις εφαρμογές Web. Ο πίνακας στο γραφείο μου έχει επί του παρόντος μια λίστα στοιχείων κάτω από την επικεφαλίδα "HTML5 BLOCK LEVEL ELEMENTS" και προσπαθώ να βρω πώς να τα δουλέψει καλά (τα εν λόγω στοιχεία αναφέρονται σήμερα στο προσχέδιο, αλλά το σχέδιο δεν χειρίζεται καλά τις κεφαλίδες). Δεν έχω εξετάσει ακόμη το inline markup, αλλά αυτό είναι και στις κάρτες.
Δηλαδή, φαίνεται πως έγινε η δομική σημασιολογία HTML5: ένας άνθρωπος, ένας πίνακας, και μερικές εισροές από άλλα μέλη WHATWG. (Η Ομάδα Εργασίας WHATWG ή Web Τεχνολογίας Εφαρμογών Υπερκειμένου, δημιουργήθηκε από τους εκπροσώπους του προγράμματος περιήγησης ως απάντηση στην εγκατάλειψη της HTML από το W3C για το ουτοπικό ιδανικό του XHTML 2.0).
Τα στοιχεία που χρησιμοποιούνται από τα εκατομμύρια των εγγράφων που συζητούσαμε και συζητούσαμε, φαίνεται ότι δημιουργήθηκαν αυθαίρετα σε μια ιδιοτροπία του εκδότη HTML5 το 2004. (Και συναντήθηκαν με ένα έξυπνη κριτική και κάποιες δυστυχώς ακριβείς προβλέψεις σχεδόν αμέσως.)
Ο Tantek έχει επιμείνει στην έρευνα πριν προσδιορίσει νέες μορφές για μεγάλο χρονικό διάστημα στο πλαίσιο των μικρομορφωμάτων και τελικά οι προδιαγραφές WHATWG θα σχεδιαστούν με τα ίδια πραγματικά δεδομένα, αντί να τραβήξουμε τα πράγματα από τα συλλογικά μας πίσω. - Ο Ian Hickson
Αυτό μας φέρνει στο δεύτερο σημείο. Τον Δεκέμβριο του 2005 - περίπου ένα χρόνο μετά την εμφάνιση αυτών των νέων στοιχείων - ο Hickson (υπάλληλος της Google) έκανε κάποια έρευνα σχετικά με τον τρόπο με τον οποίο έγιναν τα έγγραφά του χρησιμοποιώντας τη μεγάλη βάση δεδομένων των εγγράφων της Google. Η έρευνα ήταν μια ανάλυση ενός δείγματος ελαφρώς πάνω από ένα δισεκατομμύριο εγγράφων, εξάγοντας πληροφορίες σχετικά με δημοφιλή ονόματα τάξεων, στοιχεία, ιδιότητες και σχετικά μεταδεδομένα. Τα στοιχεία αναγνώρισης δεν συμπεριλήφθηκαν στην έρευνα. Τα ευρήματα δημοσιεύτηκαν από την Google ως Στατιστικές δημιουργίας ιστού (2005) .
Το κρίσιμο μέρος της έρευνας, όσον αφορά τα δομικά στοιχεία της HTML, ήταν το τάξεις , η οποία, παρά τη χρήση δείγματος όπου ~ 900 εκατομμύρια από τα 1 δισεκατομμύρια έγγραφα δεν είχαν καθόλου τάξεις, περιείχαν κάποιες κοινές τάξεις, είμαι βέβαιος ότι όλοι έχουμε χρησιμοποιήσει στα έργα μας πριν: υποσέλιδο, μενού, τίτλος, μικρό κείμενο , περιεχόμενο, επικεφαλίδα, nav, πνευματικά δικαιώματα, κουμπί, κύρια, και ούτω καθεξής.
Ο Hickson παρέχει στη συνέχεια τα δεδομένα του, υποδηλώνοντας ότι αυτά τα μαθήματα «πραγματικά [χαρτί] πολύ καλά στα στοιχεία που προτείνονται στο HTML5» και παρέχει έναν πίνακα που συγκρίνει τα ευρήματα της έρευνας και τα νέα στοιχεία στο HTML5: ένα υποσέλιδο τάξη είναι στην έρευνα, ένα στοιχείο υποσέλιδου είναι σε HTML5. μια κλάση κεφαλίδας είναι στην έρευνα, ένα στοιχείο κεφαλίδας είναι σε HTML5. τα κείμενα κειμένου , το περιεχόμενο , το κύριο σώμα , το σώμα είναι στην έρευνα και, err ... το άρθρο είναι σε HTML5 το οποίο, όπως θα δούμε, δεν ταιριάζει καθόλου. δεν υπάρχει καμία ενότητα , η οποία αξίζει επίσης να σημειωθεί.
Λαμβανόμενη στην ονομαστική αξία, όλα αυτά είναι αρκετά λογικά. Χρησιμοποιώ το υποσέλιδο, χρησιμοποιείτε το υποσέλιδο, το υποσέλιδο είναι σε HTML5. Ποιο είναι το πρόβλημα?
Το πρόβλημα είναι, αν διαβάσετε την πραγματική Προδιαγραφή HTML5 , τα στοιχεία της HTML5 ορίζονται με τρόπο που δεν έχει να κάνει με το πώς τα έχουμε χρησιμοποιήσει παραδοσιακά.
Από τη μια πλευρά, ο Hickson εισήγαγε μια εντελώς νέα ιδέα της δομής μιας ιστοσελίδας σε HTML5 με στοιχεία διαχωρισμού . Από την άλλη, ο Hickson συγκρίνει τα στοιχεία διατομής HTML5 με κλάσεις που χρησιμοποιούνται στην άγρια φύση, χωρίς να κατανοεί τι ακριβώς χρησιμοποιήθηκαν αυτές οι κλάσεις. Ένα κλασικό παράδειγμα είναι η επικεφαλίδα, την οποία οι περισσότεροι από εμάς θα χρησιμοποιούσαμε για την περιοχή στην κορυφή της σελίδας, αλλά η προδιαγραφή HTML5, υποδηλώνει ότι μπορείτε να την χρησιμοποιήσετε για την κεφαλίδα κάθε σχολίου μιας σελίδας . Πραγματικά. Ακριβώς επειδή τα μαθήματα στην έρευνα και τα στοιχεία της HTML5 έχουν το ίδιο όνομα δεν σημαίνει ότι οι χρήσεις τους είναι οι ίδιες.
Τώρα, αν είχε ανακοινωθεί σαφώς ότι τα νέα στοιχεία εισήχθησαν με νέο σκοπό και σαφή λογική, τότε αυτό δεν θα ήταν τόσο κακό. Αλλά αυτό δεν μας είπαν.
Εδώ Hickson το 2009 , απαντώντας σε μια ερώτηση σχετικά με το σκοπό του τμήματος, του πλοίου, του άρθρου και των άλλων:
Είναι κατά το μάλλον ή ήττον καλύπτοντας τα πιο συνηθισμένα αιτήματα από προγραμματιστές Ιστού με βάση τις πιο κοινές τιμές χαρακτηριστικών τάξης = "". Ο κύριος σκοπός τους είναι να απλοποιήσουν τη συγγραφή και το στυλ.
Δυστυχώς, αυτό φαίνεται να είναι μια περίπτωση όπου ο επεξεργαστής HTML5, για όλη την καλή δουλειά του στο να τραβήξει το spec μαζί, έχει (ας γεννέψει) ξεχάσει γιατί πρόσθεσε αυτά τα στοιχεία σε αυτό που είναι ουσιαστικά το spec του. Ίσως είναι η διαφορά χρόνου μεταξύ του 2009 και του 2004, ποιος ξέρει. Γνωρίζουμε όμως αυτό: τα στοιχεία διατομής HTML5 δεν προστέθηκαν για να συμπληρώσουν καθόλου τα «συνηθέστερα αιτήματα των προγραμματιστών ιστού». Πως ξέρουμε? Μπορούμε μόνο να δούμε τη λίστα και να δούμε τα πιο θεμελιωμένα στοιχεία που προστέθηκαν, όπως το στοιχείο του τμήματος (και το σχετικό άρθρο και τα στοιχεία κατά μέρος), δεν εμφανίζονται στα κοινά χαρακτηριστικά γνωρίσματα κλάσης.
Αν και ο Hickson μπορεί να έχει ξεχάσει γιατί αυτά τα στοιχεία έχουν προστεθεί, μπορούμε ακόμα να διαβάσουμε ευτυχώς το spec που τεκμηριώνει το σκοπό τους.
Αλλά τι συμβαίνει όταν πείτε στους σχεδιαστές ιστοσελίδων και τους προγραμματιστές να μην ανησυχούν, αυτά τα στοιχεία απλώς αντικαθιστούν αυτό που κάνετε ήδη και στη συνέχεια καθορίστε αυτά τα στοιχεία με τρόπο που σίγουρα δεν είναι αυτό που κάνουν οι σχεδιαστές ιστοσελίδων και οι προγραμματιστές; Τους βάζεις σε ένα μονοπάτι ταξίδι στην πόλη σύγχυση.
Αυτό είναι το χειρότερο είδος έρευνας: μία τεμπέληλη ερμηνεία των δεδομένων που γίνονται για να δικαιολογήσουν τις αποφάσεις που έχουν ήδη ληφθεί. Μια συχνά επαναλαμβανόμενη αρχή σχεδιασμού του HTML5 είναι να " ανοίξτε τα μονοπάτια », δηλαδή« Όταν μια πρακτική είναι ήδη διαδεδομένη μεταξύ των συγγραφέων, σκεφτείτε να την υιοθετήσετε αντί να απαγορευτείτε ή να εφεύρίνετε κάτι νέο ». Και έτσι θα φαινόταν με αυτά τα νέα δομικά στοιχεία: το τμήμα, το άρθρο, το σκάφος και το πλαίσιό του (και το κεφαλίδα και το υποσέλιδο) - σίγουρα αυτά απλώς "ανοίγουν τα cowpaths";
Αυτή είναι η εντύπωση που έχουμε πολλοί από εμάς, καθώς αυτό μας είπαν ότι είναι.
Στην πραγματικότητα, σχεδόν πριν από πέντε χρόνια, όταν πήραμε πρώτα ένα προεπισκόπηση HTML5 , φαινόταν σαν να μπορούσαν αυτά τα στοιχεία να αντικαταστήσουν απλά τις «ανεπιχειρησιακές» διαιρέσεις τις οποίες είχαμε συνηθίσει να χρησιμοποιούμε. Αυτό που ήταν div id = "header" στο επάνω μέρος της σελίδας θα μπορούσε τώρα να γίνει κεφαλίδα . το div id = "footer" θα μπορούσε τώρα να γίνει υποσέλιδο και το div θα μπορούσε να είναι απλώς άρθρο. Απλά, σωστά;
Δυστυχώς, παρά το ότι μας έκαναν ό, τι μας είπαν (δηλ. Απλώς ανταλλάξουμε το ένα με το άλλο), εφαρμόσαμε αυτά τα στοιχεία με τρόπο που δεν αντικατοπτρίζεται στην προδιαγραφή HTML5. Δηλαδή, όταν πρόκειται για τη δομή HTML5, έχουμε ουσιαστικά περάσει το spec. Υπάρχουν δύο μέθοδοι δομής HTML5 - η ερμηνεία της κοινότητας, η οποία αντικατοπτρίζεται στο άρθρο του A List Apart (και αμέτρητες άλλες) του 2007. και την πραγματική προδιαγραφή HTML5, η οποία εισάγει έναν εντελώς νέο τρόπο δομής μιας ιστοσελίδας που ονομάζεται περιγράφει.
Αυτή είναι η αντίφαση στην καρδιά της δομικής σημασιολογίας της HTML. Από τη μία πλευρά έχουμε τον συντάκτη που μας λέει ότι τα νέα στοιχεία βασίζονται στην έρευνα για το τι κάναμε ήδη και επομένως αποσκοπούν απλώς να καταστήσουν λίγο πιο εύκολη τη συγγραφή. και από την άλλη έχουμε αυτό που επεξεργάστηκε ο επεξεργαστής στην προδιαγραφή HTML5, ο οποίος είναι ένας νέος τρόπος δομής μιας ιστοσελίδας με έναν τρόπο που δημιουργεί ένα περίγραμμα εγγράφου χρησιμοποιώντας στοιχεία διαχωρισμού .
Υπήρχε μια σαφής επιλογή για να γίνει εδώ. Διάλειμμα με τις αρχές σχεδιασμού HTML5 και να εισαγάγετε κάτι νέο ή απλώς να ακολουθήσετε πραγματικές πρακτικές συγγραφής και να καθορίσετε στοιχεία με τρόπο που να αντικατοπτρίζει την πρακτική του σχεδιασμού ιστοσελίδων. Ο Hickson προσπάθησε να κάνει τους πρώτους και να τους καλέσει τον τελευταίο και τώρα έχουμε ένα μεγάλο χάος στα χέρια μας.
Πείνα για περισσότερα; Το δεύτερο μέρος αυτού του άρθρου είναι πλέον διαθέσιμη και το βιβλίο του Luke "Η αλήθεια για το HTML5" διατίθεται για περιορισμένο χρονικό διάστημα μέσω της ιστοσελίδας αδελφών μας MightyDeals.com με ένα εκπληκτικό 50% έκπτωση.
Εργάζεστε με δομικά στοιχεία HTML5; Θεωρείτε ότι είναι χρήσιμα ή εμπόδια; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, χρησιμοποιεί εικόνα δομής μέσω Shutterstock.