Насколько это глупо и почему?

[Arinden]

Подскажите, пожалуйста, насколько имеет место быть такой код (кирпичами не кидать):

<form>
<ul>
  <li>
   <input id="radio-buy" type="radio" name="radio" value="buy">
   <label id="label-buy" for="radio-buy">
    <dl>
	 <dt>
	  <h2 title="Category 1">Category 1</h2>
	 </dt>
	 <dd title="Category description">item 1, item 2, item 3</dd>
    </dl>
   </label>
  </li>
  <li>
   <input id="radio-sell" type="radio" name="radio" value="sell">
   <label id="label-sell" for="radio-sell">
    <dl>
	 <dt>
	  <h2 title="Category 2">Category 2</h2>
	 </dt>
	 <dd title="Category description">item 1, item 2, item 3</dd>
    </dl>
   </label>
  </li>
</ul>
</form>

Edited September 30, 2013 by Arinden

[SelenIT]

Как минимум, это не по феншу спецификации: разрешенная модель содержимого у label — phrasing content («инлайновые элементов» по-старому). А ради чего всё? Только ради того, чтобы по клику на весь блок переключалась радиокнопка без скрипта?

[Zverushka]

Валидтор не зарубит - значит можно же. А он не зарубит вроде.

[SelenIT]

Ну как же не зарубит, если Content model не подходит? Зарубит, конечно. Причем дважды (заголовки в dt тоже недопустимы — каждый заголовок создает отдельную неявную секцию, а список описаний, по логике, должен бы относиться к одной секции).

Но с невалидностью еще можно было бы кое-как смириться, если бы она позволяла решить какую-то практическую задачу. А какую задачу решает двойное выделение заголовков еще и как часть пары «имя — значение» и подписывание радиобаттона целым разделом контента?

[Arinden]

The element h2 must not appear as a descendant of the dt element. - Не понимаю почему, но хорошо, ладно. Меняем код и получаем:

Element dl not allowed as child of element h2 in this context. (Suppressing further errors from this subtree.) Contexts in which element dl may be used: Where flow content is expected.

Но ведь и <h2> и <dl> это flow content.

А есть какая-то таблица где сказано какой элемент какие элементы может содержать, чтобы поучиться?

Задачу которую я пытаюсь решить это научиться использовать теги по их назначению в объёме который бы полноценно описывал контент страницы. Я знаю человека, который верстает страницы одними дивами, никаких тебе даже ul с li или параграфов. Но ведь если разобраться под большинство представляемой информации есть соответствующие теги, так почему их не использовать? Если требуется форма с двумя радио, для каждого радио положены label, они же являются заголовками h2 и при этом для каждого варианта радио есть определение, типа расшифровка (dl, dd, dt). В некоторых местах хотим иметь title и не дай бог ещё и кастомизированный радио (+<span></span>). Я не издеваюсь, просто я учусь и у меня есть маниакальное стремление к использованию тегов не когда они потребовались для дизайна, а когда они потребовались для типа контента.

Edited October 1, 2013 by Arinden

[SelenIT]

Сам элемент может быть flow content-ом, но внутри себя допускать только phrasing content. Заголовки и абзацы именно таковы.

Заголовок не может быть потомком dt, потому что это явно оговорено в спеке:

4.5.9 The dt element

...

Contexts in which this element can be used:

Before dd or dt elements inside dl elements.

Content model:

Flow content, but with no header, footer, sectioning content, or heading content descendants.

Почему такое ограничение? Моя интуитивная догадка, что это потому, что заголовки делят документ на неявные секции и учитываются в его «как бы оглавлении» (document outline), если разные части одного списка окажутся в разных местах этого «оглавления», любой машинный анализатор запутается. Но вообще вопрос интересный, на досуге пороюсь в архиве рассылок W3C на эту тему.

Если требуется форма с двумя радио, для каждого радио положены label, они же являются заголовками h2 и при этом для каждого варианта радио есть определение, типа расшифровка... Я не издеваюсь...

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

