Σε το πρώτο μέρος αυτής της σειράς εξετάσαμε τις αποτυχίες που οδηγούν στα νέα δομικά στοιχεία του HTML5. σε το δεύτερο μέρος της σειράς εξετάσαμε λεπτομερώς τις συνέπειες αυτών των αδυναμιών. σε αυτό το τελευταίο μέρος θα αναζητήσουμε μια πορεία προς τα εμπρός και θα κάνουμε κάποια συμπεράσματα για την τρέχουσα κατάσταση.

Αυτό δεν είναι ένα αφηρημένο πρόβλημα: οι άνθρωποι πρέπει πραγματικά να διδάξουν αυτά τα πράγματα. Η επόμενη γενιά σχεδιαστών ιστοσελίδων και προγραμματιστών θα διδαχθεί με HTML5 ως σημείο εκκίνησης. Λυπάμαι για όποιον πρέπει να προσπαθήσει και να εξηγήσει την περιγραφή και την τομή στην τρέχουσα και μελλοντική συγκομιδή των μαθητών. Ίσως θα μείνουν με σύνεση στη απλή μορφή που διαθέτουμε, η οποία εξακολουθεί να λειτουργεί καλά: χρησιμοποιήστε divs είτε με αναγνωριστικό είτε με class / es.

Είναι εύλογο να υποδείξουμε ότι ίσως οι πράκτορες χρήστη στο μέλλον, όπως τα προγράμματα περιήγησης και οι αναγνώστες οθόνης, θα κάνουν περισσότερα με τα δομικά στοιχεία του HTML5 και αυτό θα τους κάνει πιο ευχάριστο για εμάς ως συγγραφείς.

Ο Bruce Lawson της Όπερας πρότεινε ακριβώς αυτό για το Λίστα αλληλογραφίας WHATWG το 2009 :

Εξάλλου, δεν γνωρίζω κανένας πράκτορα χρήστη που να μπορεί να χρησιμοποιήσει χρόνο, τμήμα, υποσέλιδο, datagrid κ.λπ. αλλά περιμένουμε ότι θα υπάρξει σύντομα.

Και εδώ είναι που ο Hickson, ο επεξεργαστής HTML5, είπε στην απάντηση:

Δεν το κάνω. Τα περισσότερα από τα νέα στοιχεία έχουν σκοπό μόνο να κάνουν το styling ευκολότερο, έτσι ώστε να μην χρειαστεί να χρησιμοποιήσουμε μαθήματα.

Όλα αυτά, και ο επεξεργαστής δεν βλέπει τους πράκτορες χρηστών να χρησιμοποιούν ακόμη και αυτά τα στοιχεία. Είναι εκεί, λέει, για να μας σώσει από τη χρήση τάξεων. Με άλλο τρόπο, ο δημιουργός αυτών των στοιχείων φαίνεται αβέβαιος γιατί είναι ακόμη και στο spec, εκτός από το "making styling easier".

Χρειαζόμαστε περισσότερη σημασιολογία σε HTML;

Υπάρχει μια σχολή σκέψης που λέει ότι χρειαζόμαστε μόνο μια χούφτα νέας σημασιολογίας ούτως ή άλλως. Μετά από όλα, το spec θα γίνει φουσκωμένο εάν υπήρχαν δεκάδες ή εκατοντάδες επιπλέον νέοι όροι που προστέθηκαν.

Από τη μία πλευρά, συμφωνώ. Όσον αφορά τη διάρθρωση μιας βασικής ιστοσελίδας, θα έλεγα ότι θα είμαστε καλύτερα χωρίς τα στοιχεία διαχωρισμού της HTML εντελώς. Αυτό που κάποτε ήταν μια απλή άσκηση στη χρήση divs έχει γίνει ένα περίπλοκο χάος στο HTML5 για κανένα καθαρό κέρδος.

