Αντίο Block & Inline - Καλώς ορίσατε HTML5

Οι καινοτομίες της προδιαγραφής HTML5 είναι πολυάριθμες και πολλές από αυτές υποστηρίζονται ήδη από την πλειοψηφία του τοπίου του προγράμματος περιήγησης - παρακάτω θα ήθελα να επισημάνω μια ενδιαφέρουσα αλλαγή στους κανόνες για την ένθεση στοιχείων. Η HTML πάντα έκανε διάκριση μεταξύ μπλοκ και ενσωματωμένων στοιχείων. Για παράδειγμα, το Document Type Definition της HTML4 παραθέτει τα h1, p και div ως στοιχεία μπλοκ και τα a, span και img ως στοιχεία ενσωματωμένα.


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

Το HTML5 τώρα μαλακώνει αυτή τη διάκριση και ακόμη και ορίζει 9 διαφορετικές κατηγορίες στις οποίες ένα στοιχείο μπορεί να ανήκει, οπότε ένα στοιχείο μπορεί να είναι σε πολλές κατηγορίες. Η παλιά διάκριση μεταξύ μπλοκ και ενσωματωμένων στοιχείων ρίχνεται στη θάλασσα και λαμβάνεται υπόψη το πλήθος των σημασιών των ετικετών στον ιστό. Συγκεκριμένα, αυτό έχει ως συνέπεια ότι οι ακόλουθες κατασκευές αντιπροσωπεύουν έγκυρο κώδικα:

<a href="#">
   <div>
      <h1>Yeah</h1>
      <p>
         Der ganze Block ist verlinkt.
      </p>
   </div>
</a>

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

Πίσω