Есть ли разница между <h2><a>content<a/></h2> и <a><h2>content</h2></a>
При переделывании проекта вдруг возник вопрос - А есть ли разница? Не нарушает ли это семантику?
Asked
Active
Viewed 677 times
4
Air
- 14,505
Rafael Shepard
- 577
-
3"Миллион" лет назад разница была. Сейчас можно вкладывать блочные элементы в строчные. – Air May 04 '18 at 09:03
-
Вроде раньше нарушало может и сейчас – May 04 '18 at 09:04
-
@Duoxx, можно.... Не нарушает... – Air May 04 '18 at 09:04
-
Ну я так редко делаю, считаю это немного странным. Но это выбор каждого. – May 04 '18 at 09:08
-
Описание старой спецификации https://www.w3.org/TR/html4/struct/links.html#h-12.2.2 – Air May 04 '18 at 09:10
-
Описание изменений спецификации https://www.w3.org/TR/html/textlevel-semantics.html#the-a-element – Air May 04 '18 at 09:11
-
А это источник https://habr.com/company/htmlacademy/blog/336638/ – Air May 04 '18 at 09:11
-
@Air, Сейчас можно вкладывать блочные элементы в строчные - не все и не во все – Grundy May 04 '18 at 09:14
-
@Grundy, Ну думаю, что это не плохо было бы описать более подробным ответом. – Air May 04 '18 at 09:16
-
2@Air, ага, как только по свободнее буду постараюсь :-) – Grundy May 04 '18 at 09:19
-
Спасибо, ребята. – Rafael Shepard May 04 '18 at 10:35
2 Answers
3
Спецификация определяет какие элементы может хранить описываемый элемент в секции Content Model
Для элемента A в этой секции указано следующее:
Transparent, but there must be no interactive content or a element descendants.
Transparent, однако не должно быть интерактивных элементов, или вложенных <a>
Под интерактивными в данном случае имеются ввиду следующие:
<a>если атрибутhrefустановлен<audio>если атрибутcontrolsустановлен<button><details><embed><iframe><img>если атрибутusemapустановлен<input>если атрибутtypeне равенhidden<label><select><textarea><video>если атрибутcontrolsустановлен
Component Model: Transparent, означает, что компонентная модель будет применена такая же как и у родительского элемента.
Следовательно если какой-то элемент не может быть в родительском элементе, то он не может быть и в элементе <a> вложенном в родительский.
Если у элемента с Transparent компонентной моделью нет родителя, то считается, что он может хранить flow content (в который входит и h2).
Из этого следует, что если ссылка находится непосредственно в теге body (например), который имеет component model: Flow Content, то запись
<a><h2>content</h2></a>
Вполне допустима, если же ссылка находится, например, внутри <p> элемента, который имеет component model: Phrasing content, то уже недопустима.
Grundy
- 81,538
0
"Миллион" лет назад разница была. Сейчас можно вкладывать блочные элементы в строчные. (c) Air
Rafael Shepard
- 577