htmlBLOG

Блог веб-разработчика

Пишу о создании сайтов, блогов на WordPress, html, css, ajax. Делаю темы для WordPress

марта 08 2010

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

В рубрике: html & css, шпаргалки

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

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

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

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

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

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

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

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

1
2
3
4
5
6

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

в браузере:

Ёжик:

Маленький
Колючий
Прикольный

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

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

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

1
2
3
4
5

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

в браузере:

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

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

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

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

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

1
2
3
4
5
6
7
8
9

<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>

в браузере:

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

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

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

Удачи.

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

Популярность: 87%

Тэги: html, W3C, xhtml, верстка, списки, стандарты, шпаргалки

Связанные записи

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.