Ωστόσο, όσον αφορά τη σημασιολογία γενικά, υπάρχουν περιπτώσεις όπου περισσότερο νόημα μπορεί να προστεθεί πάνω από τη δομή της ιστοσελίδας μας (είτε HTML4, 5 είτε οτιδήποτε έρχεται στη συνέχεια) χρησιμοποιώντας πρόσθετα χαρακτηριστικά στα υπάρχοντα στοιχεία μας.

ARIA για την προσβασιμότητα

Ένα από τα ευκολότερα πράγματα που πρέπει να εφαρμόσετε σε μια υπάρχουσα ή νέα τοποθεσία είναι τα ορόσημα της ARIA. (ARIA σημαίνει Accessible Rich Internet Applications και είναι μια προδιαγραφή που ορίζει έναν τρόπο να καταστούν οι εφαρμογές και οι ιστοσελίδες πιο προσιτές).

Τα ορόσημα ARIA αποτελούν ένα υποσύνολο της συνολικής προδιαγραφής ARIA και ένα απλό είδος μεταδεδομένων που επιτρέπει στους τυφλούς χρήστες και τους χρήστες με προβλήματα όρασης να μπορούν να μεταβούν στα σημαντικά μέρη μιας σελίδας, δηλαδή στα «ορόσημα». Προσθέτουμε απλώς role = "όνομα-ορόσημο" σε ένα υπάρχον στοιχείο, με τον ίδιο τρόπο προσθέτουμε class = "class-name" σε ένα στοιχείο. Τα ορόσημα AIRA είναι συζητήθηκε σε σχέση με το HTML5 εδώ .

Τα ορόσημα της ARIA είναι πολύ καλύτερα για αυτό που κάνουμε σήμερα. Η ονοματοδοσία είναι λίγο άγρια, αλλά τουλάχιστον αντικατοπτρίζουν την πραγματική πρακτική δημιουργίας ιστοσελίδων. Για παράδειγμα, μπορούμε να χρησιμοποιήσουμε:

  • banner για τη συνολική κεφαλίδα σελίδας.
  • πλοήγηση για πλοήγηση.
  • συμπληρωματικά για πλευρικές ράβδους.
  • contentinfo για το υποσέλιδο.
  • κύρια για την κύρια περιοχή περιεχομένου.

(Λάβετε υπόψη ότι το banner, το κύριο και το περιεχόμενο πρέπει να χρησιμοποιούνται μόνο μία φορά ανά έγγραφο).

Τα ορόσημα ARIA αποτελούν μια απλή λύση που βελτιώνει τις επιλογές πλοήγησης για τους χρήστες του προγράμματος ανάγνωσης οθόνης, χωρίς να βυθίζεται στο σκοτεινό έδαφος του εγγράφου HTML που περιγράφει. Είναι γρήγορη και εύκολη στην υλοποίησή τους και πρέπει πραγματικά να αποτελούν μέρος του βασικού σας προτύπου HTML.

Μηχανές αναζήτησης

Έτσι, έχουμε περισσότερη σημασιολογία για την προσβασιμότητα, αλλά διαθέτουμε επίσης περισσότερη σημασιολογία για τις μηχανές αναζήτησης.

Πρώτον, επιτρέψτε μου να είμαι απολύτως σαφές ότι τα στοιχεία HTML5 δεν έχουν κανένα όφελος για SEO καθόλου. Είναι μύθος και πρέπει να το βάζουμε στο κρεβάτι. Η χρήση ετικέτας άρθρου δεν θα σας βοηθήσει να κατατάξετε υψηλότερα από τον επόμενο τύπο. Μπορείτε να εμπιστευτείτε ότι η Google κατάλαβε πώς να βρει και να ταξινομήσει το περιεχόμενό σας μέχρι τώρα.

Ωστόσο, οι μηχανές αναζήτησης ενδιαφέρονται να κατανοήσουν τον καλύτερο τρόπο εμφάνισης (σημειώστε: όχι κατάταξη ) του περιεχομένου ιστού με πιο δομημένο τρόπο.

