Стандарт связывания элементов тега <h>
Либо:
<a href = "#"><h1>text here</h1></a>
или же
<h1><a href = "#">text here</a></h1>
"правильный". Есть ли польза от использования первого, мне он кажется более логичным. Возможно, с точки зрения SEO?
Ответы 4
<h1><a href = "#">text here</a></h1>
правильно, поскольку HTML не допускает блочного элемента (<h1>) внутри встроенного элемента (<a>) (src). ваш первый пример не удастся Проверка.
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
Ваш второй пример - единственная разрешенная структура. Первый помещает элемент уровня блока внутрь встроенного элемента, а HTML этого не допускает. Браузеры могут разрешить это, но это недействительный HTML.
В данном конкретном случае особой разницы нет. Однако следует отметить несколько моментов:
<h*>- это блочные элементы,<a>- встроенный элемент по умолчанию. Как указывали другие, XHTML не допускает блочных элементов во встроенных элементах, поэтому, если вы не переопределили их стиль отображения в CSS,<a><h1></h1></a>недействителен.<a href = "#"><h1>text here</h1></a>- это ссылка, которая может иметь несколько дочерних узлов. В этом случае у него есть только дочерний узел<h1>, но ничто не мешает вам добавить еще.- С другой стороны,
<h1><a href = "#">text here</a></h1>- это заголовок, который может отключать несколько узлов. Вы можете добавлять к нему всевозможные дочерние узлы, например метки и т. д.
Так что это в основном логическая разница без каких-либо практических различий в данном конкретном случае.
Дополнительное примечание, хотя первый случай работает, это исключительно из-за того, что браузеры разрешают. Изучив внутреннее дерево доменов, вы можете обнаружить, что
<a><h1>foo</h1></a>
попадает в
<a></a>
<h1><a>foo</a></h1>
<a></a>
И это может привести к результатам интересно. ;)