Goodbye Block & Inline - Добро пожаловать в HTML5

Нововведения спецификации HTML5 многочисленны, и многие из них уже поддерживаются большинством браузеров — ниже я хотел бы выделить интересное изменение правил вложенности элементов. HTML всегда различал блочные и строчные элементы. Например, в определении типа документа HTML4 h1, p и div называются блочными элементами, а a, span и img — встроенными элементами.


Теперь от этой концепции отказались (по уважительным причинам). В некоторых случаях использования многие веб-дизайнеры игнорировали правильность указанного правила вложения, согласно которому элементы блока не могут быть расположены внутри встроенных элементов, или стандартное поведение с использованием правил CSS, таких как display: inline; или display: block; (что часто приводило к неверному коду) без лишних слов.

HTML5 теперь смягчает это различие и даже называет 9 различных категорий, к которым может принадлежать элемент, при этом элемент может быть в нескольких категориях. Старое различие между блочными и встроенными элементами отбрасывается за борт и учитывается множество значений тегов в сети. В частности, это приводит к тому, что следующие конструкции представляют действительный код.:

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

Связывание всего контейнера, содержащего дополнительные элементы блока, ранее было возможно только (с действительным кодом) с помощью трюков (например, путем абсолютного позиционирования связанного слоя наложения). Альтернативно заголовок и абзац были связаны — это, в свою очередь, приводило к избыточности и контейнер не был кликабельным. Благодаря долгожданному расширению HTML5 это больше не проблема.

Назад