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

Σεμινάρια κειμένου σε HTML5

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

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

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

Έντυπο εγγράφου σε HTML5

Το περίγραμμα του εγγράφου είναι η δομή ενός εγγράφου HTML. Δείχνει πώς τα στοιχεία σχετίζονται μεταξύ τους. Το περίγραμμα του εγγράφου δημιουργήθηκε αποκλειστικά με στοιχεία χαρτογράφησης, όπως τίτλους, τίτλους πινάκων, τίτλους φόρμας και άλλους σε προηγούμενες εκδόσεις HTML όπως HTML4.01 και XHTML.

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

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

Υπάρχει ένα πέμπτο στοιχείο διαχωρισμού σε HTML5, αλλά δεν είναι καινούριο, είναι το ετικέτα. ο

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

Συμβουλές για σημασιολογικά δομημένο περιεχόμενο

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

1. Το εξωτερικό στοιχείο διατομής είναι πάντα το ετικέτα.

2. Οι ενότητες σε HTML5 μπορούν να ενσωματωθούν.

3. Κάθε τμήμα έχει τη δική του ιεραρχία τίτλων. Κάθε ένα από αυτά (ακόμη και το εσωτερικό εσώτερο τμήμα) μπορεί να έχει ένα h1 ετικέτα.

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

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

6. Τα τμήματα που ορίζονται από το

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

7. Κάθε τμήμα (σώμα, τμήμα, άρθρο, κατά μέρος, nav) μπορεί να έχει τη δική του

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

Παράδειγμα: Σημαντικό περίγραμμα

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

Και εδώ είναι ο κώδικας με την κατάλληλη σημασιολογική τομή:

  
 
Καλώς ήλθατε στην ιστοσελίδα μας!
 
Εδώ είναι το λογότυπο και το σύνθημά μας.
 
  
 
 
Τίτλος του άρθρου
 
Υπότιτλος του άρθρου
 
 
 
Πρώτο Λογικό Μέρος (π.χ. "Θεωρία")
 
Παράγραφος 1 στην πρώτη ενότητα
 
Κάποια άλλη υποδιαίρεση στην πρώτη ενότητα
 
Παράγραφος 2 στην πρώτη ενότητα
 
 
 
Δεύτερο Λογικό Μέρος (π.χ. "Πρακτική")
 
Παράγραφος 1 στο δεύτερο τμήμα
 
Η παράγραφος 2 στο δεύτερο τμήμα
 
  
    

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

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

Αν εισαγάγουμε το απόσπασμα κώδικα στη φόρμα που παρέχεται από το outliner και κάντε κλικ στο “Περιγράψτε αυτό!” , θα δούμε το ακόλουθο αποτέλεσμα:

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

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

Άλλες πτυχές της σημασιολογίας του ιστού

Οι σημασιολογικές σημαίες HTML και τα περιγράμματα εγγράφων είναι μόνο ένα μικρό μέρος της σημασιολογίας του ιστού. Το περιεχόμενο μιας ιστοσελίδας μπορεί να γίνει ακόμα πιο σημαντικό με τη βοήθεια του πρωτοκόλλου προσβασιμότητας WAI-ARIA και δομημένα δεδομένα που μπορούν να χρησιμοποιηθούν μαζί με το πρωτόκολλο RDFa, τα μικροδεδομένα ή τη σήμανση JSON-LD.