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

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

Η σημασιολογία είναι για το νόημα

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

"Ο άνθρωπος έριξε τον υπολογιστή από το παράθυρο."

Η σημασιολογία σχετίζεται με την πτυχή της φράσης που επιτρέπει στους ανθρώπους που το διαβάζουν να κατανοούν το μήνυμα που περιέχεται σε αυτό. Μαζί με τη σύνταξη, η σημασιολογία είναι ένα μεγάλο μέρος αυτού που διευκολύνει την επικοινωνία μέσω της γλώσσας. Όταν μιλάμε για σημασιολογία σε σχέση με την HTML, μιλάμε για επικοινωνία μεταξύ προγραμμάτων ηλεκτρονικών υπολογιστών και όχι ανθρώπων. Η σημασιολογική HTML αποσκοπεί ουσιαστικά στην ενίσχυση της έκτασης στην οποία οι εφαρμογές μπορούν να επεξεργάζονται ή να ερμηνεύουν περιεχόμενο στο Web. Για παράδειγμα, εξετάστε το ακόλουθο απόσπασμα ιστοσελίδας που περιέχει μερικές από τις πιο μακροχρόνιες δομές HTML:

The man threw the computer through the window.

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

Οι δομές HTML έχουν ήδη νόημα

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

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

Θυμηθείτε όταν ξεκινήσαμε να διαχωρίζουμε το περιεχόμενο από το ύφος;

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

Για παράδειγμα, αντικαταστήσαμε την ετικέτα i με em, η οποία είναι πιο σημαντική και δεν λέει στο πρόγραμμα περιήγησης πώς ακριβώς να εμφανίζεται το κείμενο μέσα στο στοιχείο. Ο σκοπός της χρήσης του em αντί του i είναι να μεταφέρει πληροφορίες σχετικά με τη φύση του αντικειμένου περιεχομένου, παρά πληροφορίες σχετικά με το στυλ του. Το em επηρεάζει φυσικά το στυλ, ο οποίος είναι ο κύριος λόγος για τον οποίο το χρησιμοποιούμε, αφήνει όμως τις λεπτομέρειες του στυλ μέχρι το browser και / ή τον κώδικα CSS να διαχωρίζεται ιδανικά από τη σήμανση σελίδας.

Η σημασιολογική HTML5 είναι ένα μεγαλύτερο βήμα σε αυτή τη διαδικασία. Ο απώτερος στόχος είναι να δημιουργηθεί ένα σύστημα στο οποίο οι εφαρμογές έχουν πρόσβαση σε ένα μεγαλύτερο επίπεδο σημασίας - αυτό δεν είναι AI, όμως, πρόκειται απλώς για τη συμπερίληψη περιγραφικών πληροφοριών για στοιχεία δεδομένων μέσα στις δομές κώδικα που τα μοντελοποιούν.

Δεν είναι αυτό παρόμοιο με το XML;

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

Jim Smith23 November 2012

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

Παρεμπιπτόντως, υπάρχουν διαφορετικοί τύποι νοήματος

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

Η ετικέτα img έχει νόημα στο ότι λέει κάτι σχετικά με το περιεχόμενο, περιγράφοντας το τι είναι.

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

Πώς όλα αυτά σχετίζονται με τον κώδικα HTML5;

Έτσι τι συνεπάγεται αυτή η βελτιωμένη ουσιαστική πτυχή της HTML5; Ουσιαστικά το HTML5 έχει μερικά νέα στοιχεία με τα οποία μπορείτε να συμπεριλάβετε περισσότερες σημασιολογικές πληροφορίες στη σήμανση σελίδας σας. Υπάρχει ένα φορτίο νέων στοιχείων, μόνο μερικά από τα οποία θα εξετάσουμε εδώ. Η ετικέτα κεφαλίδας δηλώνει πληροφορίες σχετικά με το περιεχόμενο του στοιχείου και σχετικά με το ρόλο του στη δομή της σελίδας:

Man in Window Outburst

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

Η ετικέτα nav περιγράφει το σκοπό μιας ενότητας σελίδας, δηλαδή ότι περιέχει συνδέσμους πλοήγησης:

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

What happened
Police officers apprehended the man at 3.30pm...

Το στοιχείο του άρθρου είναι παρόμοιο, το οποίο χρησιμοποιείται για τον ορισμό ενός στοιχείου που είναι αυτοτελές:

The Law
The law on throwing items through windows is very clear...

Μια ετικέτα στην άκρη δείχνει το ρόλο ενός στοιχείου σχετικά με το περιεχόμενό του μέσα στη σελίδα, όπως στην ακόλουθη εκτεταμένη έκδοση του παραπάνω άρθρου:

The Law
The law on throwing items through windows is very clear...

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

Σκεφτείτε μερικές από τις παλιότερες ετικέτες (πολλές από τις οποίες είναι ακόμα γύρω), όπως το div. Το στοιχείο div είναι απλά ένα κομμάτι μιας σελίδας - το όνομα της ετικέτας μας λέει απολύτως τίποτα για το περιεχόμενο του στοιχείου ή του ρόλου του μέσα στη σελίδα. Με άλλα λόγια, η ετικέτα αποδίδει πολύ λίγη σημασία. Πολλές από τις μακροχρόνιες ετικέτες δεν μεταφέρουν ουσιαστικά καθόλου νόημα ή, σε ορισμένες περιπτώσεις, γενικό, χαλαρά καθορισμένο νόημα. Κάθε στοιχείο σε μια ιστοσελίδα περιλαμβανόταν σε ένα από ένα σύνολο κατηγοριών πολύ γενικών στοιχείων. Το κλειδί για να κάνουμε κάτι ουσιαστικό είναι συγκεκριμένο. Οι νέες ετικέτες HTML5 μας επιτρέπουν να ορίζουμε το περιεχόμενο Ιστού χρησιμοποιώντας πιο συγκεκριμένους όρους.

