3 хвилин читання
Кожна веб-сторінка, яку ви бачите в браузері, від простого блогу до складного інтернет-магазину, побудована на двох фундаментальних технологіях: HTML і CSS. Перша відповідає за структуру і зміст сторінки, друга – за її зовнішній вигляд. Якщо ви хочете зрозуміти, як влаштований веб, створити власний сайт або почати кар’єру у фронтенд-розробці, то саме з HTML і CSS починається шлях.
Зміст
- Що таке HTML
- Як влаштований HTML: теги, елементи та атрибути
- Базова структура HTML-документа
- Основні HTML-теги, які потрібно знати
- Що таке CSS
- Як підключити CSS до HTML-сторінки
- Синтаксис CSS: селектори, властивості та значення
- Блокова модель CSS (Box Model)
- Flexbox і Grid: сучасні системи компонування
- Адаптивний дизайн і медіазапити
- Як HTML і CSS працюють разом
- FAQ: Часті запитання
Що таке HTML
HTML (HyperText Markup Language) — це мова гіпертекстової розмітки, за допомогою якої створюється структура веб-сторінки. Важливо розуміти: HTML – це не мова програмування. Вона не виконує обчислень, не обробляє логіку і не працює з умовами. Її завдання інше – описати браузеру, з яких елементів складається сторінка і в якій послідовності вони розташовані.
Уявіть каркас будинку до оздоблення: стіни, перекриття, дверні отвори, місця під вікна. Все на своїх місцях, але без фарби, шпалер і меблів. HTML працює так само – він задає «скелет» сторінки: де буде заголовок, де абзац тексту, де зображення, де посилання.
Мова з’явилася у 1991 році завдяки Тіму Бернерсу-Лі — британському вченому, який працював у CERN і фактично створив World Wide Web. Відтоді HTML пройшов кілька великих оновлень. Поточна версія HTML5 стала стандартом ще у 2014 році й залишається актуальною, регулярно отримуючи доповнення через специфікацію HTML Living Standard, яку підтримує організація WHATWG.
Як влаштований HTML: теги, елементи та атрибути
HTML-документ складається з елементів, кожен із яких описується за допомогою тегів. Тег — це ключове слово, обгорнуте в кутові дужки. Більшість тегів парні: є відкриваючий і закриваючий тег, а між ними – вміст.
Наприклад, щоб створити абзац тексту, використовують тег <p>:
<p>Це абзац тексту на веб-сторінці.</p>
Тут <p> — відкриваючий тег, </p> — закриваючий (зі слешем), а текст між ними — вміст елемента.
Деякі теги не мають закриваючої пари, бо не містять вкладеного контенту. Їх називають порожніми або самозакривними. Класичний приклад — тег зображення:
<img src="photo.jpg" alt="Опис зображення">
У цьому прикладі src і alt — це атрибути тегу. Атрибути задають додаткові властивості елемента: шлях до файлу, альтернативний текст, посилання, ідентифікатор, клас тощо. Вони завжди записуються у відкриваючому тезі у форматі назва="значення".
Базова структура HTML-документа
Кожна веб-сторінка починається з однакового каркасу. Ось мінімальна структура, яку розуміє будь-який сучасний браузер:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Назва сторінки</title>
</head>
<body>
<h1>Головний заголовок</h1>
<p>Перший абзац тексту на сторінці.</p>
</body>
</html>
Розберемо кожну частину.
<!DOCTYPE html> — декларація типу документа. Вона повідомляє браузеру, що сторінка написана за стандартом HTML5. Це не тег у звичному розумінні, а інструкція для парсера.
<html lang="uk"> — кореневий елемент, який обгортає увесь документ. Атрибут lang вказує мову вмісту, що важливо для пошукових систем, програм зчитування екрана та автоматичного перекладу.
<head> — секція метаданих, невидима для користувача. Тут розміщують назву сторінки (<title>), кодування символів, підключення стилів і скриптів, мета-теги для SEO, фавікон та іншу службову інформацію.
<body> — тіло документа, де знаходиться весь видимий вміст: тексти, зображення, відео, форми, кнопки — усе, що бачить відвідувач.
Основні HTML-теги, які потрібно знати
HTML має десятки тегів, але для впевненого старту достатньо освоїти ключовий набір.
Заголовки <h1> — <h6> формують ієрархію тексту. <h1> — найважливіший заголовок сторінки (зазвичай один на документ), далі рівень значущості знижується до <h6>. Правильна ієрархія заголовків критична для SEO та доступності.
Текстові елементи. <p> створює абзац, <strong> виділяє текст напівжирним із семантичним акцентом на важливості, <em> — курсивом із акцентом на наголосі, <br> — примусовий перенос рядка.
Посилання <a href="url"> — один із фундаментальних елементів вебу. Атрибут href вказує адресу, на яку веде посилання. Саме посилання роблять веб гіпертекстовим — пов’язують сторінки між собою.
Зображення <img src="шлях" alt="опис"> — вставляє графіку. Атрибут alt обов’язковий: він описує зображення для пошукових систем і користувачів, які не можуть його побачити (зокрема, для програм зчитування екрана).
Списки. <ul> — маркований (ненумерований) список, <ol> — нумерований. Кожен пункт списку обгортається в тег <li>.
Контейнери. <div> — універсальний блоковий контейнер для групування елементів, <span> — рядковий контейнер для виділення фрагменту всередині тексту. Обидва не несуть семантичного значення і використовуються переважно для стилізації та структурування макету.
Семантичні теги HTML5 — елементи з чіткою смисловою роллю: <header> (шапка), <nav> (навігація), <main>(основний вміст), <article> (самостійна стаття), <section> (тематичний розділ), <aside> (бічний контент), <footer>(підвал). Вони не змінюють зовнішній вигляд сторінки, але дають браузерам, пошуковим ботам і допоміжним технологіям зрозуміти структуру документа.
Що таке CSS
CSS (Cascading Style Sheets) — каскадні таблиці стилів — це мова, яка визначає зовнішній вигляд HTML-елементів. Якщо HTML відповідає на запитання «що є на сторінці?», то CSS відповідає на запитання «як це виглядає?».
За допомогою CSS ви контролюєте кольори, шрифти, відступи, розміри, розташування елементів, анімації, адаптивність під різні екрани — загалом, усе візуальне оформлення. Без CSS веб-сторінка виглядає як звичайний текстовий документ із заголовками і посиланнями — функціональний, але візуально примітивний.
CSS працює за принципом каскадності — звідси й назва. Це означає, що до одного елемента можуть застосовуватися стилі з різних джерел (браузерні стилі за замовчуванням, зовнішні файли, вбудовані стилі), і браузер визначає фінальний вигляд, враховуючи пріоритетність кожного правила. Каскадність — одна з тих концепцій, що здається простою на початку, але на практиці потребує глибокого розуміння.
Поточна версія — CSS3, хоча формально єдиного релізу CSS3 немає. Специфікація розбита на окремі модулі (Flexbox, Grid, Animations, Custom Properties тощо), і кожен модуль розвивається незалежно. Це дає змогу браузерам впроваджувати нові можливості поступово, без очікування на масштабне оновлення всієї специфікації.
Як підключити CSS до HTML-сторінки
Існує три способи додати стилі до HTML-документа, і кожен має свою сферу застосування.
Зовнішній файл стилів — стандартний і рекомендований підхід для реальних проєктів. CSS-код зберігається в окремому файлі з розширенням .css і підключається через тег <link> у секції <head>:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Переваги очевидні: стилі зберігаються в одному місці, легко підтримуються, кешуються браузером (що прискорює завантаження) і не захаращують HTML-документ.
Вбудовані стилі (internal) — CSS-код розміщується безпосередньо всередині HTML-документа у тезі <style>:
<head>
<style>
h1 {
color: #1a1a2e;
font-size: 2rem;
}
</style>
</head>
Цей підхід доречний для одиничних сторінок, прототипів або критичних стилів, які мають завантажитися миттєво.
Рядкові стилі (inline) — CSS прописується безпосередньо в атрибуті style конкретного HTML-елемента:
<p style="color: red; font-weight: bold;">Червоний напівжирний текст.</p>
Цей варіант має найвищий пріоритет серед звичайних стилів, але його використання в продакшн-коді вважається поганою практикою. Рядкові стилі неможливо перевикористати, вони захаращують розмітку і ускладнюють підтримку. Їхнє виправдане застосування — динамічне інлайн-стилювання через JavaScript або HTML-листи для email-розсилок, де підтримка зовнішніх файлів обмежена.
Синтаксис CSS: селектори, властивості та значення
CSS-код складається з правил. Кожне правило має дві частини: селектор (що стилізувати) і блок оголошень (як стилізувати).
селектор {
властивість: значення;
властивість: значення;
}
Конкретний приклад:
h1 {
color: #2d2d2d;
font-size: 2.5rem;
margin-bottom: 1rem;
}
Тут h1 — селектор, що вказує на всі заголовки першого рівня. Усередині фігурних дужок — оголошення: кожне складається з властивості (color, font-size, margin-bottom) і значення, розділених двокрапкою. Крапка з комою завершує кожне оголошення.
Основні типи селекторів, які потрібно знати на старті:
1. Селектор за тегом — стилізує всі елементи вказаного типу: p { }, h2 { }, img { }
2. Селектор за класом — стилізує елементи з конкретним атрибутом class. Записується через крапку: .card { }, .btn-primary { }. Один клас можна застосувати до багатьох елементів, а один елемент може мати кілька класів. Це основний інструмент стилізації в реальних проєктах.
3. Селектор за ідентифікатором — стилізує єдиний елемент із відповідним id. Записується через решітку: #header { }, #main-nav { }. Ідентифікатор має бути унікальним на сторінці. У сучасній практиці ID рідко використовують для стилізації, віддаючи перевагу класам.
Комбіновані селектори дають змогу точно вказати, які саме елементи стилізувати:
.card p { } — абзаци всередині елементів із класом card, nav a { } — посилання всередині навігації.
Блокова модель CSS (Box Model)
Кожен HTML-елемент браузер відображає як прямокутний блок. Розуміння того, як цей блок побудований — одна з ключових концепцій CSS, без якої неможливо передбачувано керувати розташуванням елементів.
Блокова модель складається з чотирьох шарів (від центру назовні):
Content — вміст елемента: текст, зображення, дочірні елементи. Розміри контентної області задаються через widthі height.
Padding — внутрішній відступ між вмістом і межею елемента. Це «повітря» всередині блоку. Задається через padding (усі сторони одразу) або окремо: padding-top, padding-right, padding-bottom, padding-left.
Border — видима межа (рамка) навколо елемента. Має товщину, стиль і колір: border: 1px solid #ccc;.
Margin — зовнішній відступ між елементом і сусідніми елементами. Це простір «назовні» від блоку. Задається аналогічно до padding.
За замовчуванням (box-sizing: content-box) ширина й висота стосуються лише контентної області, а padding і border додаються зверху. Це часто призводить до неочікуваних результатів. Тому в сучасних проєктах стандартною практикою є глобальне перемикання на box-sizing: border-box, при якому padding і border входять у зазначені width і height:
*, *::before, *::after {
box-sizing: border-box;
}
Flexbox і Grid: сучасні системи компонування
До появи Flexbox і Grid розробники будували макети на float, позиціюванні та навіть таблицях — із костилями, хаками та болем. Сучасні інструменти компонування розв’язали цю проблему.
Flexbox (Flexible Box Layout) — одновимірна система компонування, оптимальна для розташування елементів у рядку або колонці. Щоб активувати Flexbox, достатньо задати контейнеру display: flex:
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
justify-content керує розподілом елементів уздовж головної осі (за замовчуванням — горизонтальної), align-items — уздовж поперечної осі (вертикальної), gap задає відстань між елементами. Flexbox ідеально підходить для навігаційних панелей, карток у рядку, центрування елементів та будь-яких лінійних макетів.
CSS Grid — двовимірна система, що працює одночасно з рядками і стовпцями. Це інструмент для побудови повноцінних сторінкових макетів:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 1.5rem;
}
Grid дає змогу створювати складні макети з мінімальною кількістю коду: шапка на всю ширину, бічна панель зліва, контент у центрі, підвал унизу — і все це без вкладених контейнерів і хаків.
Flexbox і Grid не конкурують між собою — вони доповнюють одне одного. Типовий підхід: Grid для загального макету сторінки, Flexbox для компонування елементів усередині окремих секцій.
Адаптивний дизайн і медіазапити
Сьогодні користувачі переглядають сайти на смартфонах, планшетах, ноутбуках і широкоформатних моніторах. Сторінка, яка коректно виглядає лише на одному розмірі екрана, непридатна для реального використання. Адаптивний дизайн (responsive design) — це підхід, при якому верстка гнучко підлаштовується під будь-яку ширину вікна.
Головний інструмент адаптивності в CSS — медіазапити (@media). Вони дають змогу застосовувати різні стилі залежно від характеристик пристрою, найчастіше — ширини екрана:
/* Базові стилі для мобільних */
.container {
padding: 1rem;
}
/* Стилі для екранів ширших за 768px */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
padding: 2rem;
}
}
/* Стилі для екранів ширших за 1200px */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
Підхід mobile-first (спочатку мобільні) вважається стандартом індустрії: базові стилі пишуться для найвужчого екрана, а медіазапити з min-width поступово розширюють макет для більших пристроїв. Це ефективніше, ніж зворотний підхід, оскільки мобільні пристрої зазвичай мають менше ресурсів і не завантажують зайві стилі.
Окрім медіазапитів, адаптивність забезпечують відносні одиниці виміру (rem, em, %, vw, vh), гнучкі зображення (max-width: 100%), а також функції CSS на кшталт clamp(), min() і max(), які дають змогу задавати «розумні» значення, що масштабуються автоматично.
Як HTML і CSS працюють разом
HTML і CSS — це нерозривна пара. HTML формує структуру документа, CSS надає їй візуальне оформлення. Розділення структури і зовнішнього вигляду — один із фундаментальних принципів веб-розробки, і його дотримання суттєво впливає на якість коду.
Коли браузер отримує HTML-документ, він будує DOM (Document Object Model) — деревоподібну структуру всіх елементів сторінки. Паралельно він обробляє CSS і створює CSSOM (CSS Object Model). Потім DOM і CSSOM об’єднуються в Render Tree — фінальну модель, на основі якої браузер обчислює розміри та позиції елементів (layout) і малює пікселі на екрані (paint).
Саме тому порядок підключення ресурсів має значення: CSS-файли підключають у <head>, щоб браузер побудував CSSOM до початку рендерингу й уникнув «мигання» нестилізованого контенту (FOUC — Flash of Unstyled Content).
На практиці сучасний фронтенд не обмежується лише HTML і CSS. JavaScript додає інтерактивність, препроцесори (Sass, Less) розширюють можливості CSS, фреймворки (React, Vue, Svelte) структурують складні інтерфейси, а збірники (Vite, Webpack) автоматизують процес розробки. Але фундамент залишається незмінним: HTML і CSS — це база, без якої жодна з надбудов не має сенсу.
FAQ: Часті запитання
Чи потрібно вчити HTML і CSS, якщо є конструктори сайтів?
Так, якщо ви хочете розуміти, як працює веб, і мати контроль над результатом. Конструктори на кшталт Wix розв’язують базові задачі, але обмежують гнучкість. Як тільки потрібно кастомне рішення, нестандартний макет або інтеграція з іншими системами – без HTML і CSS не обійтися. До того ж, навіть при роботі з WordPress або Shopify знання розмітки та стилів суттєво розширює ваші можливості.
Скільки часу потрібно, щоб вивчити HTML і CSS?
Базовий рівень — створення простих статичних сторінок, можна освоїти за 2–4 тижні щоденної практики. Впевнена адаптивна верстка з Flexbox, Grid і розумінням специфічності – це 2–3 місяці. Професійний рівень, що включає архітектуру CSS, методології (BEM, CUBE CSS), препроцесори та оптимізацію – формується протягом першого року активної роботи.
Що вивчати після HTML і CSS?
Наступний логічний крок – JavaScript. Він додає інтерактивність: обробку кліків, валідацію форм, динамічне оновлення контенту, взаємодію з API. Далі один із фронтенд-фреймворків (React, Vue або Svelte), система контролю версій Git і базові принципи UI/UX-дизайну.
Чим HTML5 відрізняється від попередніх версій?
HTML5 додав семантичні елементи (<header>, <nav>, <main>, <article>, <footer>), вбудовану підтримку відео та аудіо без сторонніх плагінів (теги <video> і <audio>), елемент <canvas> для графіки, API геолокації, локальне сховище (localStorage) та багато іншого. Фактично HTML5 перетворив HTML із простої мови розмітки на платформу для створення повноцінних веб-застосунків.
Що таке CSS-фреймворки і чи варто їх використовувати?
CSS-фреймворки – це готові бібліотеки стилів і компонентів. Bootstrap, Tailwind CSS, Bulma – найпопулярніші з них. Вони прискорюють розробку, забезпечують консистентний дизайн і вирішують типові задачі за вас. Проте починати варто з чистого CSS: фреймворк легше освоїти, коли ви розумієте, що саме він автоматизує. Інакше виникає залежність від інструменту без розуміння базових принципів.
Чи потрібен HTML для SEO?
Безпосередньо. Правильна семантична структура, коректна ієрархія заголовків, мета-теги (title, description), атрибути alt для зображень, канонічні URL, розмітка Schema.org – усе це реалізується через HTML і безпосередньо впливає на те, як пошукові системи індексують і ранжують сторінку.
Читати також: Штучний інтелект: що це, історія, типи, ШІ чати – простими словами
