Семантически, что является более правильным: a в h2 или h2 в a?

Question

Я застрял, решая, что использовать, так как оба работают.

Стоит ли размещать ссылки <a> внутри <h2> элементов?

Или наоборот?

Какой правильный стандарт?

Answer 1

Вы можете размещать элементы <h2> только в элементах <a>, если вы работаете с HTML5, который допускает любые другие элементы в элементах <a> .Предыдущие спецификации (или текущие, какими бы вы ни хотели их посмотреть) никогда не допускали этого.

Обычный способ сделать это - поместить <a> в <h2>.Это работает, всегда работало и было единственным допустимым способом сделать это до HTML5 для заголовков ссылок, так как ссылка ссылается на текст в этом заголовке.Вам редко нужно помещать <h2> в <a>, если только <h2> не является частью более сложной структуры, которая функционирует как гиперссылка в целом.

Answer 2

Также он не функционирует так же, есть одна большая разница.

Если вы введете <h2> в <a>, весь блок (например, строка) заголовка будет работать как ссылка.

Однако, если вы введете <a> в <h2>, только видимый текст будет работать как ссылка. (вы можете проверить это при смене курсора)

Answer 3

<h2> - это уровень блока, а <a> - нет, поэтому <h2> может содержать <a>, но не наоборот

http://htmlhelp.com/reference/html40/block.html

Answer 4

HTML позволяет вещи внутри <a> теги

У меня есть это ...

<header>
  <a href="/home">
    <h1>Main heading</h1>
    <h2>Sub heading</h2>
  </a>
</header>

И у меня это работает.

Весь текст заголовка, включая подзаголовок, кликабелен, как я хочу. Я не знаю лучшего способа сделать это с помощью HTML 5.

Answer 5

Ответ в том, что это зависит ...

На веб-сайте W3C, более конкретно на странице семантики HTML5 , ясно, что элементы h2 (как и все другие теги заголовков) имеют в качестве модели контента «Фразирование контента».

Теперь, следуя ссылке Phrasing content , вы получите следующее описание:

Содержание фразы - это текст документа, а также элементы, которые разметить этот текст на уровне внутри параграфа. Запуски фраз содержание формы абзацы.

, и в следующем списке у вас есть фраза:

a (если он содержит только фразы)

Таким образом, если тег a содержит только фразы, HTML5 позволяет содержать его в теге h2.

Viceversa, страница семантики текстового уровня описывает модель содержимого элемента a следующим образом:

Прозрачный, но не должно быть потомка интерактивного контента.

После Прозрачная ссылка , в конце описания находится следующее:

Если у прозрачного элемента нет родителя, то часть его содержимого модель, которая является «прозрачной», должна рассматриваться как принимающая содержание потока.

Так как в описании тега h2 сказано:

Контексты, в которых этот элемент может использоваться: Где ожидается содержание потока.

тег h2 может рассматриваться как содержимое потока.

Таким образом, если у тега a нет родителя, в HTML5 он должен рассматриваться как принимающий любое содержимое потока, включая теги h2.

Answer 6

Спецификации W3C для h2 говорят, что его разрешенные родительские элементы - это все, что может содержать элементы потока или hgroups.Спецификации для разрешают родительские элементы, которые могут содержать элементы потока или .h2 может содержать фразеализирующий контент, а a может содержать фразировочный или потоковый контент, поэтому на основании спецификации представляется, что любой из них разрешен.

Поскольку вы включили тег семантики, я предполагаю, что вас интересует, какой "кажется'лучше тоже.Со своей стороны, поскольку я не могу вспомнить, когда бы я хотел, чтобы якорь охватывал заголовок плюс другой контент, но я могу вспомнить множество случаев, когда заголовок должен содержать якорь плюс другой контент, внутренняя h2 кажетсялучший маршрут. 1009 *