Ήδη προσθέσατε νόημα στο markup σας;

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

Γιατί κάνουμε όλα αυτά;

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

• Η δυνατότητα αναζήτησης έχει ρυθμιστεί ώστε να μετασχηματίζεται με την πρόοδο της σημασιολογίας Web. Η σημασιολογική σήμανση κάνει πιο εύκολη την αναζήτηση περιεχομένου / δεδομένων. οι ιστοσελίδες, φυσικά, δεν προβάλλονται απλά στο πρόγραμμα περιήγησης στο Web, αλλά υποβάλλονται επίσης σε επεξεργασία από άλλα προγράμματα όπως τα ρομπότ των μηχανών αναζήτησης. Δεδομένου ότι η σημασιολογική σήμανση έχει σχεδιαστεί για να επιτρέπει στις εφαρμογές να ερμηνεύουν ιστοσελίδες με πιο ουσιαστικούς τρόπους, αυτό θα πρέπει τελικά να βελτιώσει την ποιότητα των λειτουργιών αναζήτησης / ερωτήματος κατά ένα σημαντικό ποσό. Στο συχνά συνηθισμένο "όνειρο" του Tim Berners-Lee για τον Ιστό, οι υπολογιστές θα μπορούσαν να αναλύσουν όλα τα δεδομένα στο διαδίκτυο - κάτι που μπορεί να απέχει πολύ, αλλά η σημασιολογική ώθηση του HTML5 είναι παρακινημένη από αυτόν τον τύπο μακροπρόθεσμου στόχου .
• Η προσβασιμότητα είναι ένα από τα βασικά πλεονεκτήματα της σημασιολογικής σήμανσης. Τα εργαλεία προσβασιμότητας μπορούν να επωφεληθούν εξαιρετικά από την πιο ουσιαστική πρόσβαση στο περιεχόμενο Ιστού. Τέτοια εργαλεία περιλαμβάνουν πρόσθετα προγραμμάτων περιήγησης για χρήστες με περιορισμένη όραση, ακοή, μαθησιακές δυσκολίες και ούτω καθεξής. Η σημασιολογική σήμανση καθιστά πιο εφικτή μια εφαρμογή για την επεξεργασία του περιεχομένου ιστού και το αποτέλεσμα να κοινοποιεί το αρχικό μήνυμα στον χρήστη με τρόπο που ταιριάζει στις ανάγκες του. Αυτή η ιδέα εκτείνεται πέρα ​​από την προσβασιμότητα και στις σφαίρες της ευελιξίας των συσκευών, μέσω τεχνικών όπως η ανταποκρινόμενη σχεδίαση. Το αποτέλεσμα είναι μια πιο συνεκτική προσέγγιση για την παροχή περιεχομένου ιστού.
• Η συνέπεια πρέπει να είναι ένας πραγματικός ευεργέτης της σημασιολογικής HTML5. Η σημασιολογική σήμανση βελτιώνει τη συνέπεια, καθώς τα στοιχεία περιεχομένου είναι πιο λογικά επιτρεπόμενα σε συγκεκριμένους τύπους στοιχείων. Αυτό έρχεται σε αντίθεση με τα παλαιότερα μοντέλα, στα οποία τα στοιχεία θα μπορούσαν συχνά να περιέχονται σε οποιοδήποτε από τα διάφορα είδη στοιχείων - η επιλογή ενός δεν ήταν δείκτης της φύσης του περιεχομένου ή του ρόλου του μέσα στη σελίδα, ήταν απλώς μια αντανάκλαση της επιλογής του προγραμματιστή. Με τη σημασιολογική σήμανση, το πιο συγκεκριμένο επίπεδο σημασίας καθιστά αυτές τις επιλογές λιγότερο ελεύθερες, αλλά τα αποτελέσματα είναι εγγενώς πιο αξιόπιστα όταν πρόκειται για ερμηνεία είτε από το πρόγραμμα περιήγησης είτε από άλλες εφαρμογές.

Οι προγραμματιστές κινητοποιούν την πρόοδο των τεχνολογιών Web

Όταν ήμουν στο uni (πριν από μερικά χρόνια) θυμάμαι έναν λέκτορα που μας λέει ότι ο τομέας της ακαδημαϊκής έρευνας επρόκειτο να ξεσηκωθεί από τις εξελίξεις στην αναζήτηση. Μιλούσε για τον Σημασιολογικό Ιστό - είναι περιττό να πούμε ότι δεν έχει συμβεί ακόμα. Λαμβάνοντας κάθε είδους επικεντρωμένη νέα κατεύθυνση με κάτι τόσο διαφορετικό και ακανόνιστο όσο το World Wide Web θα είναι πάντα δύσκολο έργο. Παρόλα αυτά, με την ενσωμάτωση με την έννοια της σημασιολογικής σήμανσης τουλάχιστον, εμείς ως προγραμματιστές μπορούμε να δράσουμε για να επηρεάσουμε την κίνηση προς ένα μελλοντικό ιστό που είναι πιο προσβάσιμο, αναζητήσιμο και συνεκτικό, για όλους τους χρήστες.

Χρησιμοποιείτε σημασιολογικά στοιχεία του HTML5; Η εστίαση στη σημασιολογία παράγει ένα προϊόν υψηλότερης ποιότητας; Ενημερώστε μας τι πιστεύετε στα σχόλια.

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