Πότε πρέπει να χρησιμοποιείτε τις ετικέτες <div> και <span> στη σήμανση HTML;

Οι ετικέτες div και span είναι καθολία κοντέινερ που χρησιμοποιούνται για την ομαδοποίηση στοιχείων και την εφαρμογή στυλ.

• div (διαίρεση): Στοιχείο μπλοκ. Δημιουργεί μια νέα γραμμή πριν και μετά το περιεχόμενό του. Χρησιμοποιείται για την ομαδοποίηση μεγάλων τμημάτων περιεχομένου, όπως επικεφαλίδες, κύριο περιεχόμενο, υποσέλιδα, πλαϊνές μπάρες. Χρησιμοποιείται για τη δημιουργία της διάταξης της σελίδας με CSS.

• span: Ενδοσυνδεδεμένο στοιχείο. Δεν δημιουργεί νέα γραμμή. Χρησιμοποιείται για την ομαδοποίηση μικρών τμημάτων περιεχομένου μέσα σε μια γραμμή, όπως μεμονωμένες λέξεις ή φράσεις. Χρησιμοποιείται για την εφαρμογή στυλ σε ένα τμήμα κειμένου χωρίς να επηρεάζει τα γύρω στοιχεία.

Παράδειγμα χρήσης του div:

<!-- Ομαδοποίηση της ενότητας κεφαλίδας της ιστοσελίδας -->
<div class="header">
  <h1>Λογότυπο</h1>
  <nav>
    <ul>
      <li>Σύνδεσμος 1</li>
      <li>Σύνδεσμος 2</li>
    </ul>
  </nav>
</div>

<!-- Ομαδοποίηση του κύριου περιεχομένου -->
<div class="main-content">
  <article>
    <h2>Τίτλος άρθρου</h2>
    <p>Περιεχόμενο άρθρου...</p>
  </article>
</div>

Παράδειγμα χρήσης του span:

<p>Αυτό είναι ένα κανονικό κείμενο με <span class="highlight">επισημασμένη</span> λέξη.</p>

<style>
  .highlight {
    color: blue; /* Εφαρμογή στυλ μόνο στη λέξη "επισημασμένη" */
    font-weight: bold;
  }
</style>

Αυτές οι ετικέτες πρέπει να χρησιμοποιούνται με σημασιολογικά κατάλληλες κλάσεις ή αναγνωριστικά για καλύτερη αναγνωσιμότητα και συντήρηση του κώδικα, καθώς και για σκοπούς στυλ και χειρισμού DOM. Είναι σημαντικό να αποφεύγεται η υπερβολική χρήση των div και span, όπου πιο σημασιολογικές ετικέτες HTML5 (όπως header, footer, article, nav, section) είναι πιο κατάλληλες.