Πώς διαχωρίζουμε το περιεχόμενο σε μια σελίδα με σημασιολογικό τρόπο;

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

Κύριες σημασιολογικές ετικέτες:

• <header>: Εισαγωγή ή ομάδα πλοήγησης ή εισαγωγικών στοιχείων. Συχνά περιέχει τον τίτλο της ιστοσελίδας, πλοήγηση, λογότυπο.
• <nav>: Μπλοκ συνδέσμων πλοήγησης.
• <main>: Κύριο περιεχόμενο του εγγράφου. Πρέπει να είναι μοναδικό στη σελίδα (να μην διπλοτυπείται στο υποσέλιδο, την κεφαλίδα, τη πλαϊνή μπάρα).
• <article>: Αυτόνομο, ανεξάρτητο τμήμα περιεχομένου (άρθρο, ανάρτηση σε ιστολόγιο, σχόλιο).
• <section>: Ξεχωριστό τμήμα του εγγράφου (κεφάλαιο, παράγραφος, μπλοκ περιεχομένου στη αρχική σελίδα). Πρέπει να έχει τίτλο (<h1>-<h6>).
• <aside>: Μέρος του περιεχομένου που σχετίζεται έμμεσα με το κύριο περιεχόμενο (πλαϊνή γραμμή, απόσπασμα, διαφήμιση).
• <footer>: Υποσέλιδο τμήματος ή εγγράφου. Συνήθως περιέχει πληροφορίες σχετικά με τον συγγραφέα, πνευματικά δικαιώματα, συνδέσμους σε σχετικά έγγραφα.
• <figure>: Αυτόνομο περιεχόμενο (εικόνα, διάγραμμα, πίνακας), που μπορεί να μετακινηθεί από τη ροή του εγγράφου χωρίς να χάσει το νόημά του. Συχνά χρησιμοποιείται με <figcaption>.
• <figcaption>: Επισήμανση για το στοιχείο <figure>.
• <mark>: Επισημαίνει (σημειώνει) κείμενο που έχει ιδιαίτερη σημασία ή ενδιαφέρον στο πλαίσιο του περιβάλλοντος κειμένου.
• <time>: Αντιπροσωπεύει συγκεκριμένο χρόνο ή χρονική περίοδο.

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