HTML, CSS і JavaScript: з чого зібрана вебсторінка

Ви просите агента поправити сторінку, і в простому проєкті з'являються файли з незрозумілими назвами: index.html, style.css, script.js. Або вони вже були, а у звіті агента написано "змінив стилі" - і з цієї фрази незрозуміло, що саме він чіпав.

Розберемо три базові технології, з якими працює браузер: HTML, CSS і JavaScript. Для наочності візьмемо просту статичну сторінку без збірки. У реальному репозиторії файли можуть називатися й лежати інакше, тому перед зміною корисно попросити агента показати структуру проєкту і знайти файли, які відповідають за потрібний елемент. Ця стаття не вчить верстати сторінки вручну - для цього у вас є агент.

Сторінка - це текст, який читає браузер

Почнемо з простої статичної сторінки: її код зберігається у звичайних текстових файлах. Їх можна відкрити в текстовому редакторі й прочитати. Додаткова збірка тут не потрібна: браузер читає HTML, завантажує пов'язані ресурси й на їх основі малює сторінку на екрані.

Точкою входу такого проєкту зазвичай є файл index.html. Браузер відкриває його, розбирає розмітку і за посиланнями завантажує стилі, скрипти, зображення та шрифти.

Так може бути побудований простий статичний проєкт: браузер завантажує три пов'язані файли й показує сторінку

У проєкті зі збіркою вихідні файли можуть лежати в компонентах, а готові HTML, CSS і JavaScript створює спеціальний інструмент. Ролі нижче залишаються корисною картою, але шукати саме три файли з такими назвами там не потрібно.

Для нашого простого прикладу візьмемо три файли з різними ролями:

HTML - що є на сторінці: заголовок, абзац, кнопка, зображення;
CSS - який вигляд це має: кольори, шрифти, відступи, заокруглення, плавність;
JavaScript - що відбувається: після кліку, введення тексту або спрацювання таймера.

Далі по черзі.

HTML: з чого складається розмітка

HTML - це розмітка, а не малювання. Ви не описуєте, який вигляд має кнопка. Ви кажете "тут кнопка" - і браузер малює її сам, як уміє.

Основна одиниця розмітки - тег. Майже завжди їх два: відкривальний і закривальний, а між ними вміст.

У цьому прикладі три частини разом утворюють один елемент сторінки

Кожна частина має свою назву, а все разом називається елементом. Слово стане в пригоді: про сторінку частіше говорять "елемент", маючи на увазі тег разом із тим, що всередині.

Назви тегів - скорочення від англійських слів: p від paragraph, a від anchor, img від image. Запам'ятовувати їх усі не обов'язково, але зв'язок з англійськими словами часто допомагає здогадатися, за що відповідає незнайомий тег.

Закривальний тег відрізняється похилою рискою. Є й елементи без закривального тега. Наприклад, <img> не може містити текст або вкладені теги, а адресу зображення отримує через атрибут src.

Теги вкладаються один в одного, наче коробки в коробках, і закриваються у зворотному порядку - спочатку внутрішній, потім зовнішній. Якщо порушити порядок, браузер не впаде, він спробує здогадатися. Зазвичай невдало.

Друге поняття - атрибут. Це уточнення, яке живе всередині відкривального тега й щось про нього повідомляє: куди веде посилання, звідки брати зображення, як називати цей елемент.

<a href="https://example.com">Відкрити сайт</a>
<img src="cover.png" alt="Обкладинка">
<button id="play" class="btn">Грати</button>

Атрибут class з останнього рядка незабаром знадобиться: завдяки йому до кнопки застосовуються стилі. Атрибут id="play" дає їй унікальне ім'я, за яким кнопку знайде скрипт.

Тепер сторінка повністю. Вона коротша, ніж можна подумати:

<!doctype html>
<html>
<head>
  <title>Моя сторінка</title>
</head>
<body>
  <h1>Перша сторінка</h1>
  <p>Звичайний абзац тексту.</p>
  <button id="play" class="btn">Грати</button>
</body>
</html>

