Τι είναι το Σημασιολογικό HTML και γιατί πρέπει να το χρησιμοποιήσετε

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

Τι είναι το Σημασιολογικό HTML

Η σημασιολογική HTML ή σημασιολογική σήμανση είναι η HTML που εισάγει νόημα στην ιστοσελίδα παρά σε παρουσίαση. Για παράδειγμα, α

Η ετικέτα υποδεικνύει ότι το συνημμένο κείμενο είναι μια παράγραφο.

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

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

Παραδείγματα σημασιολογικών ετικετών HTML περιλαμβάνουν τις ετικέτες κεφαλίδας

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