Как правильно обернуть тег h2 ссылкой?

Question

[Grizar]

Так уж у меня получается что мне нужно или ш засунуть в а или на оборот, может это и криво и так не делается но так получается
1 вариант

<a href= ""  > 
         <h2> что-то </h2>
</a>

2 вариант

<h2>
<a href= ""  >   что-то </а>
</h2>

Капец, сложный вопрос.

Comments

[Михаил]

лучше 2й, следуя логике "строчные в блочных"

[Rustam Bainazarov]

Второй вариант.

[Froggyweb]

Tahir, чего нет?

[Froggyweb]

Tahir, да ладно, а раньше свойства display не было?
Если ссылка выглядит как кнопка она не станет кнопкой после этого. Так же с блочными и инлайновыми элементами.
Оба варианта в топике кстати -г....но. Зачем засовывать ссылку в заголовок и тем более заголовок в ссылку - ХЗ

[Сергей delphinpro]

Froggyweb, Что значит зачем?
Список блогов. У каждого элемента в списке есть заголовок, который является ссылкой на полный текст.

Grizar, Используйте второй вариант. Тогда активная область будет только над текстом, а не по всей ширине блока

[Rustam Bainazarov]

Froggyweb, не совсем понял нападение на ссылку в заголовке :)) Вот, например, заголовки секций на главной странице интернет-магазина, которые являются по совместительству ссылкой на категории. Или, например, заголовок записи на странице блога. Ну и т. д.

[Rustam Bainazarov]

Tahir, с помощью CSS можно всё это можно делать, да, вот только, к сожалению до сих остаётся семантика и валидаторы. Иногда к ним прислушиваться важно и нужно. CSS влияет на внешний вид только, но не на структуру документа. Froggyweb привёл верный пример со ссылкой и кнопкой.

[Rustam Bainazarov]

Tahir, а я разве написал обратное?

[Rustam Bainazarov]

Tahir, почему нельзя — можно. Просто есть ряд моментов, когда пофиг, а когда лучше не надо. Например, начинают всплывать эти моменты, когда вы заботитесь об accessibility. W3C многие такие моменты умеет показывать.

Так же есть момент поисковой индексации. Там иногда бывает нужно соблюдать чёткую структуру.

Ну и плюс, есть момент некорректного парсинга документа старыми браузерами, если вы поддерживаете крупный проект, это тоже может стать проблемой.

[Rustam Bainazarov]

Tahir,

Приведите пример, когда вложение блочных элементов в строчные влияет на индексацию?

Вам на эту тему могут разработчики Ozon'а многое сказать, мне друзья оттуда многое чего рассказывали, но мне было особо пофиг, т. к. не люблю это дело, этим вопросом другой мой коллега занимался по их рекомендациям. Это было связано со разметкой блоков описаний товаров, где было много доп. информации и блоков, помимо p, ul и т. п.

Покажите хотя бы один пример, когда парсер выдаёт ошибку.

Года два назад в команде верстал для IE9 и UC браузера панель управления одну. В IE9 у клиента на машине всё меню и карточки-ссылки были поломаны У нас у всех были всё нормально в том же IE9, но чуть другой версии (или сборка это там называется). Коллеги не могли долго понять, в чём прикол, а ломала меню следующая структура: a > li > div > img + div, заработало, когда поменяли на li > a > span > img + span. Карточки ломала структура a > ul, починила структура a > span > ul (последнее — LOL).

На accessibility влияет структура разметки.

Согласен, поэтому и стоить проверять валидатором и скринридером. И по результатам проверки, если это важно, менять структуру.

[Rustam Bainazarov]

Tahir, коллега сейчас подсказала, что в том IE9 ещё такая структура ломала: span > p. Не знаю, кто такое вообще делает, если честно. Команда из очень разных людей была просто.

[Rustam Bainazarov]

Tahir, а вы и не найдёте, это же личный разговор в кафе был. Ничего не могу ничего сказать нормального, мне было с ними интересно говорить только про производительность JS-махины их frontend'а и аналитику их дизайн-решений. Когда они начали про своё SEO говорить, я всё прослушал, там уже мой коллега слушал, это его любимая ипостась.

Конечно невалидный. Это как пример веселья парсинга разметки и про то, когда можно, а когда нельзя. Вот если бы тот, кто это делал, пользовался валидатором, он бы его предупредил. Версия IE9, которая была у меня на ПК, справилась с такой косой структурой и все нормально отредерила. А у клиента — сказала до свидания. Не думаю, правда, что такое возможно с a > h2. Я там занимался, слава богу, только дизайном и делал мини-фреймворк для форм, кнопок и т. п. Из говна и палок там всё было собрано.

P. S. Всё та же коллега подсказывает, что ряд скринридеров в случае структуры a > h3 произносят, что это ссылка *пауза* и лишь потом сам текст из h3.

Например, если обернуть ссылкой весь блок с кучей текста (я так обычно делаю), то скринридер будет произносить весь текст, когда хватит и заголовка. На сайте BBC с этим справились с помощью ссылки внутри h3 + отдельный элемент со ссылкой на position: absolute, который весь блок охватывает для нажатия:


Поэтому без погружения для скринридера у них доступен только текст из головка, это удобно:



Словом, повторюсь, что, конечно, надо всегда за структурой смотреть и делать правки. Моментов куча, а я один. И я пошёл работать дальше :))

[Rustam Bainazarov]

Tahir, да не за что! Я когда погружаюсь в это accessibility и браузерные баги, мне становится грустно.

Answer 1

[WapSter]

На данный момент можно в тег ссылки засовывать блочные элементы. А на будущее почему бы не пользоваться валидатором и не задавать глупых вопросов.