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

95

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

это

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

или

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

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

html web-standards

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

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

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