Три слоя

HTML Шаг 1 · 15 минут

HTML. Что здесь есть

Первый слой — структура: какие элементы есть на странице и в каком порядке они идут. Без цвета, размеров и реакции на клик.

После этого шага ты сможешь

  • посмотреть на HTML и увидеть в нём панель слоёв;
  • объяснить, почему в HTML нет координат;
  • показать, где у элемента имя и зачем оно.

1.1

Тег и элемент

Вот кнопка «Подписаться», записанная на .

<button> открывающий тегчто это Подписаться содержимоечто внутри </button> закрывающий тегконец
всё вместе — элемент

говорит браузеру, что это. Содержимое — что внутри. Как слой в Figma: тип и содержимое.

В открывающем теге бывают настройки: откуда взять картинку, куда ведёт ссылка, какое у элемента имя. Это атрибуты. Запоминать их не надо.

1.2

Дерево. Это панель слоёв

Элементы вкладываются друг в друга: в карточке лежат фото, имя, описание, число подписчиков и кнопка. Получается .

Ниже — HTML карточки с первого экрана, без CSS и JS. Справа то, что из него показывает браузер, и панель «Слои», собранная из этого кода.

ДЕМО 1A Карточка: структура

  1. Поменяй число подписчиков 128 на любое другое. Посмотри, где оно изменилось в панели «Слои».
  2. Перенеси строку с кнопкой <button …> выше строки с именем <h2 …>: вырежи её и вставь на новое место.
  3. Удали подсвеченное class="follow" у кнопки. Изменилось ли что-нибудь в результате? Потом нажми «Сбросить».

Выглядит плохо: огромное фото и вертикальный список с голой серой кнопкой. Так и должно быть. Это только структура.

Панель слоёв в Figma — это и есть дерево HTML. В Figma ты его рисуешь, здесь оно написано.

Отступы в коде показывают вложенность, как отступы в панели слоёв: всё, что сдвинуто вправо под card, лежит внутри карточки.

1.3

В HTML нет координат

Вспомни второе задание в демо 1A: ты перенесла строку с кнопкой выше строки с именем, и кнопка переехала наверх. Никаких X и Y ты не трогала, поменялся только порядок строк. Если пропустила это задание, вернись к демо и попробуй, это полминуты.

В Figma у слоя есть X и Y. В HTML их нет. Есть порядок и вложенность. Где элемент окажется на экране, решит CSS.

1.4

Класс — имя слоя

Третье задание в том же демо 1A: ты удалила class="follow" у кнопки, и в результате ничего не изменилось. А в панели «Слои» у кнопки пропало имя: осталось безымянное button.

— имя, которое дали элементу. Само по себе оно ничего не делает: убери его, и ничего не изменится. Оно нужно, чтобы CSS и JS могли найти этот элемент.

Как аккуратно названный слой в Figma, только этим именем действительно пользуются. Запомни это слово: оно свяжет все три шага.

1.5

Правильный тег даёт поведение бесплатно

<button> умеет нажиматься с клавиатуры и называется кнопкой для скринридера, <a> сама ведёт по ссылке. Коробка <div> не умеет ничего. Поэтому бывает важно, каким тегом сделан элемент.

?

Проверь себя

  1. Что из этого не HTML: текст на кнопке, цвет кнопки, порядок элементов?

    Цвет. Текст и порядок — структура. Цвет — оформление, его задаёт CSS.

  2. Зачем кнопке class="follow", если на вид ничего не меняется?

    Чтобы CSS и JS могли её найти. Это имя, по которому другие слои обращаются к элементу.