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

Question

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

это

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

или

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

Спасибо

Answer 1

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

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

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

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

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

Answer 2

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

Answer 3

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