Стандарт для связывания элементов тега <h>

Question

Это либо:

<a href="#"><h1>text here</h1></a>

или

<h1><a href="#">text here</a></h1>

"правильный". Есть ли польза от использования первого, мне кажется более логичным. Возможно, с точки зрения SEO?

Answer 1

<h1><a href="#">text here</a></h1>

правильно, поскольку HTML не допускает элемент блока (<h1>) внутри встроенного элемента (<a>) ( src ) ваш первый пример потерпит неудачу проверка .

Как правило, элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока. Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Это структурное различие присуще идее, согласно которой блочные элементы создают "более крупные" структуры, чем встроенные элементы.

Answer 2

Ваш второй пример - единственная допустимая структура. Первый помещает элемент уровня блока внутрь встроенного элемента, а HTML не позволяет этого. Браузеры могут разрешить это, но это не правильный HTML.

Answer 3

Дополнительное примечание, хотя первый случай работает, он обусловлен исключительно разрешением браузеров. Посмотрев внутреннее дерево доменов, вы можете обнаружить, что

 <a><h1>foo</h1></a>

разбивается на

 <a></a>
 <h1><a>foo</a></h1>
 <a></a>

И это может создать интересных результатов. ;)

Answer 4

Нет особой разницы в этом конкретном случае. Есть несколько вещей, на которые следует обратить внимание:

• <h*> - это блочные элементы, <a> - встроенный элемент по умолчанию. Как отмечали другие, XHTML не допускает использование блочных элементов во встроенных элементах, поэтому, если вы не изменили их стиль отображения в CSS, <a><h1></h1></a> будет недопустимым.
• <a href="#"><h1>text here</h1></a> - это ссылка, которая может иметь несколько дочерних узлов. В этом случае у него есть только дочерний узел <h1>, но ничто не мешает вам добавить больше.
• С другой стороны, <h1><a href="#">text here</a></h1> - это заголовок, который может содержать несколько узлов. Вы можете добавить к нему все виды дочерних узлов, например метки и т. Д.

Так что это в основном логическое различие без каких-либо практических различий в данном конкретном случае.