Правильно ли ставить div внутри якоря?

Question

Я слышал, что помещение элемента блока во встроенный элемент - это грех HTML:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

Но как быть, если вы стилизуете внешний якорь как display:block в таблице стилей? Это все еще не так? Спецификация HTML 4.01 для блочных и встроенных элементов выглядит так:

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

У кого-нибудь есть еще советы по этому вопросу?

Answer 1

В зависимости от версии HTML, к которой вы обращаетесь:

• HTML 5 утверждает, что элемент <a> может быть обернут вокруг целых абзацев, списков, таблиц и т. Д., Даже целых разделов, если только внутри нет интерактивного контента (например, кнопок или других ссылок) ".

• HTML 4.01 указывает, что <a> элементы могут содержать только встроенные элементы . <div> является блочным элементом , поэтому он может не отображаться внутри <a>.

  Конечно, вы можете стилизовать встроенный элемент так, чтобы он выглядел как блок, или даже как блок, чтобы он отображался как встроенный. Использование терминов inline и block в HTML относится к связи элементов с семантической структурой документа, в то время как те же термины в CSS больше связаны с визуальным оформлением элементов. Если вы заставляете встроенные элементы отображаться блочно, это нормально.

  Однако вы должны убедиться, что структура документа по-прежнему имеет смысл, когда отсутствует CSS, например, когда к нему обращаются с помощью вспомогательной технологии, такой как программа чтения с экрана, или даже при проверке могущественным роботом Google.

Answer 2

Нет, он не будет проверяться, но да, как правило, он будет работать в современных браузерах. При этом используйте промежуток внутри своего якоря и установите на него также display: block, который определенно будет работать везде, и он будет проверяться!

Answer 3

Документ W3C не использует такие понятия, как неправильно и sin , но он использует такие как , предоставляя средства , , которые могут быть подходящими и не поощряются .

На самом деле, во втором абзаце раздел 4 , спецификация 4.01 классифицирует свои слова следующим образом

Ключевые слова «ДОЛЖНЫ», «НЕ ДОЛЖНЫ», «ТРЕБУЕТСЯ», «ДОЛЖНЫ», «НЕ ДОЛЖНЫ», «СЛЕДУЕТ», «НЕ СЛЕДУЕТ», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в этот документ следует интерпретировать, как описано в [RFC2119]. Тем не менее, для удобства чтения эти слова не отображаются заглавными буквами в этой спецификации.

Имея это в виду, я считаю, что окончательное утверждение содержится в 7.5.3 Блочных и встроенных элементах , где написано

Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы.

Условие «в целом», по-видимому, вводит достаточно двусмысленности, чтобы сказать, что HTML 4.01 позволяет встроенным элементам содержать блочные элементы.

Конечно, CSS2 имеет значение свойства отображения, inline-block , которое кажется подходящим для цели, которую вы описываете. Я не уверен, что это когда-либо получило широкую поддержку, но кажется, что кто-то предвидел необходимость такого поведения.

DTD здесь менее простителен, но текст DTD соответствует спецификации:

Спецификация HTML 4.01 включает в себя дополнительные синтаксические ограничения, которые не могут быть выражены в DTD.

В другом комментарии вы предлагаете сделать блок активным, поместив его в якорь. Я не верю, что HTML запрещает это, а CSS явно позволяет это. Поэтому, чтобы ответить на заглавный вопрос о том, является ли он когда-либо правильным, я говорю «да». По меркам это иногда правильно.

Answer 4

Со спецификацией HTML5 ... Теперь можно поместить элемент уровня блока внутри встроенного элемента. Так что теперь вполне уместно поместить div или h1 внутри элемента a.

Answer 5

Вы не можете поместить <div> в <a> - это недопустимый (X) HTML.

Несмотря на то, что вы разрабатываете диапазон с помощью display: block, вы все равно не можете поместить в него элементы уровня блока: (X) HTML по-прежнему должен подчиняться (X) HTML DTD (независимо от того, какой вы используете), независимо от того, какой как CSS меняет вещи.

Браузер, вероятно, отобразит его так, как вы хотите, но это не поможет.

Answer 6

Есть DTD для HTML 4 на http://www.w3.org/TR/REC-html40/sgml/dtd.html. Этот DTD является машинно-обрабатываемой формой спецификации, с ограничением, что DTD управляет XML и HTML 4, особенно «временный» вариант, допускает множество вещей, которые не являются «легальными» XML. Тем не менее, я считаю, что это близко к кодификации намерений спецификаторов.

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Я бы интерпретировал теги, перечисленные в этой иерархии, как сумму разрешенных тегов.

Хотя в спецификации может быть указано «встроенные элементы», я почти уверен, что не предполагается, что вы сможете обойти намерение, объявив тип отображения элемента блока как встроенный. Встроенные теги имеют различную семантику, независимо от того, как вы можете злоупотреблять ими.

С другой стороны, меня интригует то, что включение special, по-видимому, позволяет вложить элементы A. Вероятно, в спецификации есть сильная формулировка, которая запрещает это, даже если это синтаксически правильный XML, но я не буду углубляться в это, поскольку это не тема вопроса.

Answer 7

Элементы уровня блока, такие как <div>, могут быть заключены в теги <a> в HTML5. Хотя <div> считается контейнером / оберткой для потока , а <a> считается поток в соответствии с MDN . Семантически может быть лучше создать встроенные элементы, которые действуют как элементы уровня блока.

Answer 8

Это неправильно.Используйте span .

Answer 9

Если вы измените его на элемент стиля блока, то нет, это больше не «неправильно», но, вероятно, не будет проверяться. Но не имеет смысла делать то, что вы делаете. Вы должны либо просто оставить тег привязки как элемент уровня блока без внутреннего элемента div, либо поместить элемент div снаружи.

Answer 10

Если вы собираетесь заняться созданием блока <a>, почему бы не поместить <a> в элемент div, будучи элементом блока, это даст вам тот же эффект.