HTML (HyperText Markup Language) — язык разметки, который определяет структуру и содержание каждой веб-страницы. Разбираем все ключевые теги.
HTML — это не язык программирования. Это язык разметки: вы оборачиваете текст в теги, чтобы браузер знал, как его отобразить.
Каждая веб-страница, которую вы видите — от Яндекса до Википедии — построена на HTML. CSS добавляет стили, JavaScript — интерактивность, но скелет всегда HTML.
Анатомия любой веб-страницы: DOCTYPE, head, body
Каждый HTML-файл начинается с одинакового «скелета»:
| Элемент | Назначение |
|---|---|
| <!DOCTYPE html> | Объявление типа документа (HTML5). Не тег, а инструкция браузеру. |
| <html> | Корневой элемент. Атрибут lang указывает язык для поисковиков и скринридеров. |
| <head> | Метаданные: заголовок вкладки, кодировка, стили, скрипты. Не видно на странице. |
| <meta charset> | Кодировка символов. UTF-8 — поддерживает все языки мира. |
| <title> | Заголовок вкладки браузера. Важен для SEO. |
| <body> | Всё видимое содержимое: текст, картинки, кнопки, формы. |
<head> — обложка и оглавление (для библиотекаря). <body> — сам текст (для читателя).
Заголовки, абзацы, выделения, ссылки, изображения
Шесть уровней заголовков. <h1> — самый важный (один на страницу), <h6> — самый мелкий.
<p> — абзац (блок текста с отступами). <br> — принудительный перенос строки. <hr> — горизонтальная линия-разделитель.
| Тег | Эффект | Когда использовать |
|---|---|---|
| <b> | Жирный | Визуальное выделение без смыслового акцента |
| <strong> | Жирный + важный | Смысловой акцент (важная информация) |
| <i> | Курсив | Визуальный курсив |
| <em> | Курсив + ударение | Логическое ударение в предложении |
| <code> | Моноширинный | Фрагменты кода, команды |
| <mark> | Подсветка | Выделение найденного текста |
| <del> | Удалённый/устаревший текст |
<a href="URL">текст</a> — гиперссылка. Атрибуты:
href — адрес (URL или #якорь)target="_blank" — открыть в новой вкладкеtitle — всплывающая подсказка<img src="путь" alt="описание"> — самозакрывающийся тег.
src — путь к файлу (относительный или URL)alt — описание для скринридеров и при ошибке загрузкиwidth / height — размеры в пикселяхalt! Это нужно для доступности (слепые пользователи), SEO и когда картинка не загрузилась.
Структурируем данные: маркированные, нумерованные списки и таблицы
| Тип | Теги | Пример |
|---|---|---|
| Маркированный | <ul> → <li> | • Пункт 1 • Пункт 2 |
| Нумерованный | <ol> → <li> | 1. Пункт 1 2. Пункт 2 |
| Определений | <dl> → <dt> + <dd> | Термин → Определение |
Списки можно вкладывать: <li> может содержать вложенный <ul> или <ol>.
Поля ввода, кнопки, чекбоксы — всё, с чем взаимодействует пользователь
<form action="/submit" method="POST"> — контейнер для полей ввода. action — куда отправлять данные, method — GET или POST.
| type | Вид | Применение |
|---|---|---|
| text | Однострочное текстовое поле | Имя, поиск |
| Поле email (проверка @) | Регистрация | |
| password | Скрытый ввод (•••) | Пароли |
| number | Числовое поле (стрелки) | Количество, возраст |
| checkbox | Флажок ☑ | Согласие, множественный выбор |
| radio | Переключатель ◉ | Один из нескольких |
| date | Выбор даты (календарь) | Дата рождения |
| range | Ползунок | Громкость, яркость |
| file | Загрузка файла | Аватар, документ |
| submit | Кнопка отправки | Отправить форму |
<textarea> — многострочное текстовое поле<select> + <option> — выпадающий список<label> — подпись к полю (связь через for="id")<button> — универсальная кнопкаrequired делает поле обязательным, pattern — проверяет формат через регулярное выражение.
Теги, которые объясняют смысл содержимого, а не только его вид
Можно сделать всю страницу из <div> и <span>. Но семантические теги:
| Тег | Назначение |
|---|---|
| <header> | Шапка страницы или секции (логотип, навигация) |
| <nav> | Навигационное меню |
| <main> | Основное содержимое (один на страницу) |
| <article> | Самостоятельный блок (статья, пост, товар) |
| <section> | Тематическая группа контента |
| <aside> | Боковая панель, дополнительная информация |
| <footer> | Подвал (копирайт, ссылки, контакты) |
| <figure> | Иллюстрация с подписью (<figcaption>) |
| <details> | Раскрывающийся блок (FAQ) |
Нажмите на категорию для фильтрации. Кликните на тег — увидите пример кода.
Редактируйте HTML — превью обновляется мгновенно. Используйте пресеты для быстрого старта.