Я застрял, решив, что использовать, как оба, кажется, работают.
Должен ли я размещать ссылки <a>
внутри элементов <h2>
?
Или наоборот?
Каков правильный стандарт?
Я застрял, решив, что использовать, как оба, кажется, работают.
Должен ли я размещать ссылки <a>
внутри элементов <h2>
?
Или наоборот?
Каков правильный стандарт?
Вы можете размещать элементы <h2>
только внутри элементов <a>
, если вы работаете с HTML5, который допускает любые другие элементы в <a>
элементах. Предыдущие спецификации (или текущие, но вы хотите посмотреть на них) никогда не допускали этого.
Обычный способ сделать это - разместить <a>
внутри <h2>
. Это работает, всегда работало и было единственным действительным способом сделать это до HTML5 для ссылок на ссылки, поскольку ссылка ссылается на текст в этом заголовке. Вам редко приходится размещать <h2>
внутри <a>
, если только <h2>
не является частью более сложной структуры, которая функционирует как гиперссылка в целом.
Также он не работает так же, есть одна большая разница.
Если вы поместите <h2>
в <a>
, весь блок (например, строка) заголовка будет работать как ссылка.
Однако, если вы поместите <a>
в <h2>
, только видимый текст будет работать как ссылка. (вы можете проверить его с помощью изменения курсора)
<h2>
является блочным уровнем, а <a>
- нет, поэтому <h2>
может содержать <a>
, но не наоборот
Ответ заключается в том, что это зависит...
На веб-сайте W3C, а именно на странице HTML5-семантики, ясно, что элементы h2 (как и все другие теги заголовков) имеют как контент-модель "Содержание фраз".
Теперь, следуя ссылку на содержание фразы, вы получите следующее описание:
Содержание фразы - это текст документа, а также элементы, которые отметьте этот текст на уровне внутри абзаца. Задания фразы абзаца формы содержания.
и в следующем списке у вас есть этот фразинг-контент:
a (если он содержит только текст фразы)
Итак, если тег a
содержит только фраз-содержимое, HTML5 позволяет содержать его в теге h2
.
Viceversa, текстовая страница уровня текста описывает модель содержимого элемента a
следующим образом:
Прозрачный, но не должно быть потомков интерактивного контента.
Следуя Прозрачная ссылка, в конце описания найдено следующее:
Когда у прозрачного элемента нет родителя, тогда часть его содержимого модель, которая является "прозрачной", должна рассматриваться как принятие любых потока.
Так как в h2
описании тега говорится:
Контексты, в которых этот элемент может использоваться: Где ожидается содержимое потока.
a h2
тег может рассматриваться как содержимое потока.
Итак, если тег a
не имеет родителя, в HTML5 он должен рассматриваться как принятие любого содержимого потока, включая теги h2.
<a>
У меня есть это...
<header>
<a href="/home">
<h1>Main heading</h1>
<h2>Sub heading</h2>
</a>
</header>
И это работает для меня.
Весь текст заголовка, включая подзаголовок, можно щелкнуть, как я хочу. Я не знаю, как лучше это сделать с помощью html 5.
Спецификации W3C для h2 говорят, что его разрешенные родительские элементы - это все, что может содержать элементы потока или hgroups. спецификации для разрешающих родительских элементов, которые могут содержать элементы выражения или потока. h2 может содержать содержание фраз, а также может содержать словосочетание или поток, поэтому на основе спецификации кажется, что это разрешено.
Поскольку вы включили тег семантики, я предполагаю, что вас интересует, что "кажется" лучше. Со своей стороны, поскольку я не могу придумать, когда я хочу, чтобы привязка охватывала заголовок плюс другой контент, но я могу придумать много раз, когда заголовок должен содержать якорь плюс другой контент, внутри h2 кажется, что лучший маршрут для перехода.