Структура HTML-документа. Часть 1

Структура веб-страницы

Содержание:

Часть 1

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

1.1. Элемент <html>

Часть 2

1.2. Элемент <head>

1.2.1. Элемент <title>

1.2.2. Элемент <meta>

1.2.3. Элемент <style>

1.2.4. Элемент <link>

1.2.5. Элемент <script>

1.3. Элемент <body>

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

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

HTML

1.<!DOCTYPE html> <!-- Объявление формата документа -->
2.<html>
3.<head> <!-- Техническая информация о документе -->
4.<meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->
5.<title>...</title> <!-- Задаем заголовок документа -->
6.<link rel="stylesheet" type="text/css" href="style.css"> <!-- 7.Подключаем внешнюю таблицу стилей -->
8.<script src="script.js"></script> <!-- Подключаем сценарии -->
9.</head>
10.<body> <!-- Основная часть документа -->
11.</body>
12.</html>

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

📷 Рис.1. Простейшая структура HTML-документа

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

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

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

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

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

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

1.1. Элемент <html>

Является корневым элементом документа. Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns, а также ‎глобальные атрибуты.

ТАБЛИЦА 1. АТРИБУТЫ ТЕГА <HTML>

Структура таблицы следующая: Атрибут - Описание, принимаемое значение

manifest - С помощью значения атрибута указывается путь к документу кэша манифеста, например:

<html manifest="about_company.appcache">

Продолжение в следующей статье!