Нумерованные и маркированные списки

Многие из вас уже создавали маркированные и нумерованные списки в редакторе MS Word. Внешний вид списков в чистом HTML почти ничем не отличается от них. Чтобы создать список, необходимо каждый пункт этого списка заключить в тег элемента списка <li>, а затем все элементы списка заключить в один общий тег - контейнер, обозначающий маркированный (<ul>) или нумерованный (<ol>) список. В данном примере я покажу, как создаётся маркированный список:

1. <ul>
2. <li>1ый элемент списка</li>
3. <li>2ой элемент списка</li>
4. <li>3ий элемент списка</li>
5. </ul>

Нумерованный список создаётся таким же образом, только вместо тега <ul> используется тег <ol>.

Также возможно делать вложенные списки. Для этого в элемент списка вставляется ещё один спискок. То, в какой последовательности вы вкладывается маркированные и нумерованные списки друг в друга не имеет значения. Вы можете вкладывать в нумерованный список совершенно любой вид списков. Аналогично и для маркированного. Пример вложения в маркированный список нумерованного:

1. <ul>
2. <li>1ый маркированного списка</li>
3. <li>2ой маркированного списка
4. <ol>
5. <li>1ый нумерованного списка</li>
6. <li>2ой нумерованного списка</li>
7. <li>3ий нумерованного списка</li>
8. </ol>
9. </li>
10. <li>3ий маркированного списка</li>
11. </ul>

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

Списки определений используются для создания списка терминов и их определений. Каждый пункт этого списка представляет из себя термин и его определение. В общем случае, каждый пункт — это пара «имя/значение». Например, данные списки также применяют для форматирования вопросов и ответов к ним. Чтобы создать список определений, необходимо каждое «имя» заключить в тег <dt>, после каждого имени расположить его «значение» и заключить его в тег <dd>, а затем все эти элементы заключить в тег - контейнер <dl>. Пример:

1. <dl>
2. <dt>Имя 1</dt>
3. <dd>Значение 1</dd>
4. <dt>Имя 2</dt>
5. <dd>Значение 2</dd>
6. <dt>Имя 3</dt>
7. <dd>Значение 3</dd>
8. </dl>

Допустимо использовать несколько значений для одного имени (для этого разместите все значения после соответствующего имени), и для одного значения несколько имён (записывается список имён, а после размещают значение, соответствующее перечисленным именам).

Сводка рассмотренных тегов

	Маркированный список
<ul>...</ul>	Используется для форматирования маркированных списков. В этот тег помещаются все элементы списка. Является блочным элементом. По умолчанию имеет внутренний отступ слева.
	Нумерованный список
<ol>...</ol>	Используется для форматирования нумерованных списков. В этот тег помещаются все элементы списка. Является блочным элементом. По умолчанию имеет внутренний отступ слева.
	Элемент списка
<li>...</li>	С помощью этого тега выделяют элемент списка. Данный тег не является ни блочным, ни встроенным. Имеет тип отображения "display: list-item;". Данный тип отображения мы не рассматривали, но по отображению он схож с блочными элементами, за исключением добавления маркера списка слева.
	Список определений
<dl>...</dl>	Используется для форматирования списка терминов и их определений. В этот тег помещаются все имена и соответствующие им значения. Является блочным элементом.
	Имя списка определений
<dt>...</dt>	С помощью этого тега выделяют имена списка определений. Является блочным элементом.
	Значение списка определений
<dd>...</dd>	С помощью этого тега выделяют значения списка определений. Является блочным элементом. По умолчанию имеет внешний отступ слева.

Таблицы

Многие из вас уже создавали таблицы в редакторе MS Word. Язык HTML предоставляет похожие возможности форматирования таблиц. В нём можно управлять количеством ячеек, их размерами, объединять ячейки и т.д. Мы рассмотрим самые основные и необходимые способы форматирования, но углубляться в остальные возможности не станем. Скорее всего, вы с таблицами столкнётесь в реальной жизни очень не скоро. Но поскольку необходимым пластом знаний вы уже будете обладать, вам не составит труда их изучить полностью.

Многие из вас таблицы видели лишь только на сайте «Википедия» и более нигде с ними не сталкивались. Большинство сайтов просто не нуждается в предоставлении каких-либо табличных данных. Даже если будет необходимо разместить подобные таблицы, чаще всего тех возможностей, о которых мы поговорим в этом разделе, будет достаточно.

