## 02. Структура HTML-кода

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

- Головная часть HTML-программы
- Тело программы
  - Заголовки
  - Горизонтальная линия
  - Абзац
- Блочные и строчные элементы
- Стиль записи кода программы
  - Лесенка
  - Короткие строки
  - Теги большие, атрибуты маленькие

Элемент `HTML` — является основным элементом HTML-разметки. Все остальные элементы вложены в него, являются его потомками.

Элемент `HTML` задаётся парным тегом. Тег `<HTML>` открывает HTML-программу, а тег `</HTML>` — закрывает её.

Между этими двумя основными тегами располагается головная часть программы и её тело:

### Головная часть HTML-программы

Головная часть HTML-программы записывается между открывающим тегом `<HEAD>` и закрывающим `</HEAD>`:

В элементе-контейнере `HEAD` (он не имеет визуального образа на экране) описываются общие правила интерпретации HTML-кода в целом, и содержится вспомогательная информация о документе и его авторе.

Так, элемент

задаёт браузеру информацию о кодировке, в которой написан текст HTML-документа. В данном случае задана стандартная кодировка Windows.

Элемент `META` задаётся одиночным тегом и не имеет визуального образа на экране.

Между тегами `<TITLE>` и `</TITLE>` располагается текст, отображаемый в заголовке окна браузера:

Щёлкните мышкой на следующей ссылке и найдите текст “Первый HTML-документ” в заголовке окна браузера.

Первый HTML-документ

В окошке браузера Microsoft Internet Explorer вы должны увидеть:

> Название окна должно совпадать с заголовком страницы. Это очень удобно, когда окно с сайтом свёрнуто в кнопку на Панели Задач — на этой кнопке пользователь видит заголовок текущей страницы:

> Название окна заносится в набор избранных сайтов (меню Избранное), если пользователь решит запомнить ссылку на текущую страницу:

> Название окна — дополнительная подсказка пользователю о его текущем положении на сайте.

> В примере урока заголовок окна, заданный элементом `TITLE`, совпадает с заголовком страницы, заданный элементом `H1`: “Первый HTML-документ”.

В головной части HTML-кода используют и другие элементы. Этот, например, указывает имя автора документа:

А эти элементы задают описание документа и ключевые слова для поисковых систем:

### Тело программы

Между тегами `<BODY>` и `</BODY>` располагаются элементы, которые браузер последовательно выводит в окно документа (строит изображение).

Тело нашей простой программы содержит следующие элементы:

Элемент | Схема кода | Назначение
--- | --- | ---
`H1` | `<H1>...</H1>` | Заголовок
`HR` | `<HR>` | Горизонтальная линия
`P` | `<P>...</P>` | Абзац

#### Заголовки

Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают её восприятие.

Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня, а параграфы — пункты, обозначенные заголовками четвёртого уровня.

HTML поддерживает заголовки шести уровней при помощи конструкции:

`<Hn>`текст заголовка`</Hn>`

В качестве `n` следует использовать одну из цифр 1–6, обозначающую уровень заголовка.

При отображении страницы браузер выделяет заголовки размером шрифта и жирностью:

# Это заголовок 1 уровня

## Это заголовок 2 уровня

### Это заголовок 3 уровня

#### Это заголовок 4 уровня

##### Это заголовок 5 уровня

###### Это заголовок 6 уровня

Элементом `H1` задают, как правило, заголовок сайта, элементом `H2` — заголовок страницы, элементом `H3` — разделы на странице и так далее.

Например, страница “В лес за грибами” сайта “Лесные истории” может иметь следующий вид (справа от заголовков проставлен их уровень):

Уровни заголовков отражают структуру документа (показана на схеме справа). Однако, в HTML-коде иерархия документа закладывается только в номер уровня `Hn`, и не означает вложенность соответствующих фрагментов кода.

Код вышеприведённой страницы имеет вид:

Замечаем, что вложенность элементов в коде не совпадает с вложенностью фрагментов содержания страницы.

В коде все элементы `Hn` и `P` являются прямыми потомками элемента `BODY`.

> Использовать заголовки нужно очень аккуратно в соответствии с их иерархическими уровнями в структуре документа. Не следует использовать теги `<Hn>` для выделения обычного текста. Они применяются только для заголовков.

> Существуют специальные программы, которые автоматически составляют оглавление гипертекстового документа. Делают они это при помощи сбора информации из тегов `<Hn>`. Если заголовочные теги обрамляют обычные тексты или не отражают иерархическую структуру документа, оглавление будет построено неверно.

> Заголовок (сайта, страницы, разделов) нужно выбирать таким, чтобы он точно соответствовал содержанию. Красивая абстракция малопригодна для заголовка.

> Погрешность | Описание
> --- | ---
> Неудачные заголовки |
> Точки в коротких заголовках |

#### Горизонтальная линия

Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задаётся тегом `<HR>`, и этот тег не имеет парного закрывающего.

Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия отделяет заголовок в примере от основного текста:

Первый HTML-документ

#### Абзац

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

Абзацы отделяются друг от друга “красными” или пустыми строками. Красная строка — это первая строка абзаца с текстом, сдвинутым вправо.

Конечно, разделять текст на абзацы стараются, не как попало, а так, чтобы каждый фрагмент содержал законченную мысль.