А есть какая-то таблица где сказано какой элемент какие элементы может содержать, чтобы поучиться?

Имхо, лучше всего смотреть непосредственно в спецификации.

[Arinden]

действительно хочу увидеть пример, где такое требуется

Я разумеется пишу образно, и не обязательно про конкретный код. Я хотел показать что код перегружен тегами, которые нужны для проявления логической цепочки, а не для дизайна страницы. Так как если бы речь шла о дизайне, то код можно в 4 раза меньше сделать. Пример который можно привести для использование данного кода.. хм.. ну например элемент <h1>Опрос</h1>, далее под <h2> идут вопросы, под ними формы с тем кодом который дал я (ну только не h2, а h3 там тогда будет). И вот вышеуказанный код для радио с вариантами определения чего либо. Т.е. например нужно выбрать определение слова которое нравится посетителю больше. Поэтому у нас есть и input и lable, а если вариант радио смысловой и значим для SEO берём его в h3. Так как сам вариант это слофо (фраза), а dd это определение. Ну как-то так. Опять же я образно. Потому что вопрос не то чтобы в конкретном случае, а в том чтобы стараться описать тегами содержимое, как картину словами - больше слов - чётче представление.

Edited October 1, 2013 by Arinden

[SelenIT]

а если вариант радио смысловой и значим для SEO берём его в h3

Насколько я в курсе, современные алгоритмы поисковиков не любят «переслащивания» ключевых слов выделяющими тегами. Например, <h2><strong>слово</strong></h2> продвигается хуже, чем они по отдельности. Так что выделять слова заголовками только ради SEO — плохая идея.

например элемент <h1>Опрос</h1>, далее под <h2> идут вопросы, под ними формы с тем кодом который дал я (ну только не h2, а h3 там тогда будет). И вот вышеуказанный код для радио с вариантами определения чего либо. Т.е. например нужно выбрать определение слова которое нравится посетителю больше.

Имхо, выбор определения не равен самому определению. Я бы сказал, что здесь просто набор равнозначных альтернатив (т.е. неупорядоченный список ul), каждый элемент которого содержит радиобаттон и label к нему. А если нужны пояснения для самих вариантов, то они — именно дополнение к label-у, а не его часть (возможно, тут скорее подойдет details с label-ом в summary).

[Arinden]

SelenIT, очень классная ссылка, спасибо большое! Это интересно почитать. А вот, смотрите, там сказано, что влияние ul -> li всего 13%, в то время как даже у параграфа выше. А про dd ничего не сказано. А у header одно из самых высоких. И вот такой вопрос, если мы кусок кода включая ul li input label заключаем в noindex? Поиск пропускает и элементы в том числе, читая только оставшийся «чистый header» с текстом или он будет видеть что тег header пересекается и list item и прочее, как Вы думаете? А как узнать что приоритетнее использовать, ведь я могу того же эффекта добиться только li или только div'ами, но при этом я могу и вписать заголовок и список и окружить его определениями. Есть какие-то таблицы и инструкции?

Edited October 1, 2013 by Arinden

[Arinden]

А есть какой-то ресурс с материалом который мог бы помочь таким как я недоразвитым занудам ознакомиться с рекомендациями на тему где и какой тег лучше использовать, какие теги не стоит включать в другие, от использования чего лучше отказаться и т.д. Не просто что header нельзя в dd - это мне и валидатор скажет. Но ведь далеко не всё то что валидно - красиво и логично написано. Вот как по Вашей ссылке информация о том, что больше любят поисковики, ведь как до такого можно дойти самому? Лично для меня это нереально. Так вот и с тегами в целом, наверняка есть и статистика и пособия, руководства и прочее. Знаете что-нибудь?

[Zverushka]

Тег должен использоваться соответственно его назначению, то есть семантически. И по-моему единственно верное руководство расписано на w3c.org с примерами, как надо и как не надо использовать теги.