<h1><a>..</a></h1>
и <a><h1>..</h1></a>
всегда вели себя одинаково, когда таблицы стилей не влияют на рендеринг.Почти, но не совсем.Если вы перемещаетесь с помощью клавиши табуляции или иным образом фокусируете на ссылке, в большинстве браузеров вокруг ссылки появляется «прямоугольник фокусировки».Для <h1><a>..</a></h1>
этот прямоугольник находится только вокруг текста ссылки.Для <a><h1>..</h1></a>
прямоугольник простирается через доступное горизонтальное пространство, поскольку разметка делает элемент a
блочным элементом при рендеринге, по умолчанию занимая 100% ширины.
Ниже показано, как сфокусировано <a href=foo><h1>link</h1></a>
отображается в Chrome:
Это означает, что если вы стилизуете элементы, например, устанавливая цвет фона для ссылок, эффекты будут отличаться аналогичным образом.
Исторически <a><h1>..</h1></a>
был объявлен недействительным в HTML 2.0, и последующие спецификации HTML следовали его примеру, но HTML5 изменяет это и объявляет его действительным.Формальное определение не затронуло браузеры, только валидаторы.Однако удаленно возможно, что некоторые пользовательские агенты (вероятно, не обычные браузеры, но, например, специализированные средства визуализации HTML, средства извлечения данных, конвертеры и т. Д.) Не смогут правильно обработать <a><h1>..</h1></a>
, поскольку это не разрешено в спецификациях.*
Редко есть веская причина сделать заголовок или текст в заголовке ссылкой.(В основном это нелогично и плохо для удобства использования.) Но подобный вопрос часто возникал при создании заголовка (или текста в заголовке) потенциального пункта назначения для ссылки, например, <h2><a name=foo>...</a></h2>
против <a name=foo><h2>...</h2></a>
,Аналогичные соображения применимы к этому (обе работы могут иметь место, поскольку последний делает элемент a
блоком, а до HTML5 формально допускается только первый).Но кроме того, оба способа устарели, и теперь рекомендуется использовать атрибут id
непосредственно в элементе заголовка: <h2 id=foo>...</h2>
.