Что более правильно: <h1><a> ... </a></h1> ИЛИ <a><h1> ... </h1></a> - PullRequest
152 голосов
/ 11 августа 2011

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

Ответы [ 7 ]

138 голосов
/ 11 августа 2011

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

Если вы поместите <a> вокруг <h1> и свойство css display будет 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>

22 голосов
/ 11 августа 2011

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

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

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

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

, если вам не нужно добавлять более

внутри

8 голосов
/ 11 августа 2011

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

7 голосов
/ 25 августа 2014

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

enter image description here

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

Исторически <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 голосов
/ 11 августа 2011

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

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

<h1><a href="#">Link</a></h1>
1 голос
/ 16 июня 2015

Кроме того, есть различия в иерархии стилей.Если вы укажете <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;}
1 голос
/ 11 августа 2011

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

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

...