Правильно ли ставить 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

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

Как и предполагалось, я добавил код разметки:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

и css:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

Answer 2

Так же, как к вашему сведению.

Если ваша цель - сделать ваш 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>

Это также будет работать для нескольких div-ов - согласно комментарию Тома в этой теме

Answer 3

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

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

Довольно печально на самом деле ... но это работает ...