Вступ до HTML. Структура документа

Що таке HTML і чому він існує?

Уявіть: 1989 рік. Тім Бернерс-Лі — фізик-ядерник у CERN (Женева) — стикається з проблемою, знайомою кожному, хто коли-небудь намагався передати великий документ колезі. Тисячі наукових звітів, посилання між ними, різні формати — і жодного зручного способу пов'язати всі ці знання воєдино.

Його рішення було революційним у своїй простоті: гіпертекст (Hypertext) — текст, який містить клікабельні посилання на інші тексти. А мова для такого тексту отримала назву HTML (HyperText Markup Language — мова гіпертекстової розмітки).

Перший у світі веб-сайт з'явився 6 серпня 1991 року і досі доступний за посиланням info.cern.ch. У ньому описується принцип роботи Всесвітньої павутини. Він виглядає максимально просто — але саме з цього починалася епоха інтернету.

Еволюція HTML: від 40 тегів до HTML5

Щоб зрозуміти сучасний HTML5, варто простежити його еволюцію. Кожна версія вирішувала реальні проблеми свого часу.

timeline
    title Еволюція HTML
    1991 : HTML 1.0
         : Тім Бернерс-Лі, CERN
         : 18 базових тегів
    1993 : HTML 1.2
         : 40 тегів
         : Браузер Mosaic
    1995 : HTML 2.0 та 3.0
         : Механізм форм
         : Математичні формули
    1997 : HTML 3.2 та 4.0
         : Стандартизація W3C
         : CSS як окрема мова
    1999 : HTML 4.01
         : Довгий стандарт
         : Перехідний період
    2000 : XHTML 1.0
         : Строгий синтаксис
         : XML-підхід
    2014 : HTML5
         : Семантичні теги
         : Мультимедіа нативно
         : canvas, video, audio

HTML 2.0 (1995) — Народження форм

Перший офіційний стандарт W3C (World Wide Web Consortium — Консорціум Всесвітньої павутини). Головне нововведення — форми: механізм, що дозволяє користувачу відправляти дані на сервер. Саме тоді стало можливим перше покоління інтерактивних сайтів.

HTML 4.01 (1999) — Розділення структури та стилю

Революційна ідея: CSS (Cascading Style Sheets — каскадні таблиці стилів) має відповідати за зовнішній вигляд, а HTML — лише за структуру. Теги на кшталт <font>, <center>, <bgcolor> почали вважатися застарілими.

Війна браузерів (1994–2004)

У середині 1990-х з'явилися Netscape Navigator та Internet Explorer — і між ними розгорілася справжня війна. Кожен браузер додавав власні теги, ігноруючи стандарти W3C. Верстальники були змушені писати різний код для різних браузерів.

Перемогу здобув Google Chrome (2008), який чітко дотримувався стандартів і пропонував зручні інструменти для розробників. Сьогодні Chrome використовують ~65% інтернет-користувачів.

HTML5 (2014) — Сучасний стандарт

HTML5 — це не просто набір нових тегів. Це нова філософія веб-розробки:

Редактори коду: VS Code та WebStorm

Перш ніж писати HTML, потрібен правильний інструмент. Подумайте про редактор коду як про робочий стіл столяра — від його якості залежить ефективність роботи.

Visual Studio Code — основний інструмент курсу

Visual Studio Code (VS Code) — безкоштовний редактор з відкритим кодом від Microsoft, випущений у 2015 році. Сьогодні це найпопулярніший редактор у світі для веб-розробки: за даними Stack Overflow Developer Survey 2023 його використовують понад 73% розробників.

Ключові можливості VS Code для HTML-розробки

<!-- Початок введення: <di -->
<!-- VS Code пропонує: div, dialog, dir -->
<div class="container">
    <!-- Тут: cl → class="" -->
</div>

Корисні гарячі клавіші VS Code

WebStorm — потужна IDE для професіоналів

WebStorm — інтегроване середовище розробки (IDE) від компанії JetBrains, яка також відома продуктами IntelliJ IDEA (Java), PyCharm (Python) та Rider (.NET).

