Автор Admin 
Ви відкриваєте будь-який сайт в інтернеті — і бачите текст, картинки, кнопки, меню. Усе це виглядає як єдина цілісна сторінка. Але насправді за кожним сайтом стоїть код. І перше, з чого він починається — HTML. Розбираємо, що це таке, як працює і навіщо знати це навіть тим, хто не планує ставати програмістом.
Зміст:
HTML — це не мова програмування
Перше і найважливіше, що треба зрозуміти: HTML — це не мова програмування. Це мова розмітки. Різниця принципова.
Мова програмування вміє думати: виконувати умови, запускати цикли, обробляти логіку. HTML нічого з цього не робить. Він просто описує структуру сторінки: де заголовок, де абзац, де картинка, де посилання. Браузер читає цей опис і показує вам готову сторінку.
Повна назва — HyperText Markup Language, що перекладається як «мова гіпертекстової розмітки». Саме звідси — абревіатура HTML.
Проста аналогія
Уявіть, що сайт — це будинок:
- HTML — це цегла і стіни. Каркас, основа, структура.
- CSS — це оздоблення: фарба, шпалери, меблі. Відповідає за зовнішній вигляд.
- JavaScript — це електрика і сантехніка. Робить усе інтерактивним і живим.
Без HTML — немає нічого. З одним HTML — є структура, але без краси. Разом усі три — повноцінний сайт.
З чого складається HTML: теги, елементи, атрибути
Що таке тег
Тег — це основна одиниця HTML. Він виглядає як слово в кутових дужках і «говорить» браузеру, що саме тут розміщено.
Більшість тегів мають відкриваючу і закриваючу частини:
<p>— відкриваючий тег (p = paragraph, абзац)</p>— закриваючий тег (з косою рискою всередині)- Між ними — вміст, який побачить користувач
Є і одиночні теги — без закриваючої частини. Наприклад, тег зображення:
Що таке атрибут
Атрибути — це додаткові параметри всередині тега. Вони уточнюють: куди веде посилання, яке зображення показати, який розмір у елемента.
Атрибут завжди записується у відкриваючому тезі у форматі назва="значення":
Тут href — атрибут, що вказує адресу посилання.
Найпоширеніші атрибути
| Атрибут | Для чого |
|---|---|
href |
Адреса посилання в тезі <a> |
src |
Адреса зображення або файлу |
alt |
Текст-замінник, якщо картинка не завантажилась |
style |
Вбудований CSS-стиль прямо в тезі |
id |
Унікальний ідентифікатор елемента |
class |
Клас для стилізації через CSS |
Структура HTML-документа: мінімальний каркас
Будь-яка HTML-сторінка має стандартну структуру. Ось як виглядає мінімальний каркас:
Що тут що:
<!DOCTYPE html>— оголошення типу документа. Каже браузеру: «Це HTML5, читай відповідно»<html>— кореневий тег, що обгортає всю сторінку<head>— «голова» сторінки. Сюди входить назва вкладки, підключення до CSS, мета-теги для SEO. Користувач це не бачить<body>— «тіло» сторінки. Сюди входить усе, що відображається: текст, картинки, кнопки, форми
Найважливіші HTML-теги: що треба знати з першого разу
Заголовки
HTML має шість рівнів заголовків — від <h1> до <h6>. Чим менша цифра — тим важливіший і більший заголовок.
Важливо: на кожній сторінці має бути лише один <h1> — це головний заголовок. Пошукові системи звертають на нього особливу увагу.
Текст і посилання
<p>— абзац тексту<a href="...">— посилання<strong>— жирний текст (важливий)<em>— курсив (виділений)<br>— перенос рядка (одиночний тег)
Зображення і медіа
Атрибут alt — обов’язковий. Він допомагає пошуковикам розуміти зміст зображення і показується, якщо картинка не завантажилась.
Списки
Є два типи:
Семантичний HTML: чому важливо писати правильно
Семантика — це коли тег не просто «тримає контент», а позначає його зміст. Порівняйте два приклади:
Результат на екрані — однаковий. Але для пошуковика і для людей з обмеженими можливостями (екранні зчитувачі) — велика різниця.
Основні семантичні теги HTML5
| Тег | Призначення |
|---|---|
<header> |
Шапка сторінки або розділу |
<nav> |
Блок навігації |
<main> |
Основний контент сторінки |
<article> |
Самостійна стаття або запис |
<section> |
Тематичний розділ |
<aside> |
Бічна панель, додаткова інформація |
<footer> |
Підвал сторінки |
Семантичний HTML допомагає Google краще індексувати сторінку і напряму впливає на SEO.
HTML і SEO: прямий зв’язок
Пошукові системи «читають» HTML так само, як браузер — тільки замість картинки вони бачать текст і структуру. Кілька речей, що впливають на ранжування:
- Тег
<title>— назва сторінки у вкладці браузера і в результатах пошуку - Мета-тег description — короткий опис сторінки для Google
- Заголовки h1–h6 — ієрархія контенту, що допомагає зрозуміти тему
- Атрибут
altу зображень — індексується пошуковиками - Семантичні теги — допомагають алгоритмам розуміти структуру без зайвого JavaScript
Як подивитись HTML будь-якого сайту
Це можна зробити прямо зараз, без жодних програм:
- Відкрийте будь-який сайт у браузері
- Натисніть правою кнопкою миші на будь-якому місці сторінки
- Оберіть «Перегляд коду сторінки» або «Переглянути код»
- Відкриється HTML-код цієї сторінки
Так можна вивчати реальні приклади верстки і розуміти, як побудовані сайти, якими ви користуєтесь щодня.
З чого почати вивчення HTML
Хороша новина: HTML вивчається швидше за будь-яку іншу технологію веброзробки. Кілька практичних порад:
- Почніть з базових тегів —
<html>,<head>,<body>,<h1>–<h6>,<p>,<a>,<img> - Пишіть код у будь-якому текстовому редакторі (VS Code — безкоштовний і найпопулярніший)
- Зберігайте файл з розширенням
.htmlі відкривайте у браузері — результат побачите одразу - Не вчіть усі теги напам’ять — їх понад 100. Достатньо знати 20–30 основних, решту — гуглити за потреби
Підсумок: головне про HTML
- HTML — це мова розмітки, а не програмування. Вона описує структуру сторінки
- Основа HTML — теги в кутових дужках, що вказують браузеру, що і де розміщено
- Кожна HTML-сторінка має стандартну структуру:
<!DOCTYPE>,<html>,<head>,<body> - Семантичні теги допомагають пошуковикам і покращують SEO
- HTML завжди працює разом із CSS (зовнішній вигляд) і JavaScript (інтерактивність)
- Вивчити основи HTML можна за кілька днів — це найлегша точка входу у веброзробку