як змішати посилання (<a> тег) та заголовки (<h1> тег) у веб-стандарті?

95

Який правильний код для створення посилання з заголовком 1 відповідно до веб-стандартів?

є це

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

або

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

Дякую

html web-standards

— ахмед
джерело

143

Відповідно до веб-стандартів, вам не дозволяється вставляти елементи блоку в елементи вбудованої форми.

Оскільки h1є блоковим елементом і aє вбудованим елементом, правильний спосіб:

<h1><a href="#">This is a title</a></h1>

Ось посилання, щоб ви могли дізнатись більше: w3 Модель візуального форматування

Однак є виняток, що в HTML5 допустимо загортати елементи рівня блоку (наприклад div, pабо h*) в прив'язувальні теги. Обгортання елементів рівня блоку в вбудовані елементи, відмінні від анкерів, все ще суперечать стандартам.

— Darko Z
джерело

19

У HTLM5 це змінилося. Обидва приклади будуть перевірені - validator.w3.org .

— Atadj

хороший. це зробити просту помилку, і хоча обидва будуть підтверджувати свою логіку, що природні вбудовані елементи повинні бути нащадками елементів рівня рівня.

— bigmadwolf

@pushplaybang - Я б сказав, що обгортання заголовка у посилання є більш семантичним, якщо тільки частина заголовка не повинна бути клікабельною (я не можу придумати варіант використання для цього). Незалежно, приємно, що обидва підтримуються в html5.

— aaaaaa

48

HTML5 оновлює цю тему: тепер добре обертати елементи рівня блоку буквами A, як зазначено в іншому питанні: https://stackoverflow.com/a/9782054/674965 і тут: http://davidwalsh.name/html5- елементи-посилання

— f055
джерело

8

Ця відповідь зараз набагато актуальніша за прийняту відповідь

— Джош Давенпорт

@JoshDavenport Прийняту відповідь було оновлено, щоб відобразити це

— dan-klasson

2

Наскільки я розумію, HTML5 дозволяє вам загортати елементи рівня блоку у теги посилань. Однак помилки можуть з’являтися у старих браузерах. Я зіткнувся з цим у Firefox 3.6.18 і отримав moz-rs-header = "" вставлений у мій код. Таким чином, мій стиль порушився. Якщо вам важлива робота навколо вас, ви можете загортати теги посилань у діви. Далі наведено кращі пояснення того, чому працює додатковий код http://oli.jp/2009/html5-block-level-links/

— Kip Deeds
джерело

1

a > h1 спричинить труднощі при виборі тексту

Оскільки обидва цілком дійсні в HTML5, краще використовувати h1 > a

— Абхішек
джерело