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

Οι καινοτομίες της προδιαγραφής HTML5 είναι πολλές και πολλές από αυτές υποστηρίζονται ήδη από την πλειονότητα του τοπίου του προγράμματος περιήγησης - παρακάτω θέλω να επισημάνω μια ενδιαφέρουσα αλλαγή στους κανόνες για στοιχεία ένθεσης. Η HTML είχε πάντα διάκριση μεταξύ στοιχείων μπλοκ και ενσωματωμένων στοιχείων. Ο ορισμός τύπου εγγράφου του 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, αυτό δεν αποτελεί πλέον πρόβλημα.

Πίσω