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 это больше не проблема.

Назад