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