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

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

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

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

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

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

• Ετικέτες κεφαλίδας

   διά μέσου

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

Γιατί πρέπει να ενδιαφέρεστε για τη σημασιολογία

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

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

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

Χρησιμοποιώντας σωστά τις σημασιολογικές ετικέτες

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

• μπλοκ - Μερικοί άνθρωποι χρησιμοποιούν το ετικέτα για εσοχή κειμένου που δεν είναι εισαγωγικά. Αυτό συμβαίνει επειδή τα μπλοκ εισαγωγικά είναι εσοχή από προεπιλογή. Εάν θέλετε απλώς να εσοχή κειμένου που δεν είναι blockquote, χρησιμοποιήστε τα περιθώρια CSS.
• Π - Χρησιμοποιούν ορισμένοι συντάκτες ιστού (ένας μη σπάσιμος χώρος που περιέχεται σε μια παράγραφο) για να προσθέσετε επιπλέον χώρο μεταξύ των στοιχείων της σελίδας, αντί να ορίσετε πραγματικές παραγράφους για το κείμενο αυτής της σελίδας. Όπως και στο προηγούμενο παράδειγμα, θα πρέπει να χρησιμοποιήσετε την ιδιότητα περιθωρίου ή στυλ επένδυσης για να προσθέσετε χώρο.
• Ουλ - Οπως και με

  , επισυνάπτοντας κείμενο μέσα σε ένα

   η ετικέτα εσοχή αυτού του κειμένου στα περισσότερα προγράμματα περιήγησης. Αυτό είναι τόσο σημασιολογικά λανθασμένο όσο και μη έγκυρο HTML, επειδή μόνο
  •  Οι ετικέτες είναι έγκυρες εντός ενός
    ετικέτα. Και πάλι, χρησιμοποιήστε το στυλ περιθωρίου ή γεμίσματος για να εσοχή κειμένου.
  • h1, h2, h3, h4, h5 και h6 - Μπορείτε να χρησιμοποιήσετε ετικέτες κεφαλίδας για να κάνετε τις γραμματοσειρές μεγαλύτερες και πιο τολμηρές, αλλά αν το κείμενο δεν είναι επικεφαλίδα, χρησιμοποιήστε τις ιδιότητες CSS-weight και font-size.

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

   ετικέτες.

  Ποιες ετικέτες HTML είναι σημασιολογικές;

  Αν και σχεδόν κάθε ετικέτα HTML4 και όλα τα HTML5 Οι ετικέτες έχουν σημασιολογικές έννοιες, μερικές ετικέτες είναι πρωτίστως σημασιολογικός.

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

  Σημασιολογικές ετικέτες HTML

  Συντομογραφία
  Αρκτικόλεξο
  Μεγάλη προσφορά
  Ορισμός
  Διεύθυνση για συγγραφείς του εγγράφου
  Παραπομπή
  Κωδικός αναφοράς
  Κείμενο Teletype
  Λογική διαίρεση
  Γενικό κοντέινερ inline style
  Διαγραμμένο κείμενο
  Έγινε εισαγωγή κειμένου
  Εμφαση
  Ισχυρή έμφαση
  Επικεφαλίδα πρώτου επιπέδου
  Επικεφαλίδα δευτέρου επιπέδου
  Τίτλος τρίτου επιπέδου
  Τίτλος τετάρτου επιπέδου
  Επικεφαλίδα πέμπτου επιπέδου
  Επικεφαλίδα έκτου επιπέδου
  	Θεματικό διάλειμμα
  Κείμενο που θα εισαχθεί από τον χρήστη
  Προ-μορφοποιημένο κείμενο
  Σύντομη ενσωματωμένη προσφορά
  Παραγωγή δείγματος
  Υπογεγραμμένος
  Υπερκείμενο
  Κείμενο μεταβλητό ή καθορισμένο από τον χρήστη