HTML: Σημασιολογική διάταξη. Σημασιολογική δομή για σελίδες HTML5. Σημασιολογία σε HTML5

Τώρα ας δώσουμε ένα παράδειγμα για το πώς η διάταξη div αντικαθίσταται από τη σημασιολογική διάταξη.

Ένα παράδειγμα τυπικής διάταξης:

Τίτλος ανάρτησης Κείμενο ανάρτησης

Αντικατάσταση με σημασιολογική:

Τίτλος ανάρτησης

Ανάρτηση κειμένου

Εδώ χρησιμοποιήσαμε ετικέτες σημασιολογικής διάταξης: ενότητα, άρθρο, h1, σελ.

Τα στυλ συνήθως γράφονται σε ξεχωριστό αρχείο (στην περίπτωση του WordPress στο style.css) ως εξής:

κεφαλίδα (πλάτος: 90%; περιθώριο: αυτόματη; ) h1 (στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 2em; ) nav (φόντο:#f1f1f1; χρώμα:#777; )

Στην περίπτωση μιας διάταξης με div, αυτή η περιγραφή θα μοιάζει με αυτό:

div.header( πλάτος: 90%; περιθώριο: αυτόματο; ) div.header span (στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 2em; ) div.menu (φόντο:#f1f1f1; χρώμα:#777; )

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

Για να κατανοήσουμε καλύτερα το σημερινό θέμα, ας εξετάσουμε μερικές ετικέτες που χρησιμοποιούνται στη σημασιολογική διάταξη στο html5. Και μετά βάλε τα στην πράξη.

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

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

— χωρίζει ένα έγγραφο ιστού σε σημασιολογικές ενότητες, είναι δυνατό να ενσωματωθεί μια ετικέτα ενότητας μέσα σε μια άλλη

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

— Η ετικέτα html5 για την πλοήγηση στον ιστότοπο τοποθετούνται σε αυτήν, αν και είναι αποδεκτή η χρήση πολλών ετικετών σε μια σελίδα

— ένα μπλοκ μη βασικού περιεχομένου, συνήθως μια πλαϊνή γραμμή (πλευρική γραμμή): διαφημιστικές ενότητες, κατηγορίες, ετικέτες κ.λπ.

Τώρα, γνωρίζοντας τις παραπάνω ετικέτες, ας δούμε πώς λειτουργούν στο παρακάτω παράδειγμα.

Γράφουμε τον ακόλουθο κώδικα στο πρόγραμμα επεξεργασίας ή στο Σημειωματάριο:

Πλοήγηση κεφαλίδας τοποθεσίας

• Σύνδεσμος 1
• Σύνδεσμος 2

Περιεχόμενο

Τώρα ας τρέξουμε το έγγραφο ως αρχείο html.

Στη συνέχεια πρέπει να ορίσουμε στυλ για κάθε στοιχείο. Στην περίπτωσή μας, θα προσθέσουμε μια ετικέτα με περιγραφές στο ήδη δημιουργημένο αρχείο html. Εάν κάνετε αλλαγές σε έναν ιστότοπο WordPress, προσθέστε αλλαγές στο αρχείο style.css.

Έτσι, η γενική εμφάνιση του αρχείου style.css θα είναι η εξής:

header( text-align:center; background:#FF0000; ) nav (float:right; width:300px; background:#3CB371;) ενότητα (float:right; margin:10px auto; πλάτος:1250px; background:#808080) ενότητα h1 ( color:#800000; padding:10px; text-align:center; ) article (float:left; width:595px; margin:5px; padding-left:5px; text-align:center; background:#800080; ) άρθρο h2 ( πλάτος:250 εικονοστοιχεία; περιθώριο: 10 εικονοστοιχεία αυτόματη; στοίχιση κειμένου: κέντρο; φόντο:#D2691E; ) υποσέλιδο ( καθαρό: και τα δύο; ύψος: 40 εικονοστοιχεία; συμπλήρωση: 10 εικονοστοιχεία; φόντο: #00FFFF; ) υποσέλιδο p ( γραμματοσειρά- μέγεθος: 14 εικονοστοιχεία;στοίχιση κειμένου:κέντρο)

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

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

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

• — αναπαραγωγή και διαχείριση βίντεο·
• — προσθήκη και διαχείριση ήχου στη σελίδα.
• — μια περιοχή για τη δημιουργία εικόνων και άλλων αντικειμένων Javascript.
• — ένα κουμπί ή διακόπτης μέσα σε μια ετικέτα.
• — δημιουργία μενού και κοντέινερ για την ετικέτα.
• — μια λίστα με τις διαθέσιμες επιλογές μετά την εισαγωγή σε ένα πεδίο κειμένου (ένα παράδειγμα μιας τέτοιας λίστας είναι οι συμβουλές Google).
• — ομαδοποίηση στοιχείων (για παράδειγμα, εικόνες με λεζάντες)·
• - ομαδοποίηση επικεφαλίδων και υποτίτλων·
• — σημασιολογική επισήμανση του κειμένου.
• — έξοδος τιμών σε ένα δεδομένο εύρος, συνήθως αριθμητικά δεδομένα.
• - προσθήκη σχολιασμού πάνω ή κάτω από το κύριο κείμενο (παράδειγμα - μεταγραφή κάτω από τις λέξεις).
• — εισαγωγή αρχείου ήχου ή βίντεο μέσα στις ετικέτες ήχου και βίντεο.
• — το κείμενο μέσα στην ετικέτα παίρνει την έννοια της ημερομηνίας και της ώρας·

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

Με την κατάλληλη αποφασιστικότητα, σίγουρα θα μπορέσετε να κατακτήσετε τις απαραίτητες γνώσεις. Πίστεψε στον εαυτό σου.

• Μετάφραση

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

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

Η HTML 5, την οποία το W3C διπλασίασε πρόσφατα τις προσπάθειές του για να διαμορφώσει την επόμενη γενιά HTML, έχει αποκτήσει σημαντική δυναμική τον περασμένο περίπου χρόνο. Αυτό είναι ένα τεράστιο έργο που καλύπτει όχι μόνο τη δομή HTML, αλλά και την ανάλυση μοντέλων, μοντέλα χειρισμού σφαλμάτων, DOM, αλγόριθμους για εξαγωγή πόρων, περιεχόμενο πολυμέσων, γραφικά 2D, πρότυπα δεδομένων, μοντέλα ασφαλείας, μοντέλα φόρτωσης σελίδων, αποθήκευση δεδομένων από την πλευρά του πελάτη και πολύ περισσότερο.

Υπάρχουν επίσης αλλαγές στη δομή, τη σύνταξη και τη σημασιολογία της HTML, μερικές από τις οποίες περιγράφηκαν από τον Lachlan Hunt στο άρθρο "HTML 5 Overview" ().

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

Το BBC ανακοίνωσε πρόσφατα ότι θα μειώσει την αναλογία της μικρομορφής hCalendar στον οδηγό τηλεοπτικών προγραμμάτων του, υπέρ της προσβασιμότητας και της ευκολίας του σχεδίου abbr. Αυτό δείχνει ότι έχουμε, χωρίς αμφιβολία, ωθήσει τις σημασιολογικές δυνατότητες της HTML πολύ πέρα ​​από αυτό που προοριζόταν ποτέ, και είναι πράγματι δυνατό για τη γλώσσα. Απλώς έχουμε εξαντληθεί τα στοιχεία και τα χαρακτηριστικά HTML που μπορούν να βελτιώσουν τη σημασιολογία ενός εγγράφου. Εάν συνεχίσουμε να εξαπατούμε με τις υπάρχουσες δομές HTML, θα προκύψουν όλο και περισσότερα προβλήματα όπως αυτό. Επειδή η HTML πάσχει από ένα θεμελιώδες ελάττωμα ως γλώσσα σημασιολογικής σήμανσης - η σημασιολογία της είναι σταθερή και όχι επεκτάσιμη.

Αυτό δεν είναι απλώς ένα θεωρητικό πρόβλημα. Εκατοντάδες χιλιάδες προγραμματιστές χρησιμοποιούν class και id για να δημιουργήσουν περισσότερη σημασιολογική σήμανση (τα χρησιμοποιούν επίσης ως "άγκιστρα" για στυλ CSS, αλλά αυτό είναι άλλο θέμα). Σχεδόν πάντα, αυτοί οι προγραμματιστές χρησιμοποιούν ειδικά λεξιλόγια των οποίων τις έννοιες δημιουργούν οι ίδιοι, αντί για τις έννοιες των υπαρχόντων σχημάτων. Πρόκειται για ψευδοσημασιολογική σήμανση - στην καλύτερη περίπτωση.

Πολλές σελίδες στο Διαδίκτυο χρησιμοποιούν μικρομορφές για να προσθέσουν περισσότερη δομημένη σημασιολογία από ό,τι είναι δυνατό με το φτωχό σύνολο στοιχείων και χαρακτηριστικών της HTML. Σε αυτήν την περίπτωση, οι τιμές που χρησιμοποιούνται για το χαρακτηριστικό class είναι συνεπείς με λεξιλόγια, μερικές φορές λαμβάνονται από άλλα πρότυπα όπως το vCard, μερικές φορές από λεξιλόγια που δημιουργήθηκαν πρόσφατα όπου δεν υπάρχει άκαμπτο υπάρχον πρότυπο (όπως συμβαίνει με το hReview).

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

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

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

Πώς θα λύσει λοιπόν αυτό το ζήτημα η HTML 5; Η HTML 5 εισάγει μια σειρά από νέα στοιχεία. Κάλεσα κάποιο "δομικό" - τμήμα, πλοήγηση, πλάι, κεφαλίδα και υποσέλιδο. Το στοιχείο διαλόγου είναι παρόμοιο σε τύπο και περιεχόμενο με το blockquote. Υπάρχει επίσης ένας αριθμός στοιχείων δεδομένων, όπως ο μετρητής, ο οποίος είναι "μια βαθμωτή μέτρηση εντός ενός γνωστού εύρους ή μια κλασματική τιμή, όπως η χρήση του δίσκου". και ένα στοιχείο ώρας (http://www.w3.org/html/wg/html5/#the-time), το οποίο αντιπροσωπεύει μια ημερομηνία και/ή ώρα.

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

Ας δούμε κάθε εμπόδιο

Τμήμα (χρώμα: κόκκινο)
... Τα περισσότερα από τα προγράμματα περιήγησης που αναφέρονται το διαχειρίζονται αυτό, αλλά ο IE7 (και ειδικά το 6) δεν το κάνει.

Επομένως, έχουμε πρόβλημα συμβατότητας με το 75% των προγραμμάτων περιήγησης που χρησιμοποιούνται αυτήν τη στιγμή. Λαμβάνοντας υπόψη τον χρόνο ημιζωής του Internet Explorer, μπορούμε να προβλέψουμε ότι η πλειοψηφία των χρηστών θα χρησιμοποιεί IE6 και IE7, ακόμη και σε λίγα χρόνια.

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

Ας δούμε τη συμβατότητα από κάτω προς τα πάνω, που είναι το επόμενο ζήτημα.

Προσθέτοντας αυτά τα στοιχεία, εξετάζουμε την ανάγκη να αυξήσουμε τις δυνατότητες της σημασιολογίας HTML, αλλά μόνο σε ένα στενό πεδίο. Ανεξάρτητα από το πόσα στοιχεία εισάγουμε, πάντα θα σκεφτόμαστε να προσθέσουμε περισσότερη σημασιολογία HTML. Και προσθέτοντας όσα στοιχεία θέλουμε δεν θα λύσουμε το πρόβλημα. Δεν χρειάζεται να προσθέσουμε συγκεκριμένους όρους στο λεξιλόγιο HTML, πρέπει να προσθέσουμε έναν μηχανισμό που να επιτρέπει την επέκταση της σημασιολογίας του εγγράφου όπως απαιτείται. Σε τεχνικούς όρους, πρέπει να κάνουμε την HTML επεκτάσιμη. Η HTML 5 δεν προσφέρει μηχανισμό επεκτασιμότητας.

Έτσι, η HTML 5 εκτελεί μια λειτουργία που θα σκοτώσει ένα σημαντικό ποσοστό των σύγχρονων προγραμμάτων περιήγησης και θα αποτρέψει την προσθήκη γλωσσικής σημασιολογίας.

Έχω ακόμα μερικές ερωτήσεις σχετικά με τα νέα στοιχεία. Από πού προήλθαν τα ονόματα των νέων στοιχείων; Πώς αποφασίστηκε ότι το στοιχείο πλοήγησης θα έπρεπε να ονομάζεται "nav"; Γιατί χρησιμοποιούνται οι όροι σε επίπεδο σελίδας, σε επίπεδο τοποθεσίας και σε επίπεδο μετα-ιστοτόπου στην πλοήγηση;

Γιατί να μην υιοθετήσετε ένα υπάρχον λεξικό όπως το DocBook; Το λεξιλόγιο της δομής των εγγράφων του είναι πλουσιότερο και έχει αναπτυχθεί μέσα από δημοσιεύσεις ειδικών όλα αυτά τα χρόνια. Αυτό δεν είναι επιχείρημα υπέρ του DocBook, αλλά το θέμα είναι ότι το εξαιρετικά σημαντικό έργο της προετοιμασίας ενός μηχανισμού για την παροχή σημασιολογίας HTML πραγματοποιείται με λίγη προσοχή στην πρακτική σε εργασία που ξεκίνησε πριν από περισσότερα από 30 χρόνια. (Η αρχική εργασία για το GML ξεκίνησε στις αρχές της δεκαετίας του 1970)

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

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

Ας δούμε πώς το εκτιμούν τα προγράμματα περιήγησής μας.

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

Div (χρώμα: κόκκινο)
Τι λες για αυτό:

Div (βάρος γραμματοσειράς: έντονη γραφή)
Στην πραγματικότητα, σχεδόν όλα τα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE7, θα αντιμετωπίζουν ένα στυλ div με ένα χαρακτηριστικό δομής, ακόμα κι αν δεν υπάρχει τέτοιο χαρακτηριστικό. Δυστυχώς, η ευτυχία μας εξαφανίζεται επειδή δεν υπάρχει IE6. Αλλά μπορούμε να χρησιμοποιήσουμε αυτό το χαρακτηριστικό σε HTML και όλα τα υπάρχοντα προγράμματα περιήγησης θα το αναγνωρίσουν. Μπορούμε ακόμη να χρησιμοποιήσουμε στυλ CSS για το HTML μας, χρησιμοποιώντας το χαρακτηριστικό σε όλα τα σύγχρονα προγράμματα περιήγησης. Και αν θέλουμε να παρακάμψουμε παλαιότερα προγράμματα περιήγησης, μπορούμε να προσθέσουμε μια κλάση με τιμή στυλ. Σε σύγκριση με τη λύση HTML 5, η οποία προσθέτει νέα στοιχεία που δεν λειτουργούν στον Internet Explorer 6 ή 7, βλέπουμε ότι αυτή είναι σίγουρα μια πιο συμβατή λύση.

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

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

Για παράδειγμα, το χαρακτηριστικό ρόλος XHTML λειτουργεί ως εξής:

* Αυτός ο πηγαίος κώδικας επισημάνθηκε με το εργαλείο επισήμανσης πηγαίου κώδικα.

Γιατί να μην αποδεχτείτε το χαρακτηριστικό ρόλο ως έχει; Άλλωστε, υπάρχουν και άλλα είδη σημασιολογίας για τα οποία δεν ισχύει ο ορισμός του ρόλου. Για παράδειγμα:

Είναι ένας φανταστικός άνθρωπος.

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

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

Τίτλωσα αυτήν την ενότητα «Κάποιες ιδέες λύσεων» επειδή πρέπει να γίνει σημαντικός όγκος εργασίας προκειμένου να δημιουργηθεί μια πραγματικά εφαρμόσιμη λύση. Οι ανοιχτές ερωτήσεις περιλαμβάνουν τα ακόλουθα.

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

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

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

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

Ετικέτες:

• html 5
• xhtml
• σημασιολογία
• προγράμματα περιήγησης

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

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

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

Ας ρίξουμε μια πιο προσεκτική ματιά στα στοιχεία που χρησιμοποιήθηκαν στη διάταξη:

Δυστυχώς, ο παρουσιαζόμενος κώδικας CSS δεν θα μπορεί να βοηθήσει τον Internet Explorer 8 και τις προηγούμενες εκδόσεις του να εμφανίζουν σωστά τα σημασιολογικά στοιχεία. Για να χειριστούμε σωστά τα νέα σημασιολογικά στοιχεία σε όλες τις παλαιότερες εκδόσεις του IE, θα πρέπει να καταφύγουμε στη JavaScript. Απλώς προσθέστε τον ακόλουθο κώδικα στο στοιχείο και οι παλαιότερες εκδόσεις του IE θα χειριστούν σωστά τα νέα στοιχεία:

document.createElement("τμήμα"); document.createElement("κεφαλίδα"); document.createElement("nav"); document.createElement("άρθρο"); document.createElement("aside"); document.createElement("footer");

Με λίγη προσπάθεια μπορούμε να κάνουμε τη σήμανση πιο εκφραστική.

Αλλά γιατί να ξοδέψετε επιπλέον χρόνο και πόρους για την παροχή σημασιολογίας HTML; Οι περισσότεροι χρήστες δεν διαβάζουν το HTML σας. Και νοιάζονται μόνο για το τι συμβαίνει στην οθόνη.

Το Semantic HTML είναι μόνο για μηχανές. Δεν είναι τόσο έξυπνοι όσο εσείς και εγώ, οπότε πρέπει να τους βοηθήσουμε.

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

Δείτε τι λέει η Google σχετικά με τη χρήση σημασιολογικού HTML (οι καταχωρήσεις μου με πλάγια γράμματα):

Η Google (και άλλες μηχανές αναζήτησης) μπορεί να χρησιμοποιήσει αυτά τα δεδομένα για καλύτερη ευρετηρίαση περιεχομένου, να το παρουσιάσει πιο εμφανή στα αποτελέσματα αναζήτησης και να το χρησιμοποιήσει με νέους τρόπους, όπως φωνητικές απαντήσεις, χάρτες και Google Now.

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

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

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

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

Κοιτάξτε το πρότυπο παρακάτω.

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

Η σήμανση HTML του προτύπου χρησιμοποιεί σημασιολογικά στοιχεία (π.χ. άρθρο, κεφαλίδα και υποσέλιδο).

Χρησιμοποιεί επίσης τη σήμανση δομημένων δεδομένων Schema.org. Ειδικότερα, τα διαγράμματα και η ιστοσελίδα. Το Schema.org είναι ένα κοινό έργο μεταξύ της Google, της Bing και της Yahoo!. Ο στόχος του έργου είναι να παρέχει έναν τρόπο στις μηχανές αναζήτησης να κατανοούν καλύτερα το περιεχόμενο των σελίδων.

Ακολουθεί ένα ολοκληρωμένο παράδειγμα:

Τίτλος σελίδας άρθρου Τίτλος άρθρου 12 Νοεμβρίου 1990

Γραπτός Όνομα συγγραφέα

Το κύριο μέρος του άρθρου πηγαίνει εδώ.

Αυτό το άρθρο ενημερώθηκε στις 30 Μαρτίου 2015

Σχετικά Άρθρα

Άλλα σχετικά άρθρα

Ας μιλήσουμε για τα διάφορα μέρη ενός προτύπου HTML.

Ένα στοιχείο HTML έχει τέσσερα χαρακτηριστικά:

• Itemcope υποδεικνύει ότι το σχήμα Item χρησιμοποιείται σε όλο το έγγραφο.
• itemtype περιέχει τη διεύθυνση του σχήματος που θα χρησιμοποιηθεί.
• Το lang παρέχει πληροφορίες σχετικά με τη γλώσσα στην οποία είναι γραμμένο το περιεχόμενο της σελίδας. Το W3C λέει ότι πρέπει να χρησιμοποιήσουμε τις ετικέτες γλώσσας που αναφέρονται στο Μητρώο υποετικέτας γλώσσας IANA. Για παράδειγμα, εάν η σελίδα είναι γραμμένη στα γερμανικά, θα ορίσουμε το χαρακτηριστικό land σε de .
• Το dir περιέχει πληροφορίες σχετικά με την κατεύθυνση του κειμένου του άρθρου. Έχετε δύο επιλογές. Είτε από αριστερά προς τα δεξιά (ltr) είτε από δεξιά προς τα αριστερά (rtl). Εάν θέλετε το πρόγραμμα περιήγησης να το αποφασίσει για εσάς, μην το χρησιμοποιήσετε.

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

Το BBC χρησιμοποιεί μια συνοδευτική πρόταση για όλα τα άρθρα του.

Το πρότυπο χρησιμοποιεί μικροδεδομένα για να βελτιώσει τη σημασιολογική δομή HTML.

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

Παρακάτω είναι μια σύντομη περιγραφή των μικροδεδομένων που χρησιμοποιούνται στο πρότυπο HTML.