# Структура веб-страницы
# Как мы говорили ранее, язык CSS используется для описания внешнего вида страницы, которая написана с помощью языка разметки HTML. Для того чтобы сказать браузеру, что данная кнопка должна быть, например, зелёной, нужно указать путь к кнопке,  например, с помощью CSS-селектора. Селектор однозначно выделит кнопку среди других элементов html-страницы и задаст кнопке цвет green. Знание правил написания CSS-селекторов понадобится и нам, чтобы искать элементы на HTML-странице и взаимодействовать с ними.

# Также нам понадобится знание трёх особенностей языка HTML:

# Страница на языке HTML состоит из элементов, начало и конец элемента задаются с помощью специальных пометок – тегов (tag);
# У тегов есть атрибуты, которые определяют свойства элементов;
# Страница на языке HTML имеет иерархическую структуру.
# 1. Tag – элемент или тег
# Начало и конец элементов обрамляются специальными словами – тегами (tag). Задача тегов – обозначить, какой именно тип информации на странице они представляют (картинка, текст, блок, ссылка и так далее). Например:

# <p>Здесь написан текст.</p>
# В первом примере элемент обозначен открывающим (<p>) и закрывающим (</p>) тегами, между тегами помещён текст, который увидит пользователь. Некоторым тегам закрывающий тег не нужен, достаточно только открывающего. Например, тег:

# <br>
# Это тег для переноса строки, внутри него никакого текста или вложенных элементов быть не может. 

# 2. Attribute – атрибуты элемента
# Элементам можно задавать различные стандартные свойства, а также создавать собственные свойства или атрибуты. В примере ниже помимо тегов и текста добавлен еще атрибут href, который задаёт ссылку для тега <a>, на которую будет вести текст внутри тега.

# <a href="/about">Посмотреть подробнее</a> 
# Атрибут class

# В третьем примере появляется еще один важный атрибут – класс (class). Элементу задано два класса: simple-text и main. Классы чаще всего используют для задания правил вёрстки с помощью CSS:

# <div class="simple-text main">Здесь написан текст.</div>
# Атрибут name 

# Свойство name, например, используется для задания якоря (закладки) в html-странице. Этот атрибут тоже можно использовать в качестве селектора для поиска элемента:

#   <a name="top"></a>
#   <p>Длинный текст</p>
#   ...
#   <p><a href="#top">Наверх</a></p> 
# Атрибут id

# В этом примере появился еще атрибут id – уникальный указатель на элемент. Значение id не должно повторяться в пределах страницы:

# <button class="edit_button" id="save_button">Сохранить</button>
# !Важно. В современных JavaScript-фреймворках id-атрибуты чаще всего генерируются динамически самим фреймворком, поэтому они изменяются каждый раз при перезагрузке страницы и совершенно нечитабельны, например: вы увидите что-то вроде id="u_ps_0_0_n" или id="avadspffd". В таких случаях вам придется пользоваться другими селекторами или использовать собственные data-атрибуты, о которых мы расскажем далее. Названия классов также могут генерироваться автоматически. Поэтому предлагаем вам простое правило: если увидите нечеловекочитаемое название атрибута или если значение атрибута меняется при перезагрузке страницы, то избегайте его использовать. В наших примерах мы используем статические страницы, поэтому вы смело можете использовать описанные здесь CSS-селекторы.

# 3. Иерархия в HTML-документах
# HTML-документ часто сравнивают с моделью семейного древа, в котором есть родители, дети, братья, предки и потомки. Такое сравнение допустимо благодаря возможности вкладывать одни элементы в другие. Вложенные (дочерние) элементы могут, в свою очередь, содержать свои дочерние элементы, следовательно, глубина вложения элементов может быть любой.

# Давайте разберёмся с терминологией данного древа:

# потомок элемента X – элемент любой степени вложенности внутри элемента X;
# ребёнок или дочерний элемент — прямой потомок (т.е. элемент на первом уровне вложенности);
# предок элемента Y – любой элемент X, который включает себя элемент Y;
# родитель — это прямой предок (т.е. элемент, который расположен выше строго на 1 уровень);
# братский или соседний элемент – элемент X, который расположен на одном уровне иерархии с элементом Y. Элементы X и Y имеют одного родителя.
# Эти знания помогут нам применять мощный механизм поиска элементов с помощью CSS-селекторов.