Дві частини: <head> - службова, туди потрапляють заголовок вкладки й посилання на стилі; <body> - усе, що читач бачить на екрані. Перший рядок просто повідомляє браузеру, що перед ним сучасний HTML.

Коробка в коробці: head і body лежать усередині html, а все інше всередині них

Схема показує головну властивість розмітки: на сторінці все лежить усередині чогось. <body> усередині <html>, кнопка всередині <body>, текст усередині кнопки. Звідси й драбинка відступів у файлі: вона не для краси, а показує, що у що вкладено.

Практичний висновок простий. Заголовок вкладки браузера й підключення стилів живуть у <head>, і на екрані їх узагалі не видно. Все інше - у <body>. Коли агент у звіті пише "додав блок у body", це саме про другу коробку: нове потрапило на сторінку, а не до службової частини.

В HTML є понад сто тегів, але на реальних сторінках постійно трапляються ті самі:

Тег	Що робить
`<h1>` ... `<h6>`	шість рівнів заголовків, від найвищого до найнижчого
`<p>`	абзац тексту
`<a>`	посилання, адреса лежить в атрибуті `href`
`<img>`	зображення, шлях до файлу в атрибуті `src`
`<button>`	кнопка
`<ul>` і `<li>`	список і пункт списку
`<div>`	блок-контейнер, коробка для інших елементів
`<span>`	фрагмент тексту всередині рядка, щоб виділити його окремо

Останні два нічого не означають самі по собі й нічого не малюють. Це порожні коробки, до яких зручно прив'язувати стилі й скрипти, - саме тому їх на будь-якій сторінці найбільше.

CSS: як сторінка набуває вигляду

Гола розмітка має бідний вигляд: чорний текст на білому, сіра системна кнопка, усе притиснуте до лівого краю. Більшу частину різниці між цим і оформленою сторінкою створює CSS.

CSS складається з правил. Правило - це відповідь на два запитання: до чого застосовуємо і що змінюємо.

.btn {
  background: #6c5ce7;    /* колір фону */
  color: #ffffff;         /* колір тексту */
  padding: 12px 24px;     /* внутрішні відступи */
  border-radius: 12px;    /* заокруглення кутів */
}

Перший рядок - селектор: він указує, яких елементів це стосується. Далі у фігурних дужках ідуть пари "властивість: значення", кожна закінчується крапкою з комою.

Крапка перед btn означає клас. Пам'ятаєте атрибут кнопки class="btn"? Ось він і спрацював: у розмітці ви чіпляєте до елемента мітку, а у стилях звертаєтеся до неї. Одну мітку можна причепити до десяти кнопок - і всі десять стануть однаковими завдяки одному правилу.

Властивостей у CSS сотні, але щоб читати чужий файл і розуміти, що там відбувається, вистачить кількох:

color - колір тексту, background - колір або зображення фону;
font-size і font-family - розмір і гарнітура шрифту;
padding - відступ усередині елемента, margin - зовні, між сусідніми елементами;
border-radius - заокруглення кутів, воно ж половина відчуття "дорого";
transition - плавність: не стрибком, а за 0.2 секунди.

Найчастіше правила лежать в окремому файлі, а сторінка дізнається про нього з одного рядка у службовій частині:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Приберіть цей рядок - файл стилів не завантажиться. Текст і елементи залишаться в розмітці, але звичне розташування та оформлення можуть зникнути, а користуватися сторінкою іноді стане складніше.

Елементи ті самі й у тому самому порядку. Змінилися лише колір, відступи та форма

На схемі ліворуч і праворуч та сама сторінка: заголовок, два рядки тексту, кнопка. Жодного елемента не додалося й не зникло - у цьому прикладі редагували лише файл стилів.

Це карта пошуку, а не технічна стіна. Для нового розташування агенту іноді треба змінити класи або контейнери в HTML, а невдале CSS-правило може перекрити кнопку й завадити кліку. Тому після візуальної зміни дивляться diff, відкривають сторінку і перевіряють дії, яких вона торкнулася.

