Работа со списками в HTML

Привет. Сегодня я хочу рассказать о работе со списками в HTML. В обще стоит взять за правило, всё что по логике является списком, т.е. перечислением, делать именно при помощи предусмотренных как раз для этого тэгов.

Список — письменный перечень, число, состав; документ, содержащий перечень каких-либо сведений;

Работа со списками HTML проста и в тоже время помогает правильно преподносить информацию.

Для примера отключите стили в браузере при просмотре какой-либо страницы. Если страница сверстана правильно, то у вас не будет никаких проблем с восприятием информации, навигацией по сайту и т.п.

В HTML есть 3 вида списков:

• Неупорядоченный (этот)
• Упорядоченный
• Список определений

Неупорядоченный список

Неупорядоченный список (англ. Unordered Lists) — список в котором порядок пунктов не особо важен, т.е. при перестановке этих пунктов смысл не потеряется. Это может быть перечисление каких-либо особенностей объекта.

Ёжик:
<ul>
  <li>Маленький</li>
  <li>Колючий</li>
  <li>Прикольный</li>
</ul>

в браузере:

От перестановки эти характеристик понимание ёжика ни как не пострадает.

Упорядоченный список

Упорядоченный список (англ. Ordered Lists) — как уже, наверное все уже догадались, список в котором порядок пунктов важен. Это может быть инструкция, пошаговое руководство, рейтинг.

<ol>
  <li>Зарегистрируйтесь</li>
  <li>Подтвердите регистрацию</li>
  <li>Начните пользоваться</li>
</ol>

в браузере:

Согласитесь, в другом порядке проделать эти действия просто невозможно.

Список определений

Список определений (англ. Definition Lists). В отличие от ранее упомянутых видов списков, списки определений не только позволяют просто перечислить кучу предметов (параметров), но также ассоциируют каждый термин с его определением.

Списки определений начинаются и заканчиваются тэгами <dl>...</dl>. Каждый элемент списка состоит из термина <dt>...</dt> и определения <dd>...</dd>. По умолчанию определение отображается под термином и с небольшим отступом.

<dl>
  <dt>HTML</dt>
  <dd>от англ. HyperText Markup Language - язык разметки гипертекста</dd>
  <dt>XHTML</dt>
  <dd>англ. Extensible Hypertext Markup Language - расширяемый язык
разметки гипертекста</dd>
  <dt>CSS</dt>
  <dd>англ. Cascading Style Sheets — каскадные таблицы стилей</dd>
</dl>

в браузере:

Удобно, не правда ли? Вот и все, что я хотел сегодня рассказать.

Если вы еще не подписаны, то подпишитесь чтобы следить за обновлениями и ничего не пропустить.

Удачи.

---

↑ К оглавлению ↑

---

2leep.com

---

---