...

Ответ 1

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

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

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

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

Ответ 2

В pre HTML 5 этот

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

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

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

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

Ответ 3

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

Ответ 4

<h1><a>..</a></h1> и <a><h1>..</h1></a> всегда вели себя почти одинаково, когда таблицы стилей не влияют на рендеринг. Почти, но не совсем. Если вы перемещаетесь с помощью клавиши табуляции или иным образом фокусируетесь на ссылке, вокруг большинства ссылок в большинстве браузеров появляется "прямоугольник фокуса". Для <h1><a>..</a></h1> этот прямоугольник находится вокруг текста ссылки. Для <a><h1>..</h1></a> прямоугольник проходит через доступное горизонтальное пространство, так как разметка делает элемент a элементом блока в рендеринге, занимая по умолчанию ширину 100%.

Ниже показано, как Chrome <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>.

Ответ 5

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

Таким образом, лучший способ:

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

Ответ 6

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

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

Ответ 7

Кроме того, существуют различия в иерархии стилей. Если у вас это как <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;}