JavaScript: що відбувається у відповідь на дію

HTML і CSS уже вміють показати сторінку й додати їй плавні переходи або анімацію. Але кнопка з нашого прикладу поки не має власної дії: натискаємо - рахунок не змінюється.

Довільну логіку на сторінці зазвичай додає JavaScript. Кнопка вже отримала в HTML унікальне ім'я id="play". Тепер схема проста: знайти елемент, дочекатися події, щось змінити.

// знаходимо кнопку за її id
const button = document.getElementById("play");
let score = 0;

// підписуємося на подію: що робити після кліку
button.addEventListener("click", function () {
  score = score + 1;
  button.textContent = "Бали: " + score;
});

Перший клік змінює напис на "Бали: 1", другий - на "Бали: 2". Якщо нічого не відбувається, спочатку перевірте, що в HTML написано id="play", а у скрипті - те саме ім'я play.

Тут три деталі. const і let створюють змінну - іменовану коробку зі значенням. addEventListener додає елементу обробник події: кліку, введення тексту або наведення вказівника. А всередині фігурних дужок лежить функція - фрагмент коду, який виконається, коли станеться подія.

Зверніть увагу на останній рядок: скрипт змінює текст кнопки. Це важливий момент - JavaScript уміє змінювати й розмітку, і стилі безпосередньо під час роботи сторінки. Він може додати абзац, сховати блок, перефарбувати кнопку. Тому межа між шарами - не стіна, а розподіл праці.

На практиці починайте пошук у JavaScript, якщо елемент реагує на дані, обробляє клік або щось рахує. Плавну появу, зміну кольору й простий рух часто робить CSS. Це відправна точка, а не остаточний діагноз: після зміни відкрийте сторінку й самі перевірте вигляд та дії - одного скриншота недостатньо.

Одна кнопка у трьох файлах

Зберемо все на одному елементі. Кнопка "Грати" живе одразу в трьох файлах, і кожен відповідає за своє.

<button id="play" class="btn">Грати</button>

.btn {
  background: #6c5ce7;
  border-radius: 12px;
}

const playButton = document.getElementById("play");

playButton.addEventListener("click", function () {
  playButton.textContent = "Гру запущено";
});

Якщо файли підключені, клік змінює напис "Грати" на "Гру запущено". Тепер приклад можна перевірити, не вигадуючи відсутню функцію.

А тепер найкорисніше - що буде, якщо по черзі прибрати кожну частину:

прибрали HTML - зникло все: стилізувати й оживляти більше нічого;
прибрали CSS - кнопка на місці й працює, просто скидається на системну сіру кнопку з дев'яностих;
прибрали JS - кнопка гарна, але мертва. Натискається, і нічого не відбувається.

Звідси проста карта для формулювання завдання. Якщо вам не подобається, який вигляд це має, почніть пошук зі стилів. Якщо не подобається, що відбувається, - зі скрипту. Якщо елемента взагалі немає, почніть із розмітки. Це лише початок пошуку: реальна зміна може зачепити сусідній шар, тому результат роботи агента перевіряють у diff і браузері.

Що лежить у теці проєкту

Найчастіший набір для простої сторінки має такий вигляд:

index.html    розмітка, точка входу
style.css     стилі
script.js     поведінка

Пов'язані вони двома рядками в розмітці. Стилі підключаються у службовій частині, скрипт - у самому кінці, перед закривальним </body>, щоб на момент його запуску всі елементи вже існували:

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- розмітка сторінки -->
  <script src="script.js"></script>
</body>

Буває й інакше. У великому проєкті файлів десятки, вони розкладені по теках на кшталт css/ і js/, а поруч лежать зображення та шрифти. Буває й навпаки, коли файл лише один, - про цей випадок одразу нижче. Ролі розмітки, стилів і логіки все одно залишаються, але назви файлів і спосіб їх підключення можуть відрізнятися.

Коли стилі та скрипти лежать усередині сторінки

Три файли - найчастіша схема, але не єдина. Один і той самий CSS можна покласти у три різні місця, і всі три вам рано чи пізно трапляться.

