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

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

Тоже самое и со списками, они также определяют структуру документа. Визуально списки отображаются следующим образом:

• Текст один
• Текст другой
• Текст сякой
• Текст эдакий

Это называется неупорядоченный список. Кроме неупорядоченных списков существуют еще и упорядоченные списки: 

1. Действие первое.
2. Действие второе.
3. Действие третие.
4. Действие четвёртое.

Различные типы списков можно употреблять одновременно друг с другом. Неупорядоченные списки вводятся тэгом <ul>:

<ul>

...

</ul>

Чтобы ввести элементы списка (текст один, текст другой…), нам нужно ввести в нашу конструкцию тэг <li> (не требует закрывающего тэга):

<ul>

<li>Текст первый

<li>Текст второй

<li>Текст третий

<li>Текст четвёртый

</ul>

В итоге получим:

• Текст первый
• Текст второй
• Текст третий
• Текст четвёртый

У тэга <li> есть атрибут type, он отвечает за стиль элемента списка, визуально это выглядит так:

По умолчанию - (1)

Полый кружок - (2)

Квадрат - (3)

В случае (1) - <li type="disk">,

в случае (2) - <li type="circle">,

в случае (3) - <li type="square">.

Атрибут type может вводиться не только для каждого элемента списка <li>, но и для всего списка в целом:

<ul type="square">

<li>Текст первый

<li>Текст второй

<li>Текст третий

<li>Текст четвёртый

</ul>

Очень часто тэг <ul></ul>, которым вводятся неупорядоченные списки, используется кодерами немного нестандартно, для создания отступа (табуляции). Если Вы пользовались текстовыми редакторами (допустим Word), то Вы знаете, что такое табуляция (это когда Вы жмете на кнопочку Tab и весь текст сдвигается, допустим, вправо), тоже самое мы можем сделать средствами html:

<ul>Ваш текст</ul>

В этом случае мы не использовали тэг <li>, и не ввели элементы списка. Как мы уже говорили, такое применение тэга <ul></ul> не стандартно, а значит нежелательно, т.к. не предусмотрено спецификацией, однако, если Вам это нужно, то мы считаем, что, в данном случае, не страшно нестандартно воспользоваться тэгом <ul>, ведь визуально это отобразиться всеми броузерами, а также избавит Вас от необходимости вводить лишние таблицы в Ваш документ, чтобы достичь того же эффекта стандартными средствами. Чтобы отступ (табуляция) был больше, можно вложить тэг <ul> в самого себя:

<ul><ul>Два отступа</ul></ul>

<ul><ul><ul>Три отступа</ul></ul></ul>

Поделиться...