Создание списков данных с помощью HTML DL, DT и DD

В недалеком прошлом многие любили верстать свои сайты, используя таблицы и, когда дело доходило до исправления ошибок, это становилось большой проблемой. Однако, и сейчас, когда дело доходит до построения списка данных на веб-странице, например, списка данных профиля, многие вместо тегов dl, dt, dd продолжают использовать таблицы HTML. Фактически, используя теги HTML DL, DT и DD, Вы экономите на написании кода и добавляете своему контенту больше семантического значения. Тогда как таблицу лучше всего использовать для табличных данных, и не следует использовать для списка данных, в веб-форме или веб-разметке.

Перед тем, как мы приступим к практическим шагам, рекомендую Вам посмотреть демо в конце статьи. Также Вы можете скачать пример из вложения в конце статьи.

Если Вы до сих пор создаете списки данных, используя таблицу, прочитайте статью и сравните, насколько можно облегчить себе жизнь с помощью тегов HTML dl, dt, dd.

Как это работает?

Табличный список данных

Обычный список данных с использованием таблицы. Сначала мы делаем строку таблицы tr, в которой будет две ячейки td, которые будут содержать заголовок и значение соответственно. Затем, когда потребуется назначить стили элементу title, нам придется присвоить ячейке таблицы td класс.

Ниже в CSS мы назначаем стили классу title, который объявили в HTML.

Отсюда видно, что, если понадобится изменить стиль или формат заголовка в CSS, вам придется присвоить каждому td заголовка класс. Если, помимо того, нужно присвоить стили данным, вам придется присвоить класс и им, так что на самом деле вы пишете слишком много кода. Большое количество кода означает большой размер файла для скачивания, большую возможность ошибок и сложность в поддержании.

Списочные данные DL, DT, DD

Теперь давайте взглянем на использование тегов HTML dl, dt, dd для построения данных в список. Сначала у нас появляется тег dl (список описаний), содержащий весь комплект данных, далее имеются теги dt (определяет пункт в списке) и dd (описывает пункт списка), содержащие заголовок и данные.

В CSS нам понадобится присвоить тегу dt свойство float, так заголовок списочных данных выровняется по левому краю. Остальные стили – на Ваше усмотрение.

На примере тегов dl, dt, dd видно, что таким образом кода получается меньше, он глаже и семантичнее.

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

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
4,00 / 5 баллов
1 участников
Комментарии

Здесь еще никто не оставлял комментарии.

Добавить комментарий

* - поля обязательные для заполнения. E-mail не публикуется.