## 05. Структура и вид документа

Вы никогда не задумывались над тем, как устроен текст в книге? Речь идёт, конечно, не о содержании, а о внешнем виде текста на странице. На такие вещи часто не обращают внимания. Однако оформление текста либо помогает чтению, либо делает этот процесс утомительным.

На этой странице:

- Один и тот же текст может выглядеть по-разному
- Как правильно кодировать вывод текста

### Один и тот же текст может выглядеть по-разному

Посмотрите два представления одного и того же текста на экране.

Оформление текста. Антипример
Оформление текста. Пример

Вероятно, реакция на первый вариант была такой: “Это не текст, а какой-то ужастик!” Вы не можете себе представить, как часто попадаются в Интернете страницы, оформленные похожим образом.

Давайте не будем поддаваться соблазну использовать многочисленные возможности HTML по принципу — “чем больше, тем лучше”. Гораздо ближе к истине умеренное утверждение — “чем проще, тем понятнее”. Главное — не пестрота и многообразие, а хороший вкус и единый стиль.

Прежде чем перейти к рассмотрению тегов, задающих оформление текста на экране, поговорим немного о структуре документа и его внешнем виде. Мы ведь не хотим писать “ужастики”, подобные приведённому выше антипримеру.

### Как правильно кодировать вывод текста

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

Структуру текста лучше всего продумать заранее. Можно рекомендовать следующий способ оформления:

1. Запишите заголовок для всего документа. Он должен быть самым крупным (элемент `H1`) и выровнен по левому краю строки.
2. Разделите документ на главные части (главы). Заголовки глав выравниваются по левому краю и выводятся шрифтом меньшего размера (элемент `H2`).
3. При необходимости разделите главы на параграфы (заголовки `H3`), а параграфы — на пункты (заголовки `H4`). Все заголовки документа выравниваются по левому краю.
4. Текстовый фрагмент, обозначенный заголовком, разбейте на абзацы (элемент `P`). Абзацы должны быть небольшими и содержать законченную мысль.
5. В каждом абзаце используйте одни и те же приёмы оформления:
   - один тип выравнивания (рекомендуется по левому краю);
   - “нормальный” размер шрифта (по умолчанию);
   - полужирное начертание или курсив (но что-то одно) для выделения важных слов или коротких фраз;
   - курсив для выделения текстовых (обычных) ссылок или коротких цитат;
   - смещение большой цитаты вправо от левой границы текста (без курсивного выделения).
6. Решите вопрос о цветовой гамме своего документа. Выберите цвет фона и цвет основного текста. Подберите цвета для некоторых специальных выделений и используйте их одинаково на протяжении всего документа. Самые комфортные цвета: белый — для фона, чёрный — для текста и красный — для специальных случаев.

> Чёрный и белый цвет являются особыми цветами. Их нет в радуге, но в то же время любой цвет превращается в чёрный при уменьшении яркости до нуля и в белый при увеличении яркости до максимального значения. Эти цвета наиболее часто используются в дизайне, т. к. они хорошо сочетаются с большинством других цветов.

> Если вы чувствуете себя не совсем уверенно в цветовом пространстве, возьмите за основу чёрный и белый цвета, добавьте к ним красный — эта палитра вас не подведёт.

вверх