Раньше, когда HTML только зарождался, таблицы активно использовались при создании дизайна страницы. Это было связано с тем, что на тот момент ещё не было CSS. Для создания структуры страницы создавали таблицу такой ширины, чтобы она умещалась на экране большинства компьютеров. И в зависимости от дизайна, создавалось нужное количество ячеек с определёнными размерами. Чаще всего это были трёх-колоночные или двух-колоночные макеты, в которых был один блок с основным контентом, и один или два блока по бокам с дополнительной информацией, навигацией и т.д. Например, трёх-колоночный макет создавался таблицей 3×3. Ячейки первой и последней строки объединялись в одну. Это были шапка и футер сайта. Во второй строке ячейкам задавали необходимую ширину. Затем в необходимые ячейки добавлялись картинки дизайна обычной вставкой тега <img>. Если дизайн был сложный, то в некоторые ячейки вставлялись ещё таблицы с нужным количеством ячеек и в них, опять же, вставлялись картинки.

Сейчас создание макета страницы с помощью таблиц считают, мягко говоря, плохим тоном. Во первых, таблицы необходимы для предоставления табличных данных, и не для использования в дизайнерском оформлении страницы, т.е. применение таблиц в дизайне есть грубая семантическая ошибка. Анализировать такие страницы поисковым роботам весьма затруднительно, а программы для чтения страниц, которыми пользуются слабовидящие, не могут сориентироваться на таких страницах и дать необходимую пользователю информацию. Во вторых, появился язык CSS, возможности которого позволяют сделать не только простой трёх-колоночный или двух-колоночный макет, но и более сложные макеты, в которых элементы могут располагаться весьма необычным образом и таблицы с такими задачами не справились бы. В третьих, HTML код страницы, свёрстанной на таблицах является более громоздким и трудночитаемым по сравнению с кодом, в котором применялись лишь теги организации структуры страницы (о которых мы поговорим позже) и CSS.

Базовая структура таблицы

Теперь перейдем к изучению таблиц. Таблицы в HTML создаются при помощи двойного тега <table>. Внутри этого тега размещают строки таблицы двойным тегом <tr> (сокращение от table row), а в каждой строке размещают ячейку строки двойным тегом <td> (сокращение от table data). Пример таблицы 3×3:

1. <table>
2. <tr>
3. <td>Cтрока 1, ячейка 1</td>
4. <td>Cтрока 1, ячейка 2</td>
5. <td>Cтрока 1, ячейка 3</td>
6. </tr>
7. <tr>
8. <td>Cтрока 2, ячейка 1</td>
9. <td>Cтрока 2, ячейка 2</td>
10. <td>Cтрока 2, ячейка 3</td>
11. </tr>
12. <tr>
13. <td>Cтрока 3, ячейка 1</td>
14. <td>Cтрока 3, ячейка 2</td>
15. <td>Cтрока 3, ячейка 3</td>
16. </tr>
17. </table>

Таблицы отображаются на странице с новой строки. Тег <table> имеет тип отображения table («display: table;»), тег <tr> - table-row («display: table-row;»), тег <td> - table-cell («display: table-cell;»). Это новые для нас типы отображения. Сейчас мы не будем на них останавливаться. Более подробно о них я рекомендую почитать на сайте http://web ref.ru/ после освоения курса по CSS. Знание этих типов отображения в дальнейшем поможет вам, например, центровать текст по вертикали, с чем часто сталкиваются web-разработчики и может вызвать затруднения.

В тегах <tr> допустимо использовать различное количество тегов <td> (например в первой строке 2 ячейки, а во второй 3), но результат такого действия вас скорее всего разочарует. Если вы попытаетесь таким образом объединить ячейки, то у вас ничего не выйдет. На каждую ячейку будет выделено ровно столько пространства, сколько допустимо в столбце, в котором она находится. Т.е. растянуть одну ячейку на величину двух ячеек у вас не выйдет. Плюс ко всему, эти ячейки будут расположены по порядку, и если вы хотели, допустим, пропустить какие-то ячейки, то они выведутся по порядку, а в конце останется пустое пространство без ячеек. Поэтому на начальном этапе при форматировании таблиц всегда создавайте во всех строках одинаковое количество ячеек.

Для создания заголовочных ячеек используют тег <th> (сокращение от table header). Он отличается от тега <td> тем, что содержимое в такой ячейке будет выделено полужирным и выравнено по центру. Семантический смысл тега <th> - это выделение заголовков. Поэтому не используйте этот тег, если вам нужно просто выделить какие-то ячейки полужирным и выравнять по центру. Для этих целей пользуйтесь возможностями CSS. Также, как и тег <td>, тег <th> имеет тип отображения table-cell.

1.9.7.2 Теги <thead>, <tfoot>, <tbody>

Помимо этого есть возможность группировать строки таблицы тегами <thead>, <tfoot>, <tbody>. Они не являются обязательными, но крайне рекомендую их использовать. Эти теги наделяют части таблицы семантическим смыслом. Строки, выделенные тегом <thead> считаются заголовочными, <tfoot> - нижний колонтитул таблицы, <tbody> - основной контент таблицы. Располагать их в таблице необходимо в таком порядке: сначала <thead>, после <tfoot> и лишь затем <tbody>. Несмотря на то, что <tfoot> в коде располагается до <tbody>, браузеры выводят его в конце таблицы. Допустимо использовать в таблице лишь один тег <thead> и один <tfoot>. Количество тегов <tbody> может быть любым. С помощью нескольких тегов <tbody> можно разделить основной контент таблицы на смысловые части. Например в таблице могут быть представлены какие-либо данные за несколько лет. Строки с данными, представленными за один год, можно выделить тегом <tbody>. Типотображениятега<thead> - table-header-group, тега<tfoot> - table-footer-group, тега<tbody> - table-row-group. Сейчас вам это ни о чём не говорит, но вам стоит знать, что данные теги имеют отличный тип отображения от тегов <tr>. Возможно это поможет вам в дальнейшем избежать ошибок при написании CSS кода. Чем-то особенным, данные типы отображения не обладают.

1.9.7.3 Тег <caption>

Название таблицы можно разместить в теге <caption>. Этот тег располагают внутри тега <table> в самом начале, до тегов <thead>, <tfoot>, <tbody> и т.п. Также в этом теге могут размещаться подсказки по структуре таблицы или краткое описание её содержимого. Тип отображения по умолчанию table-caption. Также, как и типы отображения тегов <thead>, <tfoot> и <tbody>, этот тип отображения ничем особенным не выделяется. Пример форматирования таблицы с использованием рассмотренных тегов:

1. <table>
2. <caption>...</caption>
3. <thead>
4. <tr>
5. <td>...</td>
6. ...
7. <td>...</td>
8. </tr>
9. ...
10. <tr>...</tr>
11. </thead>
12. <tfoot>
13. <tr>...</tr>
14. ...
15. <tr>...</tr>
16. </tfoot>
17. <tbody>
18. <tr>...</tr>
19. ...
20. <tr>...</tr>
21. </tbody>
22. <tbody>
23. ...
24. </tbody>
25. </table>

Объединение столбцов

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

1. <table>
2. <tr>
3. <td colspan="2">Эта ячейка займет пространство 2х столбцов</td>
4. </tr>
5. <tr>
6. <td>Строка 2, Столбец 1</td>
7. <td>Строка 2, Столбец 2</td>
8. </tr>
9. </table>

Объединение строк

Чтобы объединить строки, используется тот же приём с растягиванием ячейки, что и с объединением столбцов. Только в данном случае, растягивается она сверху вниз на указанное количество ячеек. Для этого добавляется атрибут rowspan и задается значение атрибута, равное количеству ячеек, которое в итоге будет занимать ячейка. Пример:

1. <table>
2. <tr>
3. <td colspan="2">Эта ячейка займет пространство 2х строк</td>
4. <td>Строка 1, Столбец 2</td>
5. </tr>
6. <tr>
7. <td>Строка 2, Столбец 2</td>
8. </tr>
9. </table>

Сводка рассмотренных тегов

	Таблицы
<table>...</table>	Создаёт элемент таблицы. Семантическое значение — форматирование табличных данных. Применение таблиц для дизайнерского оформления страницы является семантической ошибкой. Тип отображения по умолчанию — table. Таблица с данным типом отображения всегда начинается с новой строки.
	Строка таблицы
