Помещает ли div внутри якоря когда-либо правильно?

Я слышал, что включение элемента блока внутри встроенного элемента является HTML-символом sin:

<a href="#" onclick="location.href='http://www.mydomain.com'; return false;"><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-элементов в таким образом.

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

ОТВЕТЫ

Ответ 1

В зависимости от версии HTML, которую вы обслуживаете:

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

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

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

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

    /li >

Ответ 2

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

Ответ 3

В документе W3C не используются такие понятия, как неправильный и грешный, но он использует те, которые предоставляют средства, может быть уместным и обескураженным.

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

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

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

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

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

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

DTD, кажется, менее прощает здесь, но текст DTD отсылает к спецификации:

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

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

Там есть 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">

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

Пока спецификация может указывать "встроенные элементы", я уверен, что она не предназначена для того, чтобы вы могли обойти цель, объявив тип отображения элемента блока встроенным. Inline-теги имеют разную семантику, независимо от того, как вы можете злоупотреблять ими.

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

Я видел, как кто-то использовал прозрачное пустое изображение, PNG, внутри тега привязки, чтобы сделать ссылку внутри div, а изображение было того же размера, что и div.

Довольно грустно на самом деле... но он работает...

Ответ 12

Короткий ответ здесь.

Да, это так. Это возможно.

Ответ 13

Так же, как FYI.

Если ваша цель состоит в том, чтобы сделать ваш div нажав, вы можете использовать jQuery/Java Script.

Определите свой div следующим образом:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

Затем ваш jQuery будет реализован следующим образом:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

Это также будет работать для нескольких divs - в соответствии с комментарием Tom в этом потоке