Що таке HTML

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

HTML не є мовою програмування — вона не виконує логічних операцій чи обчислень. Натомість HTML визначає «каркас» сторінки, тобто відповідає за те, як організований її вміст. Усе, що ви бачите на вебсайтах — від тексту до медіафайлів, — подається у вигляді HTML-структури, яку інтерпретує браузер.

Кожен елемент у HTML описується за допомогою тегів. Наприклад, <p> означає абзац, <a> — гіперпосилання, <img /> — зображення. Ці теги можна комбінувати, вкладати один в одного та доповнювати атрибутами для розширення функціональності.

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

Як працює HTML

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

Теги HTML та структура

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

У цьому прикладі <p>— відкривальний тег,</p> — закривальний, а між ними розміщується вміст, який потрібно показати на сторінці.

Є також одиночні теги, які не мають закривальної частини, наприклад:

<img src="photo.jpg" alt="Фото">

Атрибути

Теги можуть мати атрибути, які надають їм додаткову інформацію. Наприклад, атрибут src у тегу <img /> вказує шлях до зображення, а alt — текст, що відображається, якщо зображення не завантажилось.

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

Типовий HTML-файл виглядає так:

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8">
    <title>Моя перша сторінка</title>
  </head>
  <body>
    <h1>Вітаємо на сайті!</h1>
    <p>Це ваш перший крок у світі HTML.</p>
  </body>
</html>

<!DOCTYPE html> — визначає тип документа (HTML5).
<html> — кореневий елемент.
<head> — містить службову інформацію (метадані, заголовок, підключення стилів тощо).
<body> — основна частина сторінки, яку бачить користувач.

Так буде виглядати в браузері наша сторінка:

Від розмітки до сторінки

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

HTML коди кольорів: як використовувати

Для того щоб застосувати HTML коди кольорів у вашому коді, вам потрібно додати їх до CSS властивостей.

Структура HTML-документу

Структура HTML-документу складається з декількох основних елементів і визначає, як буде організовано контент на веб-сторінці.

HTML коди кольорів

Існує кілька способів представлення кольорів у HTML, найпоширенішими з яких є HEX, RGB та HSL.

Роль HTML і CSS

HTML описує, що відображається на сторінці (заголовки, абзаци, зображення тощо). Натомність CSS визначає, як ці елементи мають виглядати (шрифти, кольори, відступи, позиціонування тощо).

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

Навіщо вчити HTML сьогодні

Кожна вебсторінка, яку ви бачите в браузері, незалежно від того, наскільки вона складна або інтерактивна, створена з використанням HTML. Без знання цієї мови неможливо зрозуміти, як працює веб або розпочати кар’єру у фронтенді.

HTML — це перша сходинка вивчення таких мов і інструментів, як:

CSS — для стилізації;
JavaScript — для інтерактивності;
React, Vue, Angular — для сучасної фронтенд-розробки;
WordPress та CMS — для створення сайтів без коду або з його мінімумом.

Форми в HTML