В этой статье хотелось бы рассказать что такое дерево документа в html и как связаны элементы в нём.

В html документе многие теги являются вложенными в другие, на пример:

< html> < head> < title> Примерный заголовок < body> < div class = ”container”> < h1> Что- то важное < div class = ”left”> < h2> Чуть менее важная инфо < p> Содержимое страницы < ul> < li> Пункт 1 < li> Пункт 2 < li> Пункт 3

Так выглядит код страницы, однако разработчик видит его иначе. Этот хаотический набор символов благодаря пониманию структуры документа выстраивается в четко определенную схему. Так он видит что head и body вложены в html, а h2 p ul в div class=”left” и так дальше.

Дерево документа – схематическое представление кода страницы, отражающие взаимосвязи тегов между собой.

В свою очередь в зависимости от характера связи объединяющего элементы страницы они подразделяются на предков и потомков, родителей и дочерей, сестринские элементы и прочее.

Предки и потомки

Как было сказано выше, в html коде элемент может внутри себя включать другие. Следовательно, тэг внутри которого находятся прочие тэги, называется предком (ancestor), а эти «другие» называются потомками (descendant).

Количество потомков у предков ничем не ограничивается. Количество же предков будет зависеть от расположения элемента внутри структуры документа.

Родители и дочери

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

Количество дочерних элементов содержащихся внутри родителя ничем не ограничено, но дочерние могут иметь только одного родителя.

Родителей и дочерей еще иногда называют прямыми предками и прямыми потомками .

Рассмотрим на нашем примере

Head выступает родителем и предком для title, а он выступает дочерним элементом и потомком для head; h2, p, ul, li выступают потомками для div class=”left”, в тоже время как li одновременно является потомком для ul и div class=”left”, а родителем li выступает только ul . В этом и заключается основное отличие предка от родителя, и дочери от потомка.

Сестринские элементы (siblings)

К ним относятся дочерние элементы с общим родителем.

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

h2, p, ul, являются сестринскими и относятся к родителю div class=”left”, в то же время все li также будут сёстрами только под родителем ul.

Смежные (adjacent)

Теги стоящие в структуре документа рядом и имеющие единого родителя.

Так, для нашего примера, h2 смежный c p, ul смежный p, а p смежный ul и h2 одновременно.

Предыдущий и следующий сестринские

Тут всё просто: следующий сестринский элемент (following sibling) – по коду идет сразу после интересующего нас тега и имеет с ним общего родителя, а предыдущий сестринский (preceding sibling) представляет из себя тег предшествующий нашему и также имеющий с ним единого родителя.

Предыдущий и следующий

Крайне похожи на только что описанные нами связи, но есть нюансы - в этом случае для нас не имеет значения наличие общего родителя. Например если для h2 нету предыдущего сестринского тега, то просто предыдущим (preceeding) для него будет div class=”left”, со следующим (preceding) та же картина.

Первый и последний ребенок

Первый ребёнок (first-child) – это дочерний элемент, который является первым для своего родителя, последний ребёнок (last-child) – соответственно последний тег внутри родителя.

Например для div class=”left” первым ребёнком будет h2, а в качестве последнего выступает ul.

Корневой элемент

Им считается тег, который не имеет ни предков, ни родителей. Он включает в себя все «ветви» нашего дерева и открывается в самом начале документа ( < html> ), а закрывается в самом конце ( ).

Подводя итоги

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

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

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

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

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.

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

Текст

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

Текст

.

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

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

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

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

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Структура веб-страницы 1. Структура HTML-документа

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

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

...

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

Рис. 1. Простейшая структура веб-страницы

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

Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,

, , и т.д.

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

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

1.1. Элемент 1.2. Элемент

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

1.2.1. Элемент

Обязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

1.2.2. Элемент

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

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url: