Блок 1 · Урок 6 из 7

HTML, CSS, JavaScript — три роли одной страницы

Любая веб-страница собрана из трёх слоёв. Один отвечает за «что есть», второй — за «как выглядит», третий — за «что происходит». Разберём раз и навсегда, кто за что.

⏱ ≈ 7 минут 🧱 фундамент фронтенда 🎯 цель: видеть слои

Зачем это вам

Это три «кирпича», из которых в итоге собрано всё на фронтенде — даже когда сверху стоят React, Tailwind и прочее. Браузер в конце концов понимает только их. Разложив работу по этим ролям, вы перестаёте путать «поправь текст», «поправь вид» и «поправь поведение» — и точнее ставите задачу агенту (а если вы учите других — даёте им самую ясную картину фронтенда).

Действующие лица

Три роли, три ответа

У каждого слоя — свой вопрос, на который он отвечает. Код ниже не нужно писать — достаточно научиться его узнавать.1,2,3

🧱

HTML

структура · «что есть»

Каркас и содержание: какие на странице заголовки, тексты, кнопки, поля, картинки.

<h1>Магазин</h1>
<button>Купить</button>

Говорит: на странице есть заголовок и кнопка «Купить».

🎨

CSS

оформление · «как выглядит»

Внешний вид: цвета, шрифты, размеры, отступы, расположение. Та же страница — но красивая.

button {
  background: teal;
  border-radius: 8px;
}

Говорит: кнопки — бирюзовые, с округлыми углами.

⚙️

JavaScript

поведение · «что происходит»

Действия и реакция: что случается по клику, вводу, таймеру. Страница оживает.

button.onclick = () => {
  alert('Спасибо!');
};

Говорит: по клику на кнопку — показать сообщение.

📌 Как отличить на глаз. Угловые скобки <…> — это HTML. Свойства вида цвет: значение в фигурных скобках — это CSS. Команды и реакции на действия («по клику…») — это JavaScript.

Аналогия, которую можно пересказать

Строим дом

Представьте, что страница — это дом:

🧱 HTML— коробка дома: стены, комнаты, двери. Само здание и что в нём есть.
🎨 CSS— отделка: краска, обои, мебель, свет. Дом тот же, но теперь в нём приятно.
⚙️ JavaScript— электрика и «умный дом»: щёлкнул выключатель — зажёгся свет. Дом реагирует на действия.

Как это работает вместе

Браузер собирает все три в одну страницу

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

И ещё важное для вас как заказчика: React, Vue, Tailwind, shadcn и прочее (им посвящён блок 4) — это не что-то «вместо» этих трёх. Это удобные надстройки, которые в итоге всё равно порождают HTML, CSS и JavaScript — потому что только их и понимает браузер.

Запомните одно правило

Сначала структура, потом вид, потом поведение

Зависимость односторонняя: HTML может жить сам по себе (просто некрасивая и «неживая» страница). А вот CSS и JavaScript без HTML бесполезны — им нечего оформлять и нечего оживлять.

Поэтому, когда что-то «сломалось»: нет элемента вовсе — вопрос к HTML; элемент есть, но выглядит не так — к CSS; выглядит верно, но не реагирует — к JavaScript.

Что это даёт на практике

Фраза агента → что он имеет в виду

«Поправлю разметку / семантику»
Работа с HTML: структура и содержание — какие элементы есть на странице.
«Стили поехали, поправлю CSS»
Работа с CSS: внешний вид — отступы, цвета, расположение.
«Навешу обработчик / это на клиентском JS»
Работа с JavaScript: поведение — реакция на клик, ввод, действие.
«Сделаю адаптив под мобильный»
Это CSS (медиа-запросы): тот же HTML по-разному выглядит на телефоне и на ноуте.

HTML (HyperText Markup Language) — язык структуры: размечает, что есть на странице.

CSS (Cascading Style Sheets) — язык оформления: задаёт, как это выглядит.

JavaScript — язык поведения: задаёт, что происходит в ответ на действия.

Браузер — программа, которая собирает эти три слоя в готовую страницу (подробнее — ранее в этом блоке, урок «Как работает веб»).

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. На странице нужно добавить новое поле «Телефон» в форму. Какой слой за это отвечает в первую очередь?

2. Кнопка есть, но она должна стать крупнее и синей. Что меняем?

3. Нужно, чтобы по клику на кнопку открывалось окно с сообщением. Чья работа?

4. Что из этого верно про зависимость слоёв?

Куда мы идём

Программа курса — 7 блоков