Перше ви вже бачили: окремий файл плюс рядок <link>. Друге - блок <style> безпосередньо в розмітці, без окремого файлу:

<head>
  <style>
    .btn {
      background: #6c5ce7;
      border-radius: 12px;
    }
  </style>
</head>

Усередині все те саме: селектор, фігурні дужки, пари "властивість: значення". Змінилося лише місце, де записано CSS. Так пишуть, коли сторінка одна й створювати для неї окремий файл немає сенсу.

Третє місце - вбудовані стилі, вони ж inline styles. Властивості висять безпосередньо на елементі, в атрибуті style:

<button class="btn" style="background: #e17055; font-size: 20px">Грати</button>

Селектор тут не потрібен: і так зрозуміло, чого стосується правило - елемента, на якому його записано. Тому немає ні фігурних дужок, ні крапки перед класом, лише пари "властивість: значення" через крапку з комою, усе в один рядок.

Це зручно лише один раз. Далі починаються мінуси. Правило діє на один-єдиний елемент: десять кнопок - десять копій, і змінювати потім доведеться всі десять. Вбудований стиль зазвичай перевизначає відповідну декларацію із зовнішнього файлу. Якщо задати колір кнопки в атрибуті style, а потім змінити ту саму властивість у style.css, колір може не змінитися. Тому атрибут style перевіряють одним із перших; докладні правила пріоритетів поки не потрібні.

Зі скриптом та сама історія, тільки місць два. Окремий файл підключається через <script src="...">, а можна написати код безпосередньо між тегами:

<script>
  document.getElementById("play").addEventListener("click", function () {
    alert("Гру запущено");
  });
</script>

Зведемо все в одну табличку, щоб було куди підглянути:

Що	Де лежить	Який вигляд має в HTML
стилі	окремий файл	`<link rel="stylesheet" href="style.css">`
стилі	блок у самій сторінці	`<style>` ... `</style>`
стилі	безпосередньо на елементі	`style="color: red"`
скрипт	окремий файл	`<script src="script.js"></script>`
скрипт	блок у самій сторінці	`<script>` ... `</script>`

Крайній випадок - коли докупи складено взагалі все: розмітка, блок <style> і блок <script> живуть в одному index.html. Нічого страшного тут немає, для невеликої сторінки так навіть простіше: файл один, відкрив у браузері й працює, нічого не загубиться дорогою. Незручності починаються пізніше, коли сторінка розростається і в цьому полотні треба щось знайти. Тоді вміст зазвичай розтягують по файлах, і виходить та сама трійка.

Перш ніж просити агента "змінити стилі", з'ясуйте, де вони лежать. Якщо у проєкті один index.html, файлу style.css може не бути, і зміна опиниться всередині розмітки. Якщо елемент не змінюється, попросіть перевірити три речі: чи підключений потрібний файл стилів, чи підходить селектор і чи немає вбудованого style або сильнішого правила. Так пошук звужується без здогадок про винуватця.

Як це працює у зв'язці з Claude Code

Тепер зрозуміло, що відбувається, коли агент береться за сторінку:

у простому статичному проєкті агент може сам написати й пов'язати HTML, CSS і JavaScript. В іншому проєкті спочатку попросіть його показати структуру й назвати файли, які відповідають за потрібний елемент;
те, що ви побачите до внесення змін, залежить від налаштувань і режиму роботи. Якщо агент заздалегідь показує запропоновані зміни, перегляньте їх; після застосування змін у будь-якому разі вивчіть diff і підсумкові файли. Назва style.css підказує роль файлу, але ще нічого не гарантує;
візуальну зміну перевіряйте очима й кліками на елементи, яких вона торкнулася, а зміну поведінки - реальними діями. Скриншот не покаже, що лічильник перестав рахувати;
якщо щось зламалося, описуйте симптом, який бачите, а не вгаданий шар: "після зміни кнопку видно, але клік нічого не робить". Тоді агент перевірить зв'язки між HTML, CSS і JavaScript.