На відміну від VS Code (редактор з розширеннями), WebStorm — це повноцінна IDE «з коробки». Вона платна (з тріальним 30-денним пробним терміном), але для студентів і педагогів — безкоштовна за умовою JetBrains Education.

Унікальні переваги WebStorm

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

Рефакторинг: Перенесення функцій між файлами, перейменування змінних у всьому проєкті, автоматичне виправлення імпортів — все це «з коробки».

Дебаггер: Вбудований відладчик для JavaScript дозволяє ставити точки зупинки прямо в IDE, а не перемикатися на DevTools браузера.

Професійне налаштування VS Code через settings.json

Графічного інтерфейсу налаштувань VS Code (меню File → Preferences → Settings) достатньо для базових речей. Але справжній розробник живе у settings.json — JSON-файлі, що містить усі налаштування редактора. Він дає дві потужні переваги:

1. Відтворюваність: скопіюйте файл на новий комп'ютер — і ваш VS Code одразу налаштований так само
2. Точність: жодних непорозумінь між прапорцями — тільки явні значення

Як відкрити settings.json

Є два рівні налаштувань:

• Глобальні (User Settings) — діють у всіх проєктах: Ctrl + Shift + P → Open User Settings (JSON)
• Локальні (Workspace Settings) — лише для поточного проєкту: файл .vscode/settings.json у корені папки проєкту

Повний settings.json для веб-розробки

Скопіюйте цей файл у .vscode/settings.json у корені вашого проєкту:

{
    // =================================================================
    // 1. ПОВЕДІНКА РЕДАКТОРА ТА ФОРМАТУВАННЯ
    // Глобальні налаштування відступів, збереження та форматувальника.
    // =================================================================

    // --- Відступи ---
    "editor.tabSize": 4, // Розмір Tab = 4 пробіли
    "editor.insertSpaces": true, // Tab вставляє пробіли, а не символ \t
    "editor.detectIndentation": false, // Не визначати відступ автоматично — завжди брати з tabSize

    // --- Форматування при збереженні ---
    "editor.defaultFormatter": "esbenp.prettier-vscode", // Prettier — форматувальник за замовчуванням
    "editor.formatOnSave": true, // Авто-форматування при Ctrl+S

    // Запуск лінтерів при збереженні (виправляє те, що може виправити linter)
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit", // Всі авто-виправлення
        "source.fixAll.eslint": "explicit", // ESLint (JavaScript)
        "source.fixAll.stylelint": "explicit", // Stylelint (CSS/SCSS)
    },

    // --- Зовнішній вигляд ---
    "editor.wordWrap": "on", // Перенос довгих рядків
    "editor.minimap.enabled": true, // Мінімапа коду праворуч
    "editor.renderWhitespace": "boundary", // Показувати пробіли між словами
    "editor.cursorSmoothCaretAnimation": "on", // Плавна анімація курсора
    "editor.bracketPairColorization.enabled": true, // Кольорові парні дужки
    "editor.guides.bracketPairs": "active", // Підсвічення активної пари дужок
    "editor.mouseWheelZoom": true, // Ctrl+Scroll для зміни масштабу
    "workbench.colorTheme": "Default Dark+", // Темна тема

    // =================================================================
    // 2. PRETTIER — ФОРМАТУВАЛЬНИК КОДУ
    // =================================================================

    "prettier.requireConfig": false, // Не вимагати .prettierrc в проєкті
    "prettier.useEditorConfig": false, // Не використовувати .editorconfig

    // --- Відступи (4 пробіли) ---
    "prettier.tabWidth": 4,

    // --- Сучасний JavaScript ---
    "prettier.singleQuote": true, // Одинарні лапки замість подвійних
    "prettier.semi": false, // Без крапки з комою в JS
    "prettier.trailingComma": "all", // Кома після останнього елемента
    "prettier.printWidth": 120, // Максимальна ширина рядка

    // --- Специфіка фреймворків ---
    "prettier.vueIndentScriptAndStyle": true, // Відступ у Vue <script> та <style>
    "prettier.htmlWhitespaceSensitivity": "css", // Пробіли в HTML за правилами CSS

    // =================================================================
    // 3. ЛІНТЕРИ — ESLint ТА STYLELINT
    // =================================================================

    // --- ESLint (JavaScript / TypeScript) ---
    "eslint.enable": true,
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
    "eslint.format.enable": true,
    "eslint.run": "onSave",

    // --- Stylelint (CSS / SCSS) ---
    "css.validate": false, // Вимкнути вбудовану валідацію VS Code (Stylelint замінить її)
    "scss.validate": false,
    "less.validate": false,
    "stylelint.enable": true,
    "stylelint.validate": ["css", "scss", "vue"],
    // Stylelint configuration (usually kept in .stylelintrc)
    "stylelint.config": {
        "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
        "plugins": ["stylelint-order"],
    },

    // =================================================================
    // 4. МОВНІ ПЕРЕВИЗНАЧЕННЯ
    // =================================================================

    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },

    // CSS/SCSS — 2 пробіли (загальноприйнята конвенція для стилів)
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2,
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2,
    },
}

