Что более правильно: <h1> <a>… </a> </ h1> ИЛИ <a> <h1>… </ h1> </a>

Являются ли оба <h1><a ...> ... </a></h1>и <a ...><h1> ... </h1></a>действительный HTML, или только один правильный? Если они оба верны, они различаются по значению?

Обе версии верны. Самая большая разница между ними заключается в том, что в случае <h1><a>..</a></h1>только текст в заголовке будет кликабельным.

Если вы поместите <a>вокруг <h1>и displayсвойство css block(которое по умолчанию), то весь блок (высота <h1>и 100% ширины контейнера, в котором он <h1>находится) будет кликабельным.

Исторически вы не могли поместить элемент блока внутрь встроенного элемента, но это больше не относится к HTML5. Я думаю, что этот <h1><a>..</a></h1>подход более условен.

В том случае , когда вы хотите поставить якорь на заголовок, лучший подход , чем <a id="my-anchor"><h1>..</h1></a>было бы использовать либо idили nameатрибут так: <h1 id="my-anchor">..</h1>или<h1 name="my-anchor">..</h1>

В предварительном HTML 5 этот

<a><h1>..</h1></a>

не будет проверять Вы можете использовать его в HTML 5. Однако я бы использовал это:

<h1><a>..</a></h1>

если вам не нужно добавлять больше, чем <h1> внутри <a>

<a><h1></h1></a>недопустимо W3C ... В принципе, вы не можете помещать блочные элементы внутри встроенных элементов

<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>.

Элементы H1 являются элементами блочного уровня, а якоря являются встроенными элементами. Вам разрешено иметь встроенный элемент в элементе уровня блока, но не наоборот. Когда вы рассматриваете блочную модель и спецификацию HTML, это имеет смысл.

Итак, в заключение, лучший способ это:

<h1><a href="#">Link</a></h1>

Вы хотите использовать гиперссылку <a href="…">/ a:link, или вы хотите добавить привязку к вашему заголовку? Если вы хотите добавить привязку, вы можете просто назначить идентификатор <h1 id="heading">. затем вы можете связать его какpage.htm#heading .

если вы хотите сделать заголовок кликабельным (ссылка), сначала используйте <h1><a></a></h1>/ h1 > a- элементы уровня блока, а встроенные элементы внутри

Также есть различия в иерархии стилей. Если это так <h1><a href="#">Heading here</a></h1>, стили якоря будут отменять стили элемента h1. Пример:

a {color:red;font-size:30px;line-height:30px;}

БУДЕТ СВОБОДНЫ

h1 {color:blue;font-size:40px;line-height:40px;}