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

166

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

knokio
источник

Ответы:

155

Обе версии верны. Самая большая разница между ними заключается в том, что в случае <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>

Marco
источник
Более подробная информация здесь: stackoverflow.com/questions/6061869/…
thoan
2
Звук <a> <h1> .. </ h1> </a> предпочтителен для HTML 5, поскольку он дает пользователям сенсорных устройств большую цель для щелчка, верно?
Acyra
Когда заголовок и подзаголовок оба ссылаются на один и тот же контент, визуально более привлекательно оборачивать оба в одно <a>и то же, чтобы они разделяли состояние наведения: jsfiddle.net/jjyLemq2
Slam
26

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

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

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

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

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

Vaidas
источник
8

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

pleasedontbelong
источник
26
Это действительно в HTML 5
vaidas
1
да ... но почему-то я чувствую, что помещать блочные элементы в ссылку довольно небрежно (личное мнение), как не закрывать тег (действует в HTML5) ... но эй! .. возможно, это влияет на SEO
gladontbelong
7

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

Юкка К. Корпела
источник
8
"There is seldom a good reason to make a heading or text in a heading a link"-> Я должен не согласиться с этим. На самом деле есть много веских причин сделать ссылку на заголовок. Пример приведен: список сообщений в блоге, где каждый заголовок также является ссылкой. Или проверьте само SO: все вопросы на главной странице являются h3элементами, а также ссылкой. Во всяком случае, хорошее объяснение;)
Джорджио
@ giorgio, например, ссылки SO, которые вы упоминаете, плохо подходят для удобства использования: создание ссылки для ссылки на саму страницу бессмысленно и вводит в заблуждение.
Юкка К. Корпела
1
Ну, я имею в виду SO ссылки на главной странице, которые направляют пользователя на другую страницу, в частности страницу с вопросами. И да, ссылка в заголовке на странице вопросов (не полностью) бесполезна, но это не обязательно делает ее вредной для пользователя. Основная причина - SEO (на странице вопроса).
Джорджио
1
Эта зацикленная вещь SEO является чем-то плохим для удобства использования. Почему заголовок страницы (h1) заставляет программу чтения с экрана объявить ссылку куда-то еще? Это очень запутанно. И по той же причине наличие ссылки в подзаголовках вводит в заблуждение, когда предположительно есть заголовок раздела на странице, а также заголовок другой страницы.
Адам
5

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

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

<h1><a href="#">Link</a></h1>
Sam152
источник
2
«это имеет смысл» , вы загадочно говорите без объяснения причин, но поведение элемента уровня блока внутри встроенного элемента определено . Наличие элементов уровня блока внутри встроенных элементов никогда не было неправильным. Более того, спецификации HTML 5 и HTML Living Standard прекрасно подходят для заголовков внутри якорей. Этот ответ просто неправильный.
Марк Амери
1

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

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

knittl
источник
1

Также есть различия в иерархии стилей. Если это так <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 потому что это вообще не относится к вопросу (который является более правильным).
Марк Амери