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

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

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

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

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

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

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

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

<table>
	<tr>
		<td class="title">Имя: </td>
		<td class="text">Иван Иванович</td>
	</tr>
	<tr>
		<td class="title">Возраст: </td>
		<td class="text">23</td>
	</tr>
	<tr>
		<td class="title">Пол: </td>
		<td class="text">Муж.</td>
	</tr>
	<tr>
		<td class="title">Дата рождения:</td>
		<td class="text">12 Мая 1986</td>
	</tr>
</table>

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

table {
	margin-bottom: 50px;
}
 
table tr .title {
	background: #5f9be3;
	color: #fff;
	font-weight: bold;
	padding: 5px;
	width: 120px;
}
 
table tr .text {
	padding-left: 10px;
}

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

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

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

<dl>
	<dt>Имя: </dt>
	<dd>Иван Иванович</dd>
 
	<dt>Возраст: </dt>
	<dd>23</dd>
 
	<dt>Пол: </dt>
	<dd>Муж.</dd>
 
	<dt>Дата рождения:</dt>
	<dd>12 Мая 1986</dd>
</dl>

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

dl {
	margin-bottom: 50px;
}
 
dl dt {
	background: #5f9be3;
	color: #fff;
	float: left;
	font-weight: bold;
	margin-right: 10px;
	padding: 5px;
	width: 120px;
}
 
dl dd {
	margin: 2px 0;
	padding: 5px 0;
}

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

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

Демо


Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
Комментарии | Добавить свои
  • Комментарии не найдены