Как сделать весь блок ссылкой?

Question

[Sergey750il]

Доброго времени суток. Как правильно сделать весь блок ссылкой, но что бы при этом в нем была еще одна ссылка?
Есть идея обернуть все в тег и дивы поменять на span.
https://jsfiddle.net/caqLu2pv/1/

Comments

[Родион Мещеряков]

Для начала нужно ответить себе на вопрос: какую задачу я решаю, вставляя ссылку в ссылку? Если предполагается, что и блок, и текстовая ссылка будут вести в одном направлении, то можно просто обернуть блок в ссылку, а текстовую ссылку переделать на span и стилизовать под ссылку, если очень хочется (добавить подчеркивание, курсор при наведении и т.п.). Если блок ведет в одном направлении, а текстовая ссылка в другом, то вы делаете что-то не так с точки зрения UX.

Answer 1

[Ankhena]

Если брать в расчет спецификацию, то:
1. Ссылку в ссылку вкладывать нельзя. Значит вторую нужно поместить рядом и позиционированием отправить куда нужно.
При этом нужно быть уверенным, что пользователь поймет куда и зачем нажимать.
2. У ссылок прозрачная контентная модель. Поскольку, мы не можем быть на 100% уверенными куда будет вставлена ссылка, то div'ы внутри неё нужно заменить на span (или семантические аналоги).

Answer 2

[Макс]

Может я и где-то ошибаюсь, но почему бы просто не вставить тег <div> в тег
<a> ?

<a href='#' target='_blank' class='button'><div сlass='about-me'>fdfds</div</a>

Comments

[Sergey750il]

На сколько мне известно блочные элементы нельзя вставлять в строчные.

[Макс]

Sergey750il, та у меня вроде как всё работает. Ну опять же, я могу ошибаться :)

[Макс]

Также можно и поделать несколько операций с <button>, но также могут и подойти <div> и <span>

[Алексей]

Sergey750il, тег "а" может быть как строчным так и блочным, в зависимости от того что внутри и все будет валидно и семантично

Answer 3

[xmoonlight]

Ссылка->блок->блок->ссылка.