Goodbye Block & Inline - Witamy HTML5

Innowacji specyfikacji HTML5 jest wiele i wiele z nich jest już obsługiwanych przez większość krajobrazu przeglądarek - poniżej chciałbym zwrócić uwagę na ciekawą zmianę w zasadach zagnieżdżania elementów. HTML zawsze rozróżniał elementy blokowe i wbudowane. Na przykład definicja typu dokumentu HTML4 zawiera h1, p i div jako elementy blokowe oraz a, span i img jako elementy wbudowane.


Ta koncepcja została teraz porzucona (nie bez powodu). W niektórych przypadkach wielu projektantów stron internetowych zignorowało poprawność wspomnianej reguły zagnieżdżania, zgodnie z którą żadne elementy blokowe nie mogą znajdować się w elementach wbudowanych, lub standardowe zachowanie przy użyciu reguł CSS, takich jak display: inline; lub display: block; (co często prowadziło do nieprawidłowego kodu) bez zbędnych ceregieli.

HTML5 łagodzi teraz to rozróżnienie, a nawet określa 9 różnych kategorii, do których może należeć element, przy czym element może należeć do kilku kategorii. Stare rozróżnienie między elementami blokowymi i liniowymi jest wyrzucane za burtę i uwzględnia wielość znaczeń tagów w sieci. W szczególności powoduje to, że poniższe konstrukcje reprezentują prawidłowy kod:

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

Połączenie całego kontenera zawierającego dodatkowe elementy blokowe było wcześniej możliwe (przy poprawnym kodzie) jedynie przy użyciu trików (np. poprzez absolutne pozycjonowanie połączonej warstwy nakładki). Alternatywnie nagłówek i akapit zostały połączone – to z kolei doprowadziło do nadmiarowości i kontenera nie można było kliknąć. Dzięki mile widzianemu rozszerzeniu HTML5 nie stanowi to już problemu.

Plecy