Посилання в заголовку або заголовок на засланні

Ерік Рейнж (Eric Range) виніс на обговорення, згадуваний даними постом питання. Що краще використовувати в якості обгортки, заголовок або посилання при спільному застосуванні відповідних елементів? З точки зору HTML5 обидва варіанти абсолютно валідниє.

Тема на засланні:

Який з них виберете ви? Я б сказав, що все залежить від ситуації.

Клікабелье область.

За замовчуванням елемент посилання є внутрістрочним (inline), а заголовок блоковим (block). Таким чином, якщо не змінювати ці вихідні установки за допомогою CSS, то клікабелье область для h1> a буде відповідати тій, яка виділена світло червоним кольором:

І навпаки, варіант a> h1 робить клікабельно всю область блочного елемента заголовка.

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

Ви, ймовірно, думаєте: «Збільшена клікабелье область? Але це ж добре! ». що, в принципі, розумно, за винятком таких моментів:

Незручності при виділенні тексту.

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

Дивацтва компонування.

Спостерігаючи за цим, ви, звичайно ж, думаєте, що все можна вирішити за допомогою CSS, але як ви поставитеся до ось такого «сюрпризу», що має місце при використанні підходу a> h1. в якому у елемента посилання є внутрішній відступ (* утворений установкою ненульового значення для властивості padding або border):

* Тут не все так очевидно і тому давайте дещо прояснити ситуацію. Справа в тому, що відповідно до стандарту CSS 2.1 при включенні в елемент сатиричного рівня блочного елемента, рядковий елемент-обгортка розбивається на три внутрістрочних блоку, один з яких є внутрішнім «реальним» блоком (в нашому випадку заголовком h1), а інші два є анонімними внутрістрочнимі блоками, утвореними в даному випадку браузером безпосередньо перед і після «реального» внутрістрочного блоку (див. тут). Таке стандартну поведінку браузера залишається непомітним до тих пір, поки відображається область зовнішнього елемента посилання визначається виключно його вмістом, тобто текстом. Текст є тільки в «реальному» внутрістрочном блоці, а анонімні через відсутність контенту встановлені в нульову висоту і ширину і тому невидимі. Як тільки ми явно впливаємо на розмірність анонімних внутрістрочних блоків, встановлюючи відмінну від нуля кордон або внутрішній відступ для елемента посилання, ми робимо їх видимими. Переконайтеся в цьому самі.

From a one-person survey held in central Wisconsin

Питання доступності.

Не знаю, я не впевнений. А чи є вони взагалі в даному випадку?

Хто ж переміг?

Я схиляюся до варіанту h1> a. як і більшість інших людей, що демонструє неформальний опитування.

Що, все ще є над чим поміркувати?

Тема наділення всіх елементів параметрами href = "" і target = "" обговорюється вже давно. Питання впирається головним чином в семантику, а це пояснює те, чому поведінка елементів до сих пір не стандартизовано. Крім того є думка, що це призведе до плутанини при використанні клавіатури в якості основного засобу пересування по сайту, так як все стане фокусируемое, що в свою чергу призведе до виникнення проблем доступності та юзабіліті. З цим важко не погодитися.

• Для семантики включите в елемент атрибут role = "link".
• Після кліка по елементу активуйте подія open (url, target) і не забудьте при цьому в якості другого параметра вказати _self при кліці лівою кнопкою і _blank - середньої.
• На закінчення, щоб включити наш елемент в послідовність табуляції, додаємо в нього атрибут tabindex = "0"

Взагалі-то, HTML5 не може допускати включення блоків в рядкові елементи апріорі, оскільки в цьому стандарті терміни «блоковий» і «рядковий» елемент взагалі відсутні. Тепер ці терміни використовуються виключно в CSS специфікації, яка, як раз таки і не дозволяє цього робити. Вкладеність HTML елементів і вкладеність CSS боксів - тепер це різні, мають окрему логіку речі. Однак в обох випадках слід дотримуватися правил. Якщо вам дійсно не обійтися без включення блоку в рядковий елемент, то для того, щоб уникнути описаних вище проблем компонування, вам необхідно для всіх елементів містять блоки використовувати декларацію display: block (або inline-block), незалежно від типу HTML елемента, тим більше , що HTML5 не забороняє подібну вкладеність.

А питання доступності у цій теми дійсно є і вони непогано описані Роджером Йохансоном і Стівом Фолкнера

Ще кілька доводів за і проти розглянутих тут варіантів.

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

- в мобільних пристроях (по крайней мере, в iOS) виділення знаходиться на засланні заголовка призводить до вибору посилання, а не тексту самого заголовка.

- виникають складності в разі необхідності стилізації знаходяться всередині посилання елементів в зв'язці з подіями hover, focus і active.