Вот сейчас начат новый абзац, потому что закончено вступление, и разговор пойдет о том, как кодируются абзацы на HTML.

Задаётся абзац тегами `<P>` и `</P>`, между которыми помещается текст. Парный тег `</P>` является необязательным.

По умолчанию браузер использует не красную, а пустую строку (отступ) для отделения одного абзаца от другого.

Браузер отображает элемент `P` следующим образом:

1. Абзац выводится с новой строки и перед ним формируется отступ размером в пустую строку.
2. Абзац выравнивается по левому краю для языков с написанием слева направо и по правому для языков с написанием справа налево.
3. Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
4. Перенос текста на новую строку выполняется, если очередное слово не помещается в экранной строке, а не тогда, когда в HTML-коде начинается новая строка.
5. Завершая абзац, браузер выполняет переход на новую строку и формирует после абзаца отступ размером в пустую строку.

Посмотрите, как браузер перестраивает абзац в разных по ширине окнах (откройте документ и измените несколько раз ширину его окна):

Первый HTML-документ

Парный тег `</P>` является необязательным — браузер определяет конец текущего абзаца по началу следующего или началу другого элемента уровня блока (о делении элементов на строчные и блочные рассказано в следующем пункте). Однако на практике лучше использовать следующее правило: в цепочке элементов `P` последний элемент лучше записывать с закрывающим тегом. А можно все элементы `P` записывать парными тегами, тогда уж браузеру точно не к чему будет придраться!

### Блочные и строчные элементы

Элементы HTML разделяются на два класса — блочные и строчные.

Блочные элементы браузер выводит на экран в прямоугольные области, следующие друг за другом сверху вниз:

Блочный элемент занимает всю доступную ширину. Высота блочного элемента определяется его содержимым.

Приведённый выше рисунок соответствует, например, такому коду:

Цветной фон у блоков, правда, отсутствует, но его можно задать, используя свойства CSS (материал следующей темы учебника):

Строчные элементы содержатся внутри блочных и занимают место в строке, переходя на следующие строки, если в текущей не хватило места:

Элемент `HTML` является блочным. Внутри этого элемента расположен элемент — `BODY`, который тоже является блочным.

Прямые потомки `BODY` — всегда блоки: абзацы (`P`), горизонтальные линии (`HR`), заголовки (`Hn`) и другие. Даже если поместить в `BODY` строчные элементы, браузер автоматически “обернёт” их в специально созданные безымянные блоки.

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

Рассмотрим следующий пример:

Этот код содержит 6 блочных элементов. Элемент `HTML` является родителем `BODY`. Четыре блока в `BODY` браузер выводит в последовательные прямоугольные области, занимающие всю ширину `BODY`:

Каждый блочный элемент в `BODY`, кроме `HR`, содержит внутри себя строчные элементы.

Блочный элемент `H1` содержит один строчный безымянный элемент (текст заголовка):

Если ширина окна уменьшается, соответственно уменьшается ширина `H1` и строчный элемент занимает несколько строк:

Блочный элемент `P` в первом абзаце содержит три строчных элемента: безымянный, `EM` и ещё один безымянный:

Если ширина окна уменьшается, строчные элементы переносятся со строки на строку так, чтобы занять ширину содержащего их блока (`P`):

Внутри блочных элементов могут располагаться не только строчные, но и блочные элементы вперемежку со строчными:

Все строчные и неразмеченные элементы собираются в безымянные блоки (назовём их условно `БЛОК`):

Размещение на экране выполняется прежним способом: блоки выводятся в прямоугольные области, следующие друг за другом сверху вниз.

Блочные элементы могут содержать блочные и строчные элементы. Однако блочный элемент `P` является исключением: внутрь него разрешается помещать только строчные элементы.

Следующий код является ошибочным:

Можно ли размещать внутри строчного элемента блочные? Стандарт языка запрещает это: “строчные элементы могут содержать только данные и другие строчные элементы”.

### Стиль записи кода программы

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

#### Лесенка

Лесенка (ступенчатые отступы) отражает вложенность элементов друг в друга и позволяет легко увидеть в тексте границы больших многострочных конструкций.

Структурная лесенка должна повторять иерархическую структуру блочных элементов: каждый потомок смещается вправо по отношению к телу своего родителя (точки имитируют пробелы-отступы):

Начало и конец каждого блока занимают отдельные строки и записываются с одной и той же позиции. Потомок записывается между этими строками со сдвигом вправо (рекомендуемый сдвиг — 2 позиции).

Исключением могут быть короткие конструкции, начало и конец которых записываются в одной строке (например, `<H1>Заголовок</H1>`).

Структурную лесенку делайте только на теговом “каркасе” блочных элементов. Строчные элементы лучше начинать с первой позиции — так их легче записывать и редактировать.

#### Короткие строки

Для просмотра длинных строк приходится применять горизонтальную прокрутку, а это очень неудобно. Длина строки в коде не должна превышать 80 символов.

#### Теги большие, атрибуты маленькие

HTML позволяет записывать имена тегов, атрибутов и их значений в любом регистре. Для выделения тегового каркаса рекомендуется записывать названия тегов прописными буквами, а названия атрибутов и их значения — строчными.

вверх