До побачення, блок і вбудований - вітаємо 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 це більше не проблема.

Назад