Ответы:
Обе версии верны. Самая большая разница между ними заключается в том, что в случае <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>
<a>
и то же, чтобы они разделяли состояние наведения: jsfiddle.net/jjyLemq2
<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>
.
"There is seldom a good reason to make a heading or text in a heading a link"
-> Я должен не согласиться с этим. На самом деле есть много веских причин сделать ссылку на заголовок. Пример приведен: список сообщений в блоге, где каждый заголовок также является ссылкой. Или проверьте само SO: все вопросы на главной странице являются h3
элементами, а также ссылкой. Во всяком случае, хорошее объяснение;)
Элементы 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;}