как смешивать ссылки (тег <a>) и заголовки (тег <h1>) в веб-стандарте?

95

Какой правильный код для создания ссылки с заголовком 1 в соответствии с веб-стандартами?

это

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

или

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

Благодарность

Ахмед
источник

Ответы:

143

Согласно веб-стандартам вам не разрешается помещать блочные элементы во встроенные элементы.

Как h1блочный элемент, так и aвстроенный элемент, правильный способ:

<h1><a href="#">This is a title</a></h1>

Вот ссылка, по которой вы можете узнать больше: w3 Модель визуального форматирования

Однако есть исключение: в HTML5 допустимо заключать элементы уровня блока (например div, pили h*) в теги привязки. Обертывание блочных элементов во встроенные элементы, отличные от якорей, по-прежнему противоречит стандартам.

Darko Z
источник
19
В HTLM5 это изменилось. Оба примера будут проверяться - validator.w3.org .
Атадж
хороший. это легко сделать ошибкой, и хотя оба они подтвердят логику, что естественно встроенные элементы должны быть потомками элементов уровня блока.
bigmadwolf
@pushplaybang - я бы сказал, что более семантично заключать заголовок в ссылку, если только часть заголовка не должна быть интерактивной (я не могу придумать для этого варианта использования). Тем не менее, хорошо, что оба они поддерживаются в html5.
аааааа
48

HTML5 обновляет эту тему: теперь можно заключать элементы уровня блока в A, как указано в другом вопросе: https://stackoverflow.com/a/9782054/674965 и здесь: http://davidwalsh.name/html5- элементы-ссылки

f055
источник
8
Этот ответ сейчас гораздо более актуален, чем принятый ответ
Джош Дэвенпорт,
@JoshDavenport Принятый ответ был обновлен, чтобы отразить это
dan-klasson
2

Насколько я понимаю, HTML5 позволяет вам заключать элементы уровня блока в теги ссылок. Однако ошибки могут появляться в старых браузерах. Я столкнулся с этим в Firefox 3.6.18 и в мой код вставил moz-rs-heading = "". Таким образом мои стили сломались. Если вам нужен обходной путь, вы можете обернуть теги ссылок в div. Следующее дает лучшее объяснение того, почему работает дополнительный код http://oli.jp/2009/html5-block-level-links/

Kip Deeds
источник
2

a > h1 вызовет трудности при выделении текста

Проблемы с выделением текста

Поскольку оба варианта полностью действительны в HTML5, лучше использовать h1 > a

Абхишек Чаудхари
источник