Що таке HTML?

HTML - це абревіатура від словосполучення "HyperText Markup Language", що в перекладі на українську означає "Мова гіпертекстової розмітки тексту". По суті це код, за допомогою якого створюються сторінки сайту. Він працює спільно з каскадними таблицями стилів (CSS) та мовою програмування JavaScript.

HTML як основа web-розробки

HTML - це мова розмітки структури та вмісту вебсторінки. Кожна сторінка в інтернеті (у тому числі і ця) написана за допомогою даної технології. Щоб побачити код сторінки, можна натиснути комбінацію клавіш Ctrl+Shift+I. Після цього відкриється інструментарій розробника, вбудований у браузер. Код, що відображається, може здатися занадто складним для новачка. Для кращого його розуміння важливо ознайомитися з основними структурними елементами - тегами.

Основні структурні теги HTML

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

Основними структурними тегами HTML є:

<!DOCTYPE html> - оголошення типу документа;
<html> - кореневий тег, в якому розміщуються всі інші елементи;
<head> - тег, в якому розміщуються невидимі користувачеві елементи;
<meta> - задає метадані вебсторінки;
<title> - назва сторінки на вкладці браузера;
<link> - тег для підключення інших файлів. Наприклад - CSS;
<style> - також використовується для завдання стилів CSS, але без підключення зовнішнього файлу;
<script> - тег для розміщення коду JavaScript;
<body> - вміст сторінки, яку бачить користувач.

Основні семантичні теги HTML

Семантичні теги мови гіпертекстової розмітки - це елементи, які використовуються для спрощення розуміння пошуковими системами вмісту веб-сторінки.

<header> - верхня частина сторінки або розділу, зазвичай містить логотип та навігацію;
<nav> - секція для навігації, меню;
<main> - основний контент сторінки;
<section> - логічно виділений розділ, який може містити заголовок та контент;
<article> - незалежний блок контенту, такий як стаття, новина або пост;
<aside> - додаткова інформація, що зазвичай розташовується збоку від основного контенту;
<footer> - нижня частина сторінки або розділу, містить контакти, посилання на політику конфіденційності;
<figure> - контейнер для графічного контенту, такого як зображення або діаграми;
<figcaption> - підпис до вмісту всередині тега <figure>.

Семантичні теги важливі для пошукової оптимізації сайту - SEO.

Основні теги HTML для форматування контенту

При оформленні текстового, графічного контенту використовують такі теги:

<h1>...</h1> до <h6>...</ h6> — заголовки різного рівня, від головного (<h1>) до підзаголовків (<h6>);
<p>...</p> — абзаци тексту;
<a href="...">...</a> — посилання на інші сторінки або ресурси;
<img src="..." alt="..."> — зображення;
<ul>...</ul>, <ol>...</ ol> та <li>...</li> — марковані та нумеровані списки;
<div>...</div> та <span>...</ span> — універсальні контейнери для групування елементів та застосування стилів.

Як працює HTML?

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

Приклад роботи HTML-коду

Кращий спосіб побачити як працює мова гіпертекстової розмітки - це самостійно створити файл у даному форматі та відкрити його у браузері. Для цього потрібно відкрити звичайний текстовий редактор (наприклад, блокнот), скопіювати туди код, поданий нижче, та зберегти у форматі .html. Далі просто відкрити створений файл у будь-якому браузері.

HTML-код сторінки

Результат у браузері

Заголовок першого рівня

Заголовок другого рівня

Заголовок третього рівня

Це абзац із прикладом тексту, що демонструє базову структуру мови гіпертекстової розмітки.

Перший елемент списку
Другий елемент списку
Третій елемент списку

У даному випадку, у браузері з'явиться текст з тегів h1-h3, p, ul, li, тобто заголовки першого, другого та третього рівня, абзац тексту та маркований список. Колір тексту, шрифт та інші стилі в цьому прикладі не задані, тому браузер відображає їх за замовчуванням.

Вивчити HTML, CSS, JavaScript сьогодні можна за допомогою спеціалізованих курсів, безкоштовних уроків у YouTube або відповідних книг. При цьому важливо пам'ятати, що веб-розробка не стоїть на місці і вдосконалюється з кожним днем. Нові стандарти, інструменти та підходи до програмування регулярно з'являються, що дозволяє створювати більш функціональні, зручні та продуктивні сайти. Слідкувати за змінами можна на HTML Living Standard від WHATWG, де регулярно оновлюються всі стандарти.