HTML - это язык разметки, он помогает браузеру понять что нужно отображать на сайте. Именно в html трансформируются все зеро и готовые блоки.

HTML включает в себя огромное количество тегов. Вы наверное видели когда добавляли модификации: <script> ...какой-либо код </script> или <style> ...какой-либо код </style>

Либо же <div> ...какой-либо код </div>

Если нет, то обратите внимание на все модификации, которые вы добавляете, и увидите там какой-либо из этих тегов.

Эти элементы так и называются - теги.
Стоит ли учить все теги? Нет, даже верстальщику кодом не надо их учить. Надо знать что они существуют и знать для чего они нужны.

На самом деле теги постоянно будут удаляться и дополняться браузерами.

Наша задача - знать основы, а другие теги как например <form></form> которые используются только для форм, либо <h1></h1>, который используется для заголовков, вы найдете в процессе развития и улучшения своих знаний в коде.

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

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

Давайте внимательно рассмотрим что происходит на видео

1. Мы включаем инспектор
2. Выбираем инструмент для выбора элемента и проводим по разным элементам
3. В видео я выбрал желтый квадрат, с ним поработаем

Инструмент нам показал какой код относится к этому элементу.

А самое главное удобство - при работе с этим инструментом: когда вы наводите на код в инспекторе - подсвечивается элемент на сайте.
Четкого названия у этого инструмента нет, поэтому в рамках документации будем называть его "Инструмент" или "Инструмент инспектирования"

Давайте выделим код, который выделяет нам наш желтый квадрат

Ничего не понятно, правда?
Так и есть, любому программисту, чтобы понять код, нужно сначала в нем разобраться

И с чего начать разбираться?

1. С чего начинается код

Начинается с <div class....

<div> - это один из тегов HTML, самый базовый, который создает абсолютно любой элемент на странице.

Следовательно наш желтый квадрат начинается с <div...

2. Далее идет class
Внутри class, а именно внутри кавычек class="" - как вы уже догадались находятся все классы элемента. Внутрь элемента можно засунуть сколько угодно классов разделяя их пробелом, чем тильда и занимается. Каждый класс относится к своей компонентной системе кастомизации или функционала

Что такое class? Классы добавляются в тег для идентификации элемента, чтобы вы потом могли этому тегу добавить красоты или функционала.

Все остальное, что идет после классов, это атрибуты. Еще бывает в <div> тег встраивают ID, но в данном случае ID у нас нет.

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

Уже не так уж и страшно, правда?

Я думаю вы уже заметили, что class пишется именно внутри <div>
То-есть важно соблюдать синтаксис

Не снаружи, по типу <div> class="..."
А правильно: <div class="...">Вот здесь уже контент</div>

Важно понимать, что классы, ID, атрибуты - пишутся именно внутри тега
И все это образуется в один элемент.

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

Теперь давайте разберемся со структурой целого объекта. Объект может состоять из нескольких тегов <div>

К примеру для текста нам хватит и одного тега, как я сделал выше в примере с синтаксисом.

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

Здесь я выделю 3 пункта

1. <div class="t396__elem tn-elem tn-elem__7922642091470210224069">
2. <div class="tn-atom"></div>
3. </div>

С первой строчкой все понятно, классы и начало <div мы обсудили выше.
А что на второй строчке?

И почему на второй строчке в конце имеется </div>
А на первой строчке такого нет?
И зачем на третьей строчке </div>?

И почему вообще <div> пишется со слешем "/"?

Каждый тег в html должен закрываться. Это правило, и в тильде в блоке T123 оно жестко контроллируется.

Попробуйте создать блок T123 и написать там: <div>
Вы не сможете сохранить такое, и тильда выдаст ошибку.

А теперь добавьте рядом </div>
И попробуйте сохранить.

Получилось? Отлично, так и должно работать.

Вот такой код вы добавляли себе в T123, теперь давайте окончательно разберемся с нашим желтым квадратом из зеро.

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

И последний шаг в изучении структуры будет тема "Родители и потомки"

Я уверен, вы работали в фигме, тильде или фотошопе с группами. Теги могут работать аналогично.

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

<div> - Мы создали родительский элемент написав тег
<div></div>
</div> - Мы закрыли элемент продублировав родительский тег со слешем

Как видите, я не закрыл тег сразу же, а добавил в него: <div></div> и только после этого закрыл родительский тег.

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

<div> - Мы создали родительский элемент написав тег
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div> - Мы закрыли элемент продублировав родительский тег со слешем

А теперь я создал целый блок с 5 дочерними элементами.
И к каждому элементу мы можем добавить классы, id и атрибуты.

Таким образом становится понятнее что тут написано:

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

А почему тильда для одного квадрата создает родительский элемент и дочерний - хороший вопрос.

Ответ кроется в структуре тильды. Если вы будете писать сайт чистым кодом возможно вам такое и не понадобится, но тильда работает именно так.

Каждый элемент в ZERO блоке имеет свою "обертку" родительский элемент с несколькими классами:
t396__elem - Класс элементов во всех зеро блоках
tn-elem - Класс всех элементов в тильде
И уникальный класс:
tn-elem__7922642091470210224069 - Цифры у каждого уникального класса разные, здесь написано для примера

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

И внутри каждого такого блока в зеро - есть дочерний элемент с классом tn-atom
На видео я показал как выглядят стили для обоих блоков. Заметьте у элемента с классами tn-elem нет никаких сильных видоизменений, зато у элемента с классом tn-atom есть изменение цвета и множество других стилей.

Итак, что мы поняли в этой главе:

1. Что такое HTML теги или элементы
2. Где искать и куда пишутся классы
3. Что теги могут вмещать в себя другие теги и создавать целые объекты
4. Как тильда работает с элементами в ZERO

Советы для закрепления темы:
- Создайте страницу с добавьте туда ZERO блок
- Попробуйте повторить все, что происходило на видео т.е попробуйте поискать элементы из стандартного набора ZERO
- Попробуйте создать еще элементов в ZERO блоке и найдите их через инспектор