Μια σημαντική αρχή του κινήματος Web Standards που είναι υπεύθυνη για τη βιομηχανία που έχουμε σήμερα είναι η ιδέα της χρήσης στοιχείων HTML για αυτό που είναι και όχι πώς μπορεί να εμφανίζονται στο πρόγραμμα περιήγησης από προεπιλογή. Αυτό είναι γνωστό ως χρήση του Σημασιολογικού HTML.
Τι είναι το Σημασιολογικό HTML
Η σημασιολογική HTML ή σημασιολογική σήμανση είναι η HTML που εισάγει νόημα στην ιστοσελίδα παρά σε παρουσίαση. Για παράδειγμα, μια ετικέτα
υποδηλώνει ότι το συνημμένο κείμενο είναι μια παράγραφο.
Αυτό είναι τόσο σημασιολογικό όσο και παρουσιάσιμο, διότι οι άνθρωποι γνωρίζουν ποιες παραγράφους και οι φυλλομετρητές γνωρίζουν πώς να τις προβάλλουν.
Από την πλευρά της εξίσωσης αυτής, οι ετικέτες όπως και δεν είναι σημασιολογικές, επειδή ορίζουν μόνο τον τρόπο εμφάνισης του κειμένου (γραμμένο με έντονα γράμματα ή πλάγια γραφή) και δεν παρέχουν πρόσθετη σημασία στη σήμανση.
Παραδείγματα σημασιολογικών ετικετών HTML περιλαμβάνουν τις ετικέτες κεφαλίδας
έως , , και . Υπάρχουν πολλές περισσότερες σημασιολογικές ετικέτες HTML που μπορούν να χρησιμοποιηθούν καθώς δημιουργείτε έναν ιστότοπο συμβατό με τα πρότυπα.
Γιατί πρέπει να φροντίζετε για τη σημασιολογία
Το όφελος της γραφής της σημασιολογικής HTML πηγάζει από το τι πρέπει να είναι ο οδηγικός στόχος οποιασδήποτε ιστοσελίδας - η επιθυμία επικοινωνίας. Προσθέτοντας σημασιολογικές ετικέτες στο έγγραφό σας, παρέχετε πρόσθετες πληροφορίες σχετικά με αυτό το έγγραφο, το οποίο βοηθά στην επικοινωνία. Συγκεκριμένα, σημασιολογικές ετικέτες καθιστούν σαφές στο πρόγραμμα περιήγησης ποια είναι η έννοια μιας σελίδας και του περιεχομένου της.
Αυτή η σαφήνεια επικοινωνεί επίσης με τις μηχανές αναζήτησης, εξασφαλίζοντας ότι οι σωστές σελίδες παραδίδονται για τα σωστά ερωτήματα.
Οι σημασιολογικές ετικέτες HTML παρέχουν πληροφορίες σχετικά με το περιεχόμενο αυτών των ετικετών που ξεπερνούν ακριβώς το πώς φαίνονται σε μια σελίδα. Το κείμενο που περικλείεται στην ετικέτα αναγνωρίζεται αμέσως από το πρόγραμμα περιήγησης ως κάποιο είδος γλώσσας κωδικοποίησης.
Αντί να προσπαθήσουμε να κάνουμε αυτόν τον κώδικα, ο περιηγητής καταλαβαίνει ότι χρησιμοποιείτε αυτό το κείμενο ως παράδειγμα του κώδικα για τους σκοπούς ενός άρθρου ή ενός διαδικτυακού σεμιναρίου κάποιου είδους.
Η χρήση σημασιολογικών ετικετών σας δίνει πολλά περισσότερα άγκιστρα για να σχεδιάσετε το περιεχόμενό σας. Ίσως σήμερα προτιμάτε να εμφανίζονται τα δείγματα κώδικα στο προεπιλεγμένο στυλ του προγράμματος περιήγησης, αλλά αύριο θέλετε να τα καλέσετε με ένα γκρι χρώμα φόντου και αργότερα θέλετε να ορίσετε την ακριβή οικογένεια γραμματοσειρών γραμματοσειράς ή τη γραμματοσειρά που θέλετε να χρησιμοποιήσετε για τα δείγματα σας. Μπορείτε εύκολα να κάνετε όλα αυτά χρησιμοποιώντας τη σημασιολογική σήμανση και το έξυπνα εφαρμοσμένο CSS.
Χρησιμοποιήστε Σημασιολογικά Ετικέτες σωστά
Όταν θέλετε να χρησιμοποιήσετε σημασιολογικές ετικέτες για να μεταδώσετε σημασία και όχι για λόγους παρουσίασης, θα πρέπει να είστε προσεκτικοί ώστε να μην τις χρησιμοποιείτε εσφαλμένα απλά για τις κοινές ιδιότητες εμφάνισης τους. Ορισμένες από τις πιο συχνά χρησιμοποιούμενες σημασιολογικές ετικέτες περιλαμβάνουν:
- blockquote - Μερικοί άνθρωποι χρησιμοποιούν την ετικέτα για την εσοχή κειμένου που δεν είναι προσφορά. Αυτό οφείλεται στο γεγονός ότι τα blockquotes είναι χαραγμένα από προεπιλογή. Αν απλά θέλετε να επωφεληθείτε από την εσοχή, αλλά το κείμενο δεν είναι blockquote, χρησιμοποιήστε τα περιθώρια CSS.
- p - Ορισμένοι συντάκτες ιστού χρησιμοποιούν
& nbsp; (ένα μη διαχωριστικό χώρο που περιέχεται σε ένα paragraoph) για να προσθέσετε επιπλέον χώρο μεταξύ των στοιχείων της σελίδας, αντί να ορίσετε πραγματικές παραγράφους για το κείμενο αυτής της σελίδας. Όπως και με το προηγουμένως αναφερθέν παράδειγμα περικοπή, θα πρέπει να χρησιμοποιήσετε την ιδιότητα περιθωρίου ή παρεμβολής για να προσθέσετε χώρο.
- ul - Όπως blockquote, περικλείοντας κείμενο μέσα σε μια
ετικέτα περιγράφει αυτό το κείμενο στα περισσότερα προγράμματα περιήγησης. Αυτό είναι τόσο σημασιολογικά λανθασμένο όσο και άκυρο HTML, καθώς μόνο ετικέτες - είναι έγκυρες σε μια ετικέτα
. Και πάλι, χρησιμοποιήστε το περιθώριο ή το στυλ γεμίσματος για να προσθέσετε κείμενο.
- h1-h6 - Οι ετικέτες τίτλων μπορούν να χρησιμοποιηθούν για να κάνουν τις γραμματοσειρές μεγαλύτερες και πιο τολμηρές, αλλά αν το κείμενο δεν είναι επικεφαλίδα, δεν πρέπει να είναι μέσα σε μια ετικέτα επικεφαλίδας. Χρησιμοποιήστε τις ιδιότητες CSS για το μέγεθος γραμματοσειράς και μεγέθους γραμματοσειράς αν θέλετε να αλλάξετε το μέγεθος ή το βάρος συγκεκριμένου κειμένου στη σελίδα σας.
Χρησιμοποιώντας ετικέτες HTML που έχουν νόημα, δημιουργείτε σελίδες που μεταδίδουν περισσότερες πληροφορίες από ότι περιβάλλουν τα πάντα με ετικέτες
.
Ποιες ετικέτες HTML είναι σημασιολογικές;
Ενώ σχεδόν κάθε ετικέτα HTML4 και όλες οι ετικέτες HTML5 έχουν σημασιολογική σημασία, ορισμένες ετικέτες έχουν κυρίως σημασιολογική φύση.
Για παράδειγμα, το HTML5 έχει επαναπροσδιορίσει τη σημασία των ετικετών και για να είναι σημασιολογική. Η ετικέτα δεν μεταδίδει πρόσθετη σημασία, αλλά κείμενο που τυπικά εμφανίζεται με έντονους χαρακτήρες. Η ετικέτα δεν μεταφέρει επιπλέον σημασία ή έμφαση, αλλά ορίζει κείμενο που τυπικά εμφανίζεται με πλάγιους χαρακτήρες.
Σημασιολογικοί ετικέτες HTML
Συντομογραφία <ακρωνύμιο> Αρκτικόλεξο
Μεγάλη προσφορά Ορισμός <διεύθυνση> Διεύθυνση για το συντάκτη του εγγράφου Παραπομπή Αναφορά κωδικού Κείμενο teletype Λογική διαίρεση Γενικό εμπορευματοκιβώτιο τύπου inline Διαγράφηκε κείμενο Εισαγμένο κείμενο Εμφαση Μεγάλη έμφαση
Τίτλος πρώτου επιπέδου
Τίτλος δευτέρου επιπέδου
Τίτλος τρίτου επιπέδου
Τίτλος τέταρτου επιπέδου
Επικεφαλίδα 5ου επιπέδου
Τίτλος έκτου επιπέδου
Θεματικό διάλειμμα Κείμενο που θα εισαχθεί από το χρήστη
Προ-μορφοποιημένο κείμενο
Σύντομη εισαγωγική παραπομπή Έξοδος δείγματος Υπογεγραμμένος Υπερηφάνεια Κείμενο με μεταβλητή ή χρήστη
, και . Υπάρχουν πολλές περισσότερες σημασιολογικές ετικέτες HTML που μπορούν να χρησιμοποιηθούν καθώς δημιουργείτε έναν ιστότοπο συμβατό με τα πρότυπα.
Γιατί πρέπει να φροντίζετε για τη σημασιολογία
Το όφελος της γραφής της σημασιολογικής HTML πηγάζει από το τι πρέπει να είναι ο οδηγικός στόχος οποιασδήποτε ιστοσελίδας - η επιθυμία επικοινωνίας. Προσθέτοντας σημασιολογικές ετικέτες στο έγγραφό σας, παρέχετε πρόσθετες πληροφορίες σχετικά με αυτό το έγγραφο, το οποίο βοηθά στην επικοινωνία. Συγκεκριμένα, σημασιολογικές ετικέτες καθιστούν σαφές στο πρόγραμμα περιήγησης ποια είναι η έννοια μιας σελίδας και του περιεχομένου της.
Αυτή η σαφήνεια επικοινωνεί επίσης με τις μηχανές αναζήτησης, εξασφαλίζοντας ότι οι σωστές σελίδες παραδίδονται για τα σωστά ερωτήματα.
Οι σημασιολογικές ετικέτες HTML παρέχουν πληροφορίες σχετικά με το περιεχόμενο αυτών των ετικετών που ξεπερνούν ακριβώς το πώς φαίνονται σε μια σελίδα. Το κείμενο που περικλείεται στην ετικέτα αναγνωρίζεται αμέσως από το πρόγραμμα περιήγησης ως κάποιο είδος γλώσσας κωδικοποίησης.
Αντί να προσπαθήσουμε να κάνουμε αυτόν τον κώδικα, ο περιηγητής καταλαβαίνει ότι χρησιμοποιείτε αυτό το κείμενο ως παράδειγμα του κώδικα για τους σκοπούς ενός άρθρου ή ενός διαδικτυακού σεμιναρίου κάποιου είδους.
Η χρήση σημασιολογικών ετικετών σας δίνει πολλά περισσότερα άγκιστρα για να σχεδιάσετε το περιεχόμενό σας. Ίσως σήμερα προτιμάτε να εμφανίζονται τα δείγματα κώδικα στο προεπιλεγμένο στυλ του προγράμματος περιήγησης, αλλά αύριο θέλετε να τα καλέσετε με ένα γκρι χρώμα φόντου και αργότερα θέλετε να ορίσετε την ακριβή οικογένεια γραμματοσειρών γραμματοσειράς ή τη γραμματοσειρά που θέλετε να χρησιμοποιήσετε για τα δείγματα σας. Μπορείτε εύκολα να κάνετε όλα αυτά χρησιμοποιώντας τη σημασιολογική σήμανση και το έξυπνα εφαρμοσμένο CSS.
Χρησιμοποιήστε Σημασιολογικά Ετικέτες σωστά
Όταν θέλετε να χρησιμοποιήσετε σημασιολογικές ετικέτες για να μεταδώσετε σημασία και όχι για λόγους παρουσίασης, θα πρέπει να είστε προσεκτικοί ώστε να μην τις χρησιμοποιείτε εσφαλμένα απλά για τις κοινές ιδιότητες εμφάνισης τους. Ορισμένες από τις πιο συχνά χρησιμοποιούμενες σημασιολογικές ετικέτες περιλαμβάνουν:
- blockquote - Μερικοί άνθρωποι χρησιμοποιούν την ετικέτα για την εσοχή κειμένου που δεν είναι προσφορά. Αυτό οφείλεται στο γεγονός ότι τα blockquotes είναι χαραγμένα από προεπιλογή. Αν απλά θέλετε να επωφεληθείτε από την εσοχή, αλλά το κείμενο δεν είναι blockquote, χρησιμοποιήστε τα περιθώρια CSS.
- p - Ορισμένοι συντάκτες ιστού χρησιμοποιούν
& nbsp; (ένα μη διαχωριστικό χώρο που περιέχεται σε ένα paragraoph) για να προσθέσετε επιπλέον χώρο μεταξύ των στοιχείων της σελίδας, αντί να ορίσετε πραγματικές παραγράφους για το κείμενο αυτής της σελίδας. Όπως και με το προηγουμένως αναφερθέν παράδειγμα περικοπή, θα πρέπει να χρησιμοποιήσετε την ιδιότητα περιθωρίου ή παρεμβολής για να προσθέσετε χώρο.
- ul - Όπως blockquote, περικλείοντας κείμενο μέσα σε μια
ετικέτα περιγράφει αυτό το κείμενο στα περισσότερα προγράμματα περιήγησης. Αυτό είναι τόσο σημασιολογικά λανθασμένο όσο και άκυρο HTML, καθώς μόνο ετικέτες - είναι έγκυρες σε μια ετικέτα
. Και πάλι, χρησιμοποιήστε το περιθώριο ή το στυλ γεμίσματος για να προσθέσετε κείμενο.
- h1-h6 - Οι ετικέτες τίτλων μπορούν να χρησιμοποιηθούν για να κάνουν τις γραμματοσειρές μεγαλύτερες και πιο τολμηρές, αλλά αν το κείμενο δεν είναι επικεφαλίδα, δεν πρέπει να είναι μέσα σε μια ετικέτα επικεφαλίδας. Χρησιμοποιήστε τις ιδιότητες CSS για το μέγεθος γραμματοσειράς και μεγέθους γραμματοσειράς αν θέλετε να αλλάξετε το μέγεθος ή το βάρος συγκεκριμένου κειμένου στη σελίδα σας.
Χρησιμοποιώντας ετικέτες HTML που έχουν νόημα, δημιουργείτε σελίδες που μεταδίδουν περισσότερες πληροφορίες από ότι περιβάλλουν τα πάντα με ετικέτες
.
Ποιες ετικέτες HTML είναι σημασιολογικές;
Ενώ σχεδόν κάθε ετικέτα HTML4 και όλες οι ετικέτες HTML5 έχουν σημασιολογική σημασία, ορισμένες ετικέτες έχουν κυρίως σημασιολογική φύση.
Για παράδειγμα, το HTML5 έχει επαναπροσδιορίσει τη σημασία των ετικετών και για να είναι σημασιολογική. Η ετικέτα δεν μεταδίδει πρόσθετη σημασία, αλλά κείμενο που τυπικά εμφανίζεται με έντονους χαρακτήρες. Η ετικέτα δεν μεταφέρει επιπλέον σημασία ή έμφαση, αλλά ορίζει κείμενο που τυπικά εμφανίζεται με πλάγιους χαρακτήρες.
Σημασιολογικοί ετικέτες HTML
Συντομογραφία <ακρωνύμιο> Αρκτικόλεξο
Μεγάλη προσφορά Ορισμός <διεύθυνση> Διεύθυνση για το συντάκτη του εγγράφου Παραπομπή Αναφορά κωδικού Κείμενο teletype Λογική διαίρεση Γενικό εμπορευματοκιβώτιο τύπου inline Διαγράφηκε κείμενο Εισαγμένο κείμενο Εμφαση Μεγάλη έμφαση
Τίτλος πρώτου επιπέδου
Τίτλος δευτέρου επιπέδου
Τίτλος τρίτου επιπέδου
Τίτλος τέταρτου επιπέδου
Επικεφαλίδα 5ου επιπέδου
Τίτλος έκτου επιπέδου
Θεματικό διάλειμμα Κείμενο που θα εισαχθεί από το χρήστη
Προ-μορφοποιημένο κείμενο
Σύντομη εισαγωγική παραπομπή Έξοδος δείγματος Υπογεγραμμένος Υπερηφάνεια Κείμενο με μεταβλητή ή χρήστη