Базовая компоновка документа

Списки

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

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

Неупорядоченный список является последовательностью элементов, перед которыми стоит символ маркера, отделяемой от окружающего текста пустыми строками. Список выводится через один интервал и с отступом от левого края. Пример вывода неупорядоченного списка в браузере показан в листинге 2.15.

x Элемент списка 1
x Элемент списка 2
x Элемент списка 3

Неупорядоченный список создается с помощью блочного контейнерного тега <ul>, который ограничивает элементы списка, определяемые блочными контейнерными тегами <li> (list item). Общая форма неупорядоченного списка показана в листинге 2.16.

<ul>
  <li>элемент списка</li>
  <li>элемент списка</li>
  ...
</ul>

Например, маркированный список, показанный выше в листинге 2.15, задается следующим кодом.

<ul>
  <li> Элемент списка 1</li>
  <li> Элемент списка 2</li>
  <li> Элемент списка 3</li>
</ul>

Элементы списка выводятся через один интервал и содержат в начале символ маркера. Если текст элемента списка не умещается по ширине страницы, то он переносится по словам и делается отступ за символ маркера. Элементы могут заключаться в теги <p> (или между элементами могут вставляться теги <br/> ), чтобы увеличить строчный интервал между элементами. Следующий список, например, обрамляет элементы списка тегами <p>, чтобы создать дополнительные пустые строки между записями. Вывод браузера показан в листинге 2.19.

<ul>
 <li><p>Это первый элемент списка. Текст, идущий после символа маркера,
переносится по словам внутри маркера. Теги параграфа используются для
вставки пустых строк между элементами списка.</p></li>
  
 <li><p>Это второй элемент списка. Текст, идущий после символа маркера,
переносится по словам внутри маркера. Теги параграфа используются для
вставки пустых строк между элементами списка.</p></li>
</ul>

x Это первый элемент списка. Текст, идущий после символа маркера, переносится
  по словам внутри маркера. Теги параграфа используются для вставки пустых
  строк между элементами списка.

x Это второй элемент списка. Текст, идущий после символа маркера, переносится 
  по словам внутри маркера. Теги параграфа используются для вставки пустых
  строк между элементами списка.

Вложенные неупорядоченные списки

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

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2
      <ul>
        <li>Элемент списка 2a</li>
        <li>Элемент списка 2b
            <ul>
              <li>Элемент списка 2b1</li>
              <li>Элемент списка 2b2</li>
            </ul>
        </li>
      </ul>
  </li>
  <li>Элемент списка 3</li>
</ul>

x Элемент списка 1
x Элемент списка 2 
      x Элемент списка 2a
      x Элемент списка 2b 
            x Элемент списка 2b1
            x Элемент списка 2b2
x Элемент списка 3

Каждый вложенный список еще дальше сдвигается внутрь своего списка-контейнера. Для вложенных списков используются также различные символы маркеров. По умолчанию символ залитого круга помечает самый внешний список, символ окружности помечает следующий вложенный список, а символ залитого квадрата помечает внутренний список. Отметим, что когда списки содержатся внутри других списков, никакие пустые строки не окружают внутренние списки, как это происходит, когда одиночный список появляется в обычном потоке текста на странице.

Исключенный атрибут type

Атрибут type="disc|circle|square" можно задействовать внутри открывающего тега <ul>, чтобы определить стиль применяемого символа маркера, если он отличается от используемого по умолчанию диска. Текущие стандарты XHTML не рекомендуют пользоваться атрибутом type и предоставляют показанные далее другие средства для определения символов маркеров.

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

Упорядоченный список является последовательностью элементов, перед которыми стоят последовательные числа, выделенной из окружающего текста одиночными пустыми строками. По умолчанию список нумеруется последовательными десятичными числами, начиная с 1 и до последнего элемента списка.

Элементы списка выводятся через один интервал и смещаются от левого края таким же образом, как и неупорядоченный список. Пример упорядоченного списка показан ниже в листинге 2.22.

1. Элемент списка 1
2. Элемент списка 2
3. Элемент списка 3

Вывод упорядоченного списка в браузере.

Упорядоченный список создается с помощью контейнерного тега <ol>, который обрамляет элементы списка, идентифицируемые контейнерными тегами <li>. Общая форма кодирования упорядоченного списка показана в листинге 2.23.

<ol>
  <li>элемент списка </li>
  <li>элемент списка </li>
  ...
</ol>

Например, упорядоченный список, показанный выше в листинге 2.22, задается следующим кодом.

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>

Элементы списка выводятся через один интервал и с переносом слов внутри символа нумерации. Элементы списка могут содержать теги <p> или разделяться тегами <br/> для увеличения межстрочного интервала между элементами.