Организация текста внутри документа

HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде или увеличивать левое поле. Разберём всё по порядку.

Ненумерованные списки: <ul> ... </ul>

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

Иван;
Данила;
белая кобыла

необходим вот такой HTML-код:

<ul>
    <li>Иван;
    <li>Данила;
    <li>белая кобыла
</ul>

Обратите внимание: у тега <li> нет парного закрывающего тега, но их рекомендуется использовать для соблюдения стандартов HTML5.

Нумерованные списки: <ol> ... </ol>

Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример:

<ol>
    <li>Иван;
    <li>Данила;
    <li>белая кобыла
</ol>

получится вот такой список:

Иван;
Данила;
белая кобыла

Списки определений: <dl> ... </dl>

Список определений несколько отличается от других видов списков. Вместо тегов <li> в списках определений используются теги <dt> (от английского definition term — определяемый термин) и <dd> (от английского definition description — описание определения). Разберём это на примере. Допустим, у нас имеется следующий фрагмент HTML-кода:

<dl>
<dt>HTML<dd>Термин HTML (HyperText Markup Language) означает 'язык разметки гипертекстов'.
Первую версию HTML разработал сотрудник Европейской
лаборатории физики элементарных частиц Тим Бернерс-Ли.
<dt>HTML-документ<dd>Текстовый файл с расширением *.html
(Unix-системы могут содержать файлы с расширением *.htmll).
</dl>

Этот фрагмент будет выведен на экран следующим образом:

HTML: Термин HTML (HyperText Markup Language) означает 'язык разметки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
HTML-документ: Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).

Обратите внимание: теги <dt> и <dd> теперь рекомендуется закрывать в соответствии со стандартами HTML5.

Форматированный текст: <pre> ... </pre>

В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение.

Текст, заключённый между тегами <pre> и </pre> (от английского preformatted — предварительно форматированный), выводится браузером на экран "как есть" — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.

Текст с отступом: <blockquote> ... </blockquote>

Текст, заключённый между тегами <blockquote> и </blockquote>, выводится браузером на экран с увеличенным левым полем.