Розбір ключових налаштувань

Node.js та npm — інструменти сучасного веб-розробника

Перш ніж встановлювати Stylelint, потрібно розібратися з Node.js та npm — без них сучасна веб-розробка просто неможлива.

Що таке Node.js?

Node.js — це середовище виконання JavaScript поза браузером. Якщо раніше JS працював лише у браузері, то Node.js дозволяє запускати його прямо на комп'ютері — у терміналі.

Але навіщо це потрібно при вивченні HTML і CSS?

Аналогія: Node.js — це як магазин IKEA. Ви самі по собі не живете в IKEA, але іноді заходите, щоб купити меблі (інструменти). npm — це каталог цього магазину та механізм доставки.

Що таке npm?

npm (Node Package Manager — менеджер пакетів Node) — це:

1. Репозиторій з понад 2 мільйонами пакетів (бібліотек та інструментів) на npmjs.com
2. Команда в терміналі для встановлення, оновлення та видалення цих пакетів
3. Менеджер залежностей проєкту (відстежує, які пакети потрібні вашому проєкту)

npm встановлюється автоматично разом з Node.js — окремо нічого не потрібно.

Встановлення Node.js на Windows

На Windows є три зручні способи — обирайте той, що вам ближчий.

winget install OpenJS.NodeJS.LTS

node --version
npm --version

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression

scoop install nodejs-lts

node --version
npm --version

Set-ExecutionPolicy Bypass -Scope Process -Force
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

choco install nodejs-lts -y

node --version
npm --version

Перевірка встановлення

Після встановлення Node.js відкрийте вбудований термінал VS Code (Ctrl + `) і виконайте:

node --version
# Приклад виводу: v20.11.0

npm --version
# Приклад виводу: 10.2.4

Якщо обидві команди повернули версії — все готово! Можна встановлювати інструменти.

Stylelint — стандарт якості для CSS

Кожен розробник пише CSS трохи по-своєму. Хтось ставить color першим, хтось — display. Хтось використовує 0px, хтось 0. У команді таке розмаїття призводить до хаосу в коді.

Stylelint (Style Linter) — це засіб статичного аналізу CSS/SCSS, що автоматично перевіряє ваш стиль на помилки та порушення конвенцій. Подумайте про нього як про суворого, але справедливого редактора: він вказує на проблеми відразу, не чекаючи браузера.

Встановлення розширення Stylelint у VS Code

Відкрийте панель розширень (Ctrl + Shift + X), знайдіть і встановіть:

• Stylelint від stylelint (ID: stylelint.vscode-stylelint)

Після встановлення VS Code підкреслюватиме CSS-помилки прямо в редакторі — до запуску браузера.

Встановлення npm-пакетів

Stylelint та його конфіги встановлюються через npm (Node Package Manager). Відкрийте термінал у VS Code (Ctrl + `) і виконайте:

npm install -g stylelint stylelint-config-standard stylelint-config-recess-order stylelint-order

Що встановлюємо і навіщо — розберемо детально.

Три кити конфігурації: що це за пакети?

/* ❌ Stylelint-config-standard вкаже на помилку: */
a {
    color: red;
    color: blue; /* Дублікат! */
    margin: 0px; /* Зайві "px" після 0 */
}

/* ✅ Правильно: */
a {
    color: blue;
    margin: 0;
}

/* ✅ Порядок за RECESS: */
.element {
    /* 1. Позиціонування */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    /* 2. Блокова модель */
    display: flex;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    padding: 1rem;

    /* 3. Типографія */
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* 4. Зовнішній вигляд */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* 5. Анімація */
    transition: all 0.3s ease;
}

/* ❌ Stylelint вкаже на помилку — неправильний порядок: */
.element {
    color: red; /* Типографія стоїть перед позиціонуванням */
    position: fixed; /* Позиціонування має бути першим */
    display: block;
}

Файл конфігурації: .stylelintrc.json

Stylelint шукає конфігураційний файл у корені проєкту. Створіть файл .stylelintrc.json:

{
    "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
    "plugins": ["stylelint-order"],
    "rules": {
        "alpha-value-notation": "number",
        "color-function-notation": "legacy",
        "selector-class-pattern": null
    }
}

Що робить кожна секція:

Як Stylelint інтегрується з VS Code

Ланцюжок спрацьовує при кожному Ctrl + S:

sequenceDiagram
    participant Dev as Розробник
    participant VSCode as VS Code
    participant Stylelint as Stylelint Extension
    participant Config as .stylelintrc.json
    participant Prettier as Prettier

    Dev->>VSCode: Ctrl+S
    VSCode->>Stylelint: source.fixAll.stylelint
    Stylelint->>Config: Читає правила
    Config-->>Stylelint: extends + plugins + rules
    Stylelint->>VSCode: Виправляє порядок властивостей
    VSCode->>Prettier: editor.formatOnSave
    Prettier->>VSCode: Форматує відступи, пробіли
    VSCode-->>Dev: Збережений та відформатований файл

Перевірка що все працює

Після налаштування створіть test.css з такими помилками:

/* Цей файл ПОВИНЕН показувати помилки Stylelint */
.card {
    color: red; /* Помилка: color до position? */
    position: relative; /* position має бути першим */
    padding: 0px; /* Помилка: 0px → 0 */
    color: blue; /* Помилка: дублікат color + неправильний регістр */
}

При збереженні (Ctrl + S) Stylelint автоматично:

1. Виправить 0px → 0
2. Переставить position: relative перед color
3. Підкреслить COLOR: blue червоним (дублікат — автовиправлення неможливе)

Запуск Stylelint з командного рядка

Окрім VS Code, Stylelint запускається вручну — корисно для CI/CD або перевірки перед коммітом:

# Перевірити всі CSS-файли
npx stylelint "**/*.css"

# Перевірити SCSS-файли
npx stylelint "**/*.scss"

# Перевірити та автоматично виправити
npx stylelint "**/*.css" --fix

# Перевірити конкретний файл
npx stylelint style.css

Додайте в package.json для зручності:

{
    "scripts": {
        "lint:css": "stylelint \"**/*.css\"",
        "lint:css:fix": "stylelint \"**/*.css\" --fix"
    }
}

Тепер npm run lint:css перевіряє весь CSS, npm run lint:css:fix — виправляє.

Базові визначення HTML

Тег

Тег (від англ. tag — мітка) — основна одиниця HTML-розмітки. Теги записуються в кутових дужках і вказують браузеру, як відображати вміст.

Більшість тегів бувають парними — мають відкриваючий та закриваючий варіанти:

<p>Це абзац тексту.</p>

Анатомія парного тегу:

• <p> — відкриваючий тег (opening tag)
• Це абзац тексту. — вміст (content)
• </p> — закриваючий тег (closing tag), завжди починається з /

Деякі теги є одинарними (самозакривними) — вони не мають вмісту:

<br />
<!-- Перенос рядка -->
<img />
<!-- Зображення -->
<input />
<!-- Поле вводу -->
<hr />
<!-- Горизонтальна лінія -->
<meta />
<!-- Метадані -->
<link />
<!-- Підключення ресурсів -->

Елемент

Елемент (element) — це весь вміст між відкриваючим і закриваючим тегами, включно із самими тегами.

<p>Це елемент абзацу.</p>
<!-- ↑ Весь цей рядок — елемент <p> -->

Елементи можуть бути вкладені один в одного (принцип матрьошки):

<article>
    <h2>Заголовок статті</h2>
    <p>Перший абзац з <strong>важливим словом</strong>.</p>
    <p>Другий абзац.</p>
</article>

Тут <article> є батьківським елементом (parent element), а <h2> та <p> — дочірніми елементами (child elements). <strong> є дочірнім щодо <p>.

<!-- ❌ Неправильно: -->
<b><i>текст</b></i>

<!-- ✅ Правильно: -->
<b><i>текст</i></b>

Атрибут

Атрибут (attribute) — додаткова характеристика тегу, яка уточнює його поведінку або зовнішній вигляд. Атрибути записуються тільки у відкриваючому тегу у форматі назва="значення".

<a href="https://google.com" target="_blank" title="Відкрити Google"> Посилання на Google </a>

Розбір атрибутів:

• href="https://google.com" — адреса посилання
• target="_blank" — відкрити у новій вкладці
• title="Відкрити Google" — підказка при наведенні миші

Глобальні атрибути доступні для будь-якого HTML-тегу:

Структура HTML-файлу: DOCTYPE та базові теги

Що таке DOCTYPE і навіщо він потрібен?