<tr>...</tr>	Создаёт строку таблицы. Тип отображения по умолчанию — table-row. Каждая строка таблицы начинается (логично) с новой строки.
	Ячейка таблицы
<td colspan="N" rowspan="M"> ... </td>	Создаёт ячейку таблицы. Тип данных ячейки может быть любым. Тип отображения по умолчанию — table-cell. Атрибут colspan растягивает ячейку вправо так, что её ширина становится равной N ячеек. N — целое число. Атрибут rowspan растягивает ячейку вниз так, что её высота становится равной M ячеек. M — целое число.
	Ячейка таблицы с заголовочной информацией
<th colspan="N" rowspan="M"> ... </th>	Создаёт ячейку таблицы. Данный тег предназначен для хранения заголовочной информации таблицы соответствующего столбца или строки. Тип отображения по умолчанию — table-cell. Атрибут colspan растягивает ячейку вправо так, что её ширина становится равной N ячеек. N — целое число. Атрибут rowspan растягивает ячейку вниз так, что её высота становится равной M ячеек. M — целое число.
	Группа строк в области заголовка
<thead>...</thead>	Группирует строки, являющиеся заголовочными. Допустимо лишь единственное упоминание в таблице. Необязательный тег. Тип отображения по умолчанию — table-header-group. Должен быть расположен после элемента <caption>.
	Группа строк в области нижнего колонтитула
<tfoot>...</tfoot>	Группирует строки, являющиеся нижним колонтитулом таблицы. Допустимо лишь единственное упоминание в таблице. Необязательный тег. Тип отображения по умолчанию — table-footer-group. Должен быть расположен после элемента <thead>.
	Группа строк основной части таблицы
<tbody>...</tbody>	Группирует строки, являющиеся основной частью таблицы. Допустимо использовать несколько раз для разделения контента таблицы на логические части. Необязательный тег. Тип отображения по умолчанию — table-row-group. Все теги <tbody> должны быть расположены после элемента <tfoot> по порядку.
	Описание таблицы
<caption>...</caption>	Выделяет название/описание таблицы. Допустимо лишь единственное упоминание в таблице. Необязательный тег. Тип отображения по умолчанию — table-caption. Должен быть расположен в самом начале таблицы (после открывающего тега <table>).

Общие элементы

Теперь поговорим об общих элементах. Эти элементы не имеют своих особенных стилей отображения. Также у них нет никакого семантического значения. Это теги <div> и <span>. Они используются там, где нет специальных тегов, которые бы подходили по семантическому значению или там, где этого значения и вовсе не должно быть.

Тег <div> имеет тип отображения block (блочный элемент). И это всё, чем он обладает. Ни особенного стиля форматирования, ни семантического значения у него нет. Обычно он используются в связке с CSS. И это один из самых распространённых тегов при вёрстке, т.к. он используется для задания структуры страницы путём расположения этих блоков в нужных местах. Например один блок для шапки, второй для контента, третий для сайдбара и четвертый для футера. Расположение блоков определяется CSS кодом. Об этом более подробно мы поговорим в главе посвящённой CSS. А вот пример HTML кода для того же трехколоночного макета, который мы рассматривали при вёрстке таблицами:

1. <div> Шапка </div>
2. <div>
3. <div> Левая колонка </div>
4. <div> Центральная колонка </div>
5. <div> Правая колонка </div>
6. </div>
7. <div> Футер </div>

По сравнению с версткой таблицами этот код менее громоздкий и достаточно гибкий. Дизайн можно будет в любой момент изменить с помощью CSS, но HTML код при этом не нуждается в доработке.

Тег <span>отличается от тега <div>только типом отображения. В отличии от тега <div>он имеет значение inline (встроенный элемент). Он используется для придания какого-либо стиля отображения кусочкам текста, которые нельзя семантически разметить с помощью существующих тегов. Например, можно этим тегом выделить логин и e-mailпользователя сайта в его профиле или добавить с помощью этого тега какой-то особенный символ-иконку, которые сейчас часто используются вместо изображений (например есть пакет иконок, называемый Font Awesome, в котором присутствует особенный шрифт, содержащий эти иконки).

	Тег <div>
<div>...</div>	Тип отображения по умолчанию block (блочный элемент). Семантического значения не имеет.
	Тег <span>
<span>...</span>	Тип отображения по умолчанию inline (встроенный элемент). Семантического значения не имеет.