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

Назад