Τι είναι τα σημασιολογικά στοιχεία σε HTML και ποιος…

Τα σημασιολογικά στοιχεία στο HTML είναι ετικέτες (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) που περιγράφουν τη σημασιολογική λειτουργία του περιεχομένου που περικλείουν, και όχι μόνο την εμφάνισή του.

Κύριος σκοπός:

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

Παράδειγμα μη σημασιολογικής σήμανσης:

<div>
  <h2>Τίτλος άρθρου</h2>
  <p>Περιεχόμενο άρθρου...</p>
</div>
<div>
  <h3>Πλευρική γραμμή</h3>
  <p>Πληροφορίες για την πλευρική γραμμή...</p>
</div>

Παράδειγμα σημασιολογικής σήμανσης:

<article>
  <h2>Τίτλος άρθρου</h2>
  <p>Περιεχόμενο άρθρου...</p>
</article>
<aside>
  <h3>Πλευρική γραμμή</h3>
  <p>Πληροφορίες για την πλευρική γραμμή...</p>
</aside>

Η χρήση σημασιολογικών στοιχείων συμβάλλει στη δημιουργία πιο δομημένων, προσβάσιμων και βελτιστοποιημένων για τις μηχανές αναζήτησης ιστοσελίδων.

Τι είναι τα σημασιολογικά στοιχεία σε HTML και ποιος είναι ο σκοπός τους;