Структура HTML-документа

HTML-документ состоит из HTML-элементов, которые и преобразует текст в документе. Эти элементы называются тегами. Имя тега пишут в угловых скобках <  >.

Теги бывают одиночные и парные. Парный тег состоит из начального и закрывающего тега. Начальный тег показывает, где начинается преобразуемый текст, конечный — где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега:

<имя тега>…</имя тега>

Теги могут вкладываться друг в друга, например:

<p><i>Текст</i></p>

При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной:

<p><i>Текст</p></i>

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

<имя тега  имя атрибута="значение">

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

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

Можно объединять в группу несколько тегов с помощью атрибута class, присвоив ему имя группы.

Значения name,  id и class должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр:

<имя тега name=”pak”  id="N1" class="1kurs">

HTML-документ состоит из двух разделов:

1.   Заголовка, заключенного между тегами:

<head>…</head>

2.   Содержательной части, заключенного между тегами:

<body>…</body>

Структура HTML-документа:

<html>

<!-- Техническая информация о документе -->

<head>

<!-- Определяем кодировку символов документа -->

<meta charset="UTF-8">

<!-- Задаем заголовок документа -->

<title> ... </title>

<!-- Подключаем внешнюю таблицу стилей -->

<link rel="stylesheet" type="text/css" href="style.css">

<!-- Подключаем скрипт -->

<script src="script.js"></script>

</head>

<body>

         Основная часть HTML-документа

</body>

</html>

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

Строчные и прописные символы в именах (идентификаторах) тэгов и их атрибутов, как правило, не различаются.

Текст между <!--  и -->  является комментарием, т.е. не показывается в браузере.

Тег <link rel="stylesheet" type="text/css" href="style.css"> будет рассмотрен при изучении основ CSS. Его можно не писать, если в документе нет стилей.

Тег <script src="script.js"></script> используется, если есть файл скрипта (программа на языке JavaScript).   Он будет рассмотрен при изучении основ JavaScript.

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

Рис. 5

Теги, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model):

Описание: Описание: Описание: Описание: Описание: DOM

Рис. 6

При этом элемент <html> является корневым элементом.

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

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

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

Предок — элемент, который заключает в себе другие элементы. На рисунке 6 предком для всех элементов является html. В то же время элемент body является предком для всех содержащихся в нем тегов: h1, p, span, nav и т.д.

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, body является потомком html, а элемент p является потомком одновременно для body и html.

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 6 html является родительским только для head и body. Тег p является родительским только для span.

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 6 только элементы h1, h2, p и nav являются дочерними по отношению к body.

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 6 head и body — элементы одного уровня, так же как и элементы h1, h2 и p являются между собой сестринскими.