Ως εκ τούτου, οι μεγάλες μηχανές αναζήτησης έχουν, με την πάροδο των χρόνων, έβαλαν ή υιοθέτησαν υπάρχοντες τυποποιημένους τρόπους για τη σήμανση δομημένων δεδομένων σε μια ιστοσελίδα ώστε να μπορούν να εξαγάγουν τις κατάλληλες πληροφορίες. Για παράδειγμα, κατά την αναζήτηση αναθεωρήσεων ίσως έχετε παρατηρήσει ότι οι αξιολογήσεις με αστέρια εμφανίζονται στα κορυφαία αποτελέσματα της Google. Αυτή είναι μια περίπτωση που οι μηχανές αναζήτησης είναι σε θέση να εξαγάγουν το σκορ αναθεώρησης με τυποποιημένο τρόπο και να βελτιώσουν την εμφάνιση των αποτελεσμάτων τους. Οι συνταγές είναι ένα άλλο παράδειγμα, όπου ο χρόνος μαγειρέματος παρατίθεται για κάθε αποτέλεσμα. Παρόλο που τα δεδομένα αυτά δεν βελτιώνουν την κατάταξη ενός ιστότοπου, το πιο λεπτομερές αποτέλεσμα μπορεί να ενθαρρύνει περισσότερους χρήστες να κάνουν κλικ, οπότε υπάρχει κάποιο δυνητικό όφελος για έναν ιστότοπο και είναι συχνά απαραίτητο σε μια κατάσταση κούρσας εξοπλισμών όπου το κάνουν όλοι οι ανταγωνιστές σας ΤΕΛΟΣ παντων.

Ενώ αυτό το είδος των πλούσιων δεδομένων ήταν γύρω για μια στιγμή σε διάφορα μορφές, μόλις πέρυσι τις μεγάλες μηχανές αναζήτησης ξεκίνησε μια τεράστια νέα σειρά προτύπων για αυτό το είδος δομημένων δεδομένων. Τους αποκαλούν «σχήματα» και στεγάζονται Schema.org . Χρησιμοποιούν το πρότυπο μικροδεδομένων HTML και έχουν ήδη εφαρμοστεί από όσους αγαπούν τα eBay, IMDB, Rotten Tomatoes και άλλα.

Αυτό είναι το μεγαλύτερο άλμα προς την κατεύθυνση ενός πιο σημασιολογικού ιστού από χρόνια και παρόλα αυτά έγινε πίσω από κλειστές πόρτες με λίγα fanfare και χωρίς καθόλου πρότυπα επεξεργασίας. Είχε πέσει σε εμάς χωρίς προειδοποίηση και από τότε έτρεξε ως επί το πλείστον κάτω από το ραντάρ της κοινότητας σχεδιασμού ιστοσελίδων. Υπάρχουν πολλές αλληλεπικαλύψεις με τη σημασιολογία HTML5, για παράδειγμα υπάρχουν σχήματα για άρθρα , web σελίδες και τον ιστό στοιχεία σελίδας , ανάμεσα σε πολύ περισσότερα σχήματα που περιλαμβάνουν τα πάντα από Τηλεοπτικά επεισόδια προς την ιατρικές συνθήκες . Είναι επίσης το συνιστώμενο τρόπο περιγραφής βίντεο στο διαδίκτυο.

Μετά από όλη τη συζήτηση σχετικά με τη σημασιολογία της HTML (και την έλλειψή της), οι μηχανές αναζήτησης κατέστησαν σαφές ότι θέλουν πολύ περισσότερα σημασιολογικά δεδομένα στη σήμανσή μας, αλλά θα συμβεί πάνω από υπάρχουσες δομές και όχι με νέα στοιχεία.

Αλλά σίγουρα για εμάς ως κοινότητα που ενδιαφέρεται για τη σημασιολογία και τα πρότυπα του διαδικτύου, ούτε η περιορισμένη, ελαττωματική προσέγγιση της HTML στη σημασιολογία ούτε η κλειστή προσέγγιση των μεγάλων μηχανών αναζήτησης είναι η καλύτερη πορεία προς τα εμπρός.

