Как правильно сверстать и что почитать посоветуете?

Question

[seredaes]

Привет.

У меня есть меню состоящее из прямоугольных блоков и картинка внутри с текстом.
< div >
< img src='...' >
< p > text < / p >
< / div >

Как корректно сделать ссылку?
Я все это внутрь тега < a > загнал с < div > блоком внутри. Но слышал, что это плохой тон и ваще.
Но как говорил Артемий Лебедев, главный Ваш валидатор - браузер! а не всякие там сервисы.
Что Вы скажите по этому поводу? Кроме как не по стандарту могут быть баги?

Answer 1

[Wheelie]

<a href="#" class="делаем ссылку прямоугольным блоком">
<img /> <span>text</span>
</a>

ну или p вместо span. Работать это будет везде.

Comments

[seredaes]

Я и такой вариант продумывал, но мне казалось это еще большим костылем, делать ссылку блочным элементом. Хм. А где почитать правила какой элемент в какой может вкладываться, а какой нет? Я примерно схему представляю, в < p > можно вкладывать < img > < a > < span > но некорректно блок. Но хотелось бы больше информации почерпнуть.

[seredaes]

И да, спасибо за ответ

[Wheelie]

seredaes: делать ссылку блочным элементом иногда необходимо.

Answer 2

[Алексей Николаев]

div из a все-равно вывалится, т.к. в a не может быть многих элементов (блочных в основном). Я обычно в таких случаях, когда внутри a должно быть много контента, делаю ссылку с абсолютным позиционированием, растянутой на весь блок, и располагаю ее в самом начале.

<div>
<a href="#"></a>
<img src='...'>
<p> text</p>
</div>

Не знаю, насколько это корректно с ъ-точки зрения, но это более логично в данном случае.

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

<a href="#">
<img src='... >
<p>text</p>
</a>

Comments

[Алексей Уколов]

В 5-ом стандарте html внутрь ссылок можно вставлять почти любой другой элемент, включая div.

[Алексей Уколов]

https://www.w3.org/TR/html-markup/a.html#a-changes

[Сергей delphinpro]

>> div из a все-равно вывалится, т.к. в a не может быть многих элементов (блочных в основном).

Проснитесь!!! 2016 год на дворе, html5 - самое обычное дело. Ссылкой можно оборачивать почти любые элементы.

[Антон Нагаец]

Сергей: Именно. в стандарте html5 есть даже специальные выделенные теги для навигации, но все уперто делают div

[seredaes]

А насколько корректно все обернуть ссылкой?

[Алексей Николаев]

Алексей Уколов: стандарт - одно дело, а реальность в том, что на последней версии того же firefox в инспекторе четко видно, почему ссылка не работает.

[Алексей Уколов]

Алексей Николаев: стандарт прекрасно поддерживается во всех современных браузерах. Очевидно, вы где-то его нарушаете.

Answer 3

[Антон Нагаец]

Как один из вариантов решения

<nav>
<dl>
  <li><a href="#">menu1<a/></li>
  <li><a href="#">menu2<a/></li>
  <li><a href="#">menu3<a/></li>
  <li><a href="#">menu4<a/></li>
</dl>
</nav>

dl {
  display:flex;
  justify-content:center;
   
}
li {
  min-width:10vw;
  min-height:10vh;
 background:url(http://lorempixel.com/150/50);  
  list-style-type:none;
  padding:0.5vw;
  margin:0.5vw;
}
a {color:white; text-decoration:none; }

Answer 4

[Сергей delphinpro]

<a href="#">
    <figure>
        <img src='...'>
        <figcaption> text </figcaption>
    </figure>
</a>