DOCTYPE — це перший рядок кожного HTML-документа. Він повідомляє браузеру, яку версію HTML ви використовуєте, щоб браузер міг правильно побудувати DOM (Document Object Model — об'єктна модель документа) і застосувати відповідні правила рендерингу.

Без DOCTYPE браузер переходить у «режим сумісності» (quirks mode) — і намагається відтворити поведінку старих браузерів 1990-х, що може призвести до непередбачуваного відображення.

У HTML5 DOCTYPE максимально простий:

<!DOCTYPE html>

Для цікавості — ось як виглядав DOCTYPE у старих стандартах:

<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Очевидно, чому HTML5 переміг — простота перемагає.

Повна структура HTML-документа

<!DOCTYPE html>
<html lang="uk">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Опис сторінки для пошукових систем" />
        <title>Назва моєї першої сторінки</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <!-- Основний вміст сторінки -->
        <h1>Ласкаво просимо!</h1>
        <p>Це моя перша HTML-сторінка.</p>

        <script src="script.js"></script>
    </body>
</html>

Розберемо кожен елемент детально.

Тег <html> — кореневий елемент

Тег <html> є кореневим елементом (root element) — він містить у собі весь HTML-документ. Буквально все, що є на сторінці, знаходиться всередині цього тегу.

<html lang="uk">
    <!-- Весь вміст документа -->
</html>

Атрибут lang вказує мову документа. Це критично важливо для:

• Пошукових систем: Google розуміє, яка мова на сторінці, і показує її відповідній аудиторії
• Скринрідерів: програми для слабозорих правильно вимовляють текст
• CSS: властивість hyphens: auto для переносу слів потребує правильного lang
• SEO: покращує ранжування в локальних пошуках

Коди мов за стандартом ISO 639-1:

• uk — українська
• en — англійська
• de — німецька
• fr — французька
• uk-UA — українська (Україна) — регіональне уточнення

Тег <head> — «голова» документа

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Навчальний курс з HTML для початківців" />
    <meta name="author" content="Іван Петренко" />
    <title>HTML Курс — Урок 1</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>

Тег <meta> — метادані

Тег <meta> — одинарний (немає закриваючого тегу). Описує різноманітні властивості документа.

<meta charset="UTF-8"> — найважливіший мета-тег. Вказує кодування документа.

Кодування (charset, character set) — це таблиця відповідності між числовими кодами та символами. Наприклад, в UTF-8 символ А має код 1040, і — 1110.

Çàì³ñòü öüîãî òåêñòó âè ïîáà÷èòå îöå

Чому UTF-8? Це найуніверсальніше кодування, що підтримує символи практично всіх мов світу — від латиниці та кирилиці до китайських ієрогліфів та емодзі 🎉.

<meta name="viewport"> — критично важливий для мобільних пристроїв:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Без цього тегу мобільний браузер відображає сторінку, як ніби вона ширша за екран, і масштабує її вниз — текст стає нечитабельно дрібним.

<meta name="description"> — опис сторінки для пошукових систем (до 160 символів). Саме цей текст відображається в результатах пошуку Google під заголовком посилання.

Тег <title> — заголовок документа

Тег <title> визначає назву документа, яка:

• Відображається у вкладці браузера
• Стає назвою закладки при збереженні
• Використовується як заголовок у результатах пошуку Google
• Оголошується скринрідерами при відкритті сторінки

<title>Вступ до HTML — Курс веб-розробки 2024</title>

Тег <link> — підключення ресурсів

Тег <link> підключає зовнішні ресурси: CSS-стилі, іконку сайту (favicon), шрифти.

<!-- Підключення CSS-файлу -->
<link rel="stylesheet" href="styles/main.css" />

<!-- Підключення Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />

<!-- Favicon (іконка у вкладці) -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Тег <body> — тіло документа

Тег <body> — це видима частина сторінки. Весь контент, який бачить користувач — текст, зображення, посилання, форми — знаходиться саме тут.

<body>
    <header>
        <h1>Мій перший сайт</h1>
        <nav>
            <a href="/">Головна</a>
            <a href="/about">Про нас</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>Перша стаття</h2>
            <p>Текст статті...</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2024 Мій сайт</p>
    </footer>
</body>

Коментарі в HTML

Коментарі — текст, який браузер ігнорує. Корисні для пояснення коду та тимчасового приховування блоків.

<!-- Це однорядковий коментар -->

<!--
  Це багаторядковий коментар.
  Можна приховати цілий блок коду.
-->

<!-- Початок шапки сайту -->
<header>
    <h1>Заголовок</h1>
</header>
<!-- Кінець шапки сайту -->

Гаряча клавіша у VS Code: Ctrl + / на рядку або для виділеного блоку.

Кодування документа: UTF-8 у деталях

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

Як перевірити та змінити кодування у VS Code:

1. В правому нижньому куті редактора відображається поточне кодування (наприклад, UTF-8)
2. Клацніть на нього для зміни
3. У командній палітрі (Ctrl + Shift + P) введіть Change File Encoding

Як VS Code зберігає файли:
VS Code за замовчуванням зберігає файли в UTF-8 без BOM (Byte Order Mark — мітка порядку байтів). Це правильно для веб-розробки. Деякі старі версії Notepad Windows додавали BOM, що могло призводити до проблем на сервері.

Валідація HTML-документів

Валідація (validation) — перевірка HTML-коду на відповідність стандартам W3C. Некоректний HTML може відображатися непередбачувано в різних браузерах.

Онлайн-валідатор: validator.w3.org

Можна валідувати:

• Введений URL сайту
• Завантажений HTML-файл
• Вставлений HTML-код

Приклад помилки валідатора:

Error: Element "center" not allowed as child of element "body" in this context.
→ Тег <center> є застарілим у HTML5, використовуйте CSS: text-align: center

Заголовки h1–h6: від теорії до практики

Навіщо потрібні заголовки?

Уявіть книгу без змісту та розділів — лише суцільний текст. Читати її було б важко. Заголовки в HTML виконують ту ж роль: структурують документ і полегшують навігацію.

Заголовки також мають вагу для SEO: пошукові системи використовують заголовки для розуміння структури та теми сторінки. Заголовок <h1> — найбільш значущий.

Теги заголовків

В HTML є 6 рівнів заголовків: від <h1> (найбільший, найважливіший) до <h6> (найменший).

<h1>Заголовок першого рівня</h1>
<h2>Заголовок другого рівня</h2>
<h3>Заголовок третього рівня</h3>
<h4>Заголовок четвертого рівня</h4>
<h5>Заголовок п'ятого рівня</h5>
<h6>Заголовок шостого рівня</h6>

Буква h походить від англійського heading (заголовок). Цифра вказує на рівень важливості.

Ось як brauzер відображає ці заголовки за замовчуванням:

Правила використання заголовків

Блокові елементи: що це означає для заголовків?

Заголовки — це блокові елементи (block elements). Це означає:

1. Вони займають всю доступну ширину контейнера (навіть якщо текст короткий)
2. Наступний елемент автоматично починається з нового рядка
3. Мають відступи зверху та знизу за замовчуванням

<h2>Короткий заголовок</h2>
<p>Цей абзац автоматично буде на новому рядку</p>

Абзаци: тег <p>

Навіщо потрібні абзаци?

Суцільний текст без абзаців — це катастрофа для читача. Абзаци (paragraph) ділять текст на смислові блоки, полегшуючи сприйняття.

Важливо розуміти: HTML ігнорує пробіли та переноси рядків у коді! Скільки б ви не натискали Enter в редакторі — браузер покаже все як один рядок.

<!-- Цей код -->
<p>Перше речення. Друге речення. Третє речення після порожнього рядка.</p>

<!-- Браузер покаже так: -->
<!-- Перше речення. Друге речення. Третє речення після порожнього рядка. -->

Єдиний спосіб розділити текст — теги.

Синтаксис тегу <p>

<p>Це перший абзац тексту. Він може бути довгим і займати кілька рядків.</p>

<p>Це другий абзац. Браузер автоматично додасть відступ між абзацами.</p>

Браузер додає відступи зверху та знизу кожного абзацу (відповідно до стандартних стилів — margin: 1em 0). Це візуально відокремлює один блок тексту від іншого.

<p> vs <br> — яка різниця?

Новачки часто плутаються між цими двома тегами.

<!-- <br> — лише перенос рядка, без семантики -->
Перший рядок<br />
Другий рядок<br />
Третій рядок

<!-- <p> — семантичний абзац, з відступами -->
<p>Перший абзац</p>
<p>Другий абзац</p>

Тег <div> — блоковий контейнер

Тег <div> (division — розділ) — найбільш нейтральний блоковий контейнер. На відміну від <p>, <article>, <section> він не несе жодного семантичного значення — це просто «коробка», яка групує елементи для CSS або JavaScript.

<div class="card">
    <div class="card-header">
        <h3>Назва картки</h3>
    </div>
    <div class="card-body">
        <p>Вміст картки</p>
    </div>
    <div class="card-footer">
        <button>Детальніше</button>
    </div>
</div>

<div> неймовірно корисний для:

• Групування елементів для застосування CSS
• Створення макетів сторінок
• Обгортання елементів для JavaScript-маніпуляцій

Тег <span> — рядковий контейнер

Тег <span> — рядковий аналог <div>. Він також семантично нейтральний, але є рядковим (inline) елементом — не переносить текст на нови рядок.

<p>
    Температура сьогодні
    <span class="temperature highlight">+23°C</span>
    — ідеальна для прогулянки.
</p>

Де використовується <span>:

• Підсвічення частини тексту різним кольором
• Застосування стилів до підрядкового фрагменту
• Маніпуляції з частиною тексту через JavaScript

Emmet: турбо-режим написання HTML

Emmet — це плагін (вбудований у VS Code), який розгортає короткі абревіатури в повноцінний HTML. Він кратно прискорює написання коду.

Базова структура одним натисканням

Введіть у порожньому .html файлі символ ! і натисніть Tab:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
</html>

Вся базова структура — однією клавішею!

Синтаксис абревіатур Emmet

div>p
→ <div><p></p></div>

ul>li
→ <ul><li></li></ul>

h1+p
→ <h1></h1><p></p>

div+div+div
→ три <div> поряд

ul>li*5
→ <ul> з 5 елементами <li>

p*3
→ три абзаци <p>

h1{Заголовок}
→ <h1>Заголовок</h1>

p{Lorem ipsum}
→ <p>Lorem ipsum</p>

div.container
→ <div class="container"></div>

p.lead.text-center
→ <p class="lead text-center"></p>

section#hero
→ <section id="hero"></section>

Реальні приклади Emmet

<!-- Абревіатура: -->
header>nav>ul>li*4>a{Пункт меню $}

<!-- Результат: -->
<header>
    <nav>
        <ul>
            <li><a href="">Пункт меню 1</a></li>
            <li><a href="">Пункт меню 2</a></li>
            <li><a href="">Пункт меню 3</a></li>
            <li><a href="">Пункт меню 4</a></li>
        </ul>
    </nav>
</header>

<!-- Абревіатура: -->
section.hero>div.container>h1{Заголовок сторінки}+p{Підзаголовок}+a.btn{Дізнатись більше}

<!-- Результат: -->
<section class="hero">
    <div class="container">
        <h1>Заголовок сторінки</h1>
        <p>Підзаголовок</p>
        <a href="" class="btn">Дізнатись більше</a>
    </div>
</section>

Lorem ipsum через Emmet

Lorem ipsum — класичний текст-заповнювач для макетів. Emmet генерує його автоматично:

<!-- p>lorem → -->
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.
</p>

<!-- p>lorem5 → 5 слів -->
<p>Lorem ipsum dolor sit amet.</p>

<!-- p*3>lorem20 → 3 абзаци по 20 слів -->

Атрибути тегів: поглиблений розгляд

Обов'язкові та необов'язкові атрибути

Деякі атрибути обов'язкові для правильної роботи тегу:

<!-- Без src зображення не відобразиться -->
<img src="photo.jpg" alt="Опис фото" />

<!-- Без href посилання нікуди не веде -->
<a href="https://example.com">Текст посилання</a>

Інші атрибути необов'язкові — лише уточнюють поведінку:

<!-- target="_blank" — необов'язковий, але змінює поведінку -->
<a href="https://example.com" target="_blank">Відкрити у новій вкладці</a>

Булеві атрибути

Деякі атрибути є булевими (boolean) — їхня наявність означає true, відсутність — false:

<!-- Усі три записи рівнозначні: -->
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />

<!-- Інші приклади булевих атрибутів: -->
<button disabled>Недоступна кнопка</button>
<input type="text" readonly />
<details open>Відкритий спойлер за замовчуванням</details>
<video autoplay muted loop>...</video>

Застарілі атрибути — чого уникати

З переходом на HTML5 та CSS3 багато атрибутів стали застарілими (deprecated). Їх підтримка браузерами може припинитися.

Практичне завдання

Застосуйте отримані знання! Створіть HTML-сторінку — власну міні-біографію.

<body>
    <h1>Іван Петренко</h1>
    <p>Веб-розробник. Навчаюся HTML з нуля.</p>
</body>

    <h2>Про мене</h2>
    <p>Мене звати [Ваше ім'я]. Я живу в [місто] і вивчаю веб-розробку.</p>

    <h2>Мої навички</h2>
    <p>Поки що лише HTML, але це лише початок!</p>

    <h2>Мої цілі</h2>
    <p>Хочу стати фронтенд-розробником і створювати красиві сайти.</p>
</body>

Підсумок

Ми пройшли шлях від появи HTML у 1991 році до сучасного HTML5. Розібрали структуру кожного елемента документа та навчилися ефективно використовувати VS Code з Emmet.

Перевірка знань

Корисні посилання

• 📖 MDN Web Docs — HTML — офіційна документація українською
• 🏫 W3Schools HTML Tutorial — інтерактивні уроки
• ✅ W3C Validator — перевірка коду
• 🔧 VS Code — завантажити редактор
• 🌐 caniuse.com — підтримка браузерами
• 📝 Emmet Cheat Sheet — всі абревіатури