Με κάποιες αισθήσεις, το άλογο σημασιολογίας HTML5 έχει βιδωθεί. εξαρτάται από εμάς να περιορίσουμε τις ζημιές. Όσον αφορά το schema.org, είναι ένας εντελώς νέος κόσμος και πρέπει να εξετάσουμε πολύ προσεκτικά ή μια άλλη μικρή ομάδα πρόκειται να καθορίσει ποιο είναι το συμφέρον μας για μας - και το διαδίκτυο - για μας. Στην πραγματικότητα, μπορεί να έχει συμβεί ήδη.

Συμπεράσματα

Ας ολοκληρώσουμε μερικά συμπεράσματα.

  • Οι επικεφαλίδες: πρώτον, πρέπει πραγματικά να ενδιαφέρουμε για τη δομή της επικεφαλίδας των σελίδων μας για να βοηθήσουμε τους τυφλούς χρήστες και τους χρήστες με προβλήματα όρασης να προσπαθούν να περάσουν με τους αναγνώστες οθόνης. Τα σεβάσμια στοιχεία h1-h6 μπορεί να είναι περιορισμένα, αλλά βασίζονται σε μεγάλο βαθμό από τους χρήστες της οθόνης.
  • Η δομή HTML5 είναι ένα χάος: θα πρέπει να αγνοήσουμε εντελώς τα δομικά στοιχεία HTML. Έχουν καταστεί μια καταστροφή - έχουμε ουσιαστικά περάσει το spec, δημιουργήσαμε πολλά σπασμένα περιγράμματα και χάσαμε πάρα πολύ χρόνο ήδη προσπαθώντας να βάλουμε τα κεφάλια μας γύρω από ένα ριζικά σπασμένο σύστημα. Μακρά live divs.
  • Εξετάστε τα ορόσημα της ARIA: προσθέτοντας ορόσημα ARIA στον ιστότοπό σας είναι ένας άλλος απλός και αποτελεσματικός τρόπος να βοηθήσετε τους χρήστες του προγράμματος ανάγνωσης οθόνης.
  • Εξετάστε το schema.org και το μέλλον της σημασιολογίας: το schema.org έχει την υποστήριξη των μεγάλων μηχανών αναζήτησης και ενώ είναι σίγουρα μια μικτή τσάντα αυτή τη στιγμή, φαίνεται να είναι μέλλον για δομημένα δεδομένα στο διαδίκτυο.

Υπάρχουν πολλά καλά μέρη στην προδιαγραφή HTML5, από νέες λειτουργίες μορφών στην εφαρμογή API ιστορικού και καμβά. Στην πραγματικότητα, χωρίς το WHATWG, που ήταν η κινητήρια δύναμη πίσω από το HTML5, θα εξακολουθούσαμε να είμαστε κολλημένοι με το HTML4 / XHTML 1.0, ενώ περιμέναμε το W3C να πάρει μαζί τους. Ωστόσο, μόνο και μόνο επειδή το HTML5 και όλη η σχετική τεχνολογία γύρω από αυτό είναι καινούργιο και συναρπαστικό, δεν σημαίνει ότι πρέπει να αποδεχτούμε όλα όσα μας δίνονται.

Μερικές φορές αξίζει να δούμε πώς γίνεται το λουκάνικο HTML, έτσι ξέρουμε τι τρώμε. Και στην περίπτωση της δομικής σημασιολογίας της HTML, προτιμώ να περάσω.

Πείνα για περισσότερα; Το βιβλίο του Luke "Η αλήθεια για το HTML5" διατίθεται για περιορισμένο χρονικό διάστημα μέσω του site μας αδελφών MightyDeals.com με ένα εκπληκτικό 50% έκπτωση.

Χρησιμοποιήσατε ορόσημα ARIA ή Schema.org; Βλέπετε ένα μέλλον για τα δομικά στοιχεία του HTML5; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, χρησιμοποιεί εικόνα δομής μέσω Shutterstock.