Γιατί δεν μπορούμε να χρησιμοποιήσουμε κανονικές ετικέτες div αντί για τις ετικέτες section και header;

Η χρήση των σημασιολογικών ετικετών <section> και <header> αντί του καθολικού <div> βελτιώνει την προσβασιμότητα και την αναγνωσιμότητα του κώδικα.

1. Προσβασιμότητα: Οι αναγνώστες οθόνης και άλλες τεχνολογίες βοηθείας χρησιμοποιούν σημασιολογικές ετικέτες για να κατανοήσουν τη δομή του περιεχομένου. Το <header> δηλώνει το εισαγωγικό μέρος (π.χ. λογότυπο, πλοήγηση), το <section> είναι ένα θεματικό μπλοκ. Το <div> από μόνο του δεν φέρει σημασιολογικό φορτίο.

2. SEO (Βελτιστοποίηση μηχανών αναζήτησης): Οι μηχανές αναζήτησης ευκολότερα ευρετηριάζουν το δομημένο περιεχόμενο με σημασιολογικές ετικέτες, κάτι που μπορεί να βελτιώσει την κατάταξη.

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

Συνοπτικά: Το <div> είναι κατάλληλο για ομαδοποίηση στοιχείων όταν η σημασιολογία δεν είναι σημαντική (π.χ. για εφαρμογή στυλ). Τα <section> και <header> φέρουν σημασιολογικό φορτίο και καθιστούν τις ιστοσελίδες πιο κατανοητές τόσο για μηχανές όσο και για ανθρώπους.

Παράδειγμα:

<!-- Σημασιολογικά σωστή δομή -->
<header>
  <h1>Όνομα ιστοτόπου</h1>
  <nav>
    <ul>
      <li><a href="#">Σύνδεσμος</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Τίτλος τμήματος</h2>
  <p>Περιεχόμενο τμήματος...</p>
</section>

<!-- Παράδειγμα χρήσης div, που δεν μεταφέρει σημασιολογία -->
<div> <!-- header; section; άγνωστο -->
  <h1>Όνομα ιστοτόπου</h1>
  <div> <!-- nav; -->
    <ul>
      <li><a href="#">Σύνδεσμος</a></li>
    </ul>
  </div>
</div>

<div> <!-- section; -->
  <h2>Τίτλος τμήματος</h2>
  <p>Περιεχόμενο τμήματος...</p>
</div>