Статьи

Переосмысление , , и в HTML5

Сегодня поговорим о несексуальном html5 . Одна из наиболее похвальных вещей, которую сейчас делает группа html5, — это обновление определений элементов, которые вызывали путаницу в прошлом. Вместо того чтобы унижать все эти элементы и вводить более новые, этим элементам было придано надлежащее семантическое значение, что проясняет большую часть путаницы, окружающей их. По крайней мере, в теории.

У каждого языка есть свои недостатки. Да … даже HTML. Я в блоге об
элементе адресараньше, но другие элементы, такие как <b> и <i>, также испытали свою значительную долю противоречий в те дни. Переопределение этих элементов хорошо, даже за счет временного введения нежелательной или неоднозначной семантической ценности (старый код никогда не мог быть написан с учетом более новых определений). Однако в некоторых случаях я твердо верю, что было бы лучше просто переосмыслить элемент с нуля.

dl: список определений или список описаний?

Список определений (<dl>), без сомнения, был одним из самых запутанных элементов HTML. Хотя на самом деле вполне правильно определены, его практическая ценность была очень ограничена. Недовольные этой ситуацией, многие люди продолжали возвращаться к ней, пытаясь найти правильное использование элемента. Определение «определения» стало почти богословской дискуссией, в результате чего список определений использовался в качестве разметки для форм и других странных, совершенно не связанных между собой структур.

Пришло время отпустить все это. Список определений больше не существует, да здравствует список описания. Хотя его название все еще может вызвать некоторую путаницу, определение, согласное с элементом, оставляет мало для воображения. Вот что w3c должен сказать по этому поводу:

Элемент dl представляет список ассоциаций, состоящий из нуля или более групп имя-значение (список описания).

W3C сайт

Важным здесь является использование «name-value» в определении, значительно расширяющее использование элемента и делающее его очень подходящим элементом для того, что я называю структурой caption-detail . Очень типичная структура, часто встречающаяся в метаданных и данных профиля.

Если вы хотите получить больше практической информации о модернизации dl, вы можете проверить статью доктора html5 .

Почему дл сосала в первую очередь

Дело в том, что самой большой проблемой с элементами dl никогда не было плохое практическое использование или строгое определение, а плохая структура. Первоначально он был разработан как список определений, случай, когда структура списка действительно имеет смысл. Но даже тогда тот факт, что уникальная пара терминов и определений может быть определена только на основе порядка (поскольку в них отсутствует уникальный содержащий элемент), превратил ее в структурный беспорядок. В отличие от других html-списков, здесь нет элемента, похожего на <li>.

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

Новое определение элемента дополнительно подчеркивает его структурную слабость. Если вы используете dl для метаданных, не существует подходящего способа добавить дополнительное семантическое значение (классы, такие как .author, .publishdate, .lastchanged, …). Конечно, вы всегда можете добавить класс к термину и установить правило, согласно которому следующие данные включены в данные, но это противоречит 20 годам правильного структурирования HTML и микроформатов.

На что это должно быть похоже

С новым элементом описания действительно нет веских оснований придерживаться концепции «списка». Элемент dl может функционировать как контейнер для каждой пары, однозначно идентифицируя одну группу имя-значение. Контекст элемента может (и должен) определять, является ли dl частью списка или отображается как отдельный элемент. Код говорит громче слов, поэтому ниже приведу пару примеров того, о чем я говорю.

Автор метаданных:

 /* name-value as meta data */  <dl class="author">  <dt>author:</dt>  <dd>Niels Matthijs</dd>   </dl> 

Полное имя поля данных в профиле:

 /* name-value as profile data */  <dl class="fullname">  <dt>name:</dt>  <dd>Niels Matthijs</dd>   </dl> 

Поле ввода полного имени в форме:

 /* name-value as input/form data */  <dl class="input fullname">  <dt>name:</dt>  <dd><input type="text" /></dd>   </dl>  

Вывод

Пара имя-значение (dt-dd) элемента dl является одним из немногих элементов HTML, который не определен уникальным родителем. Хуже того, его нынешняя структура фактически делает невозможным это сделать. Это большой структурный недостаток с заметным влиянием на стилизацию и JavaScript. Новое определение элемента dl намного лучше, но без структурных изменений этот элемент останется болью в заднице на долгие годы. Еще хуже, потому что новое определение фактически заставляет нас использовать элемент в большем количестве мест. Будем надеяться, что приятные люди из w3c не пожалеют времени, чтобы это исправить.