HTML5: основные теги

Содержание урока

Что такое HTML
Теги и элементы
Атрибуты
Вложенность
Структура HTML-документа
Текстовые теги
Заголовки h1–h6
Абзацы, переносы и линии
Выделение текста
Ссылки
Картинки
Списки
Таблицы
Блочные и строчные элементы
Семантические теги HTML5
Собираем страницу целиком
Типичные ошибки
Практика
Итоги

HTML — это язык, на котором описывают структуру любой веб-страницы: где заголовок, где абзац, где картинка, где ссылка и список. В этом уроке разберём, из чего состоит HTML-документ, научимся пользоваться основными тегами HTML5 и соберём первую осмысленную страницу. Это фундамент: CSS и JavaScript, которые будут дальше, работают именно с HTML-разметкой.

Что такое HTML

HTML (HyperText Markup Language — «язык гипертекстовой разметки») — это не язык программирования, а язык разметки. Он ничего не вычисляет, а только объясняет браузеру, что есть что на странице.

Представьте документ в Word: вы выделяете строку и говорите «это заголовок», выделяете абзац — «это обычный текст». В HTML то же самое делается тегами.

Сайт обычно состоит из трёх слоёв:

Слой	Технология	Аналогия с домом
Структура	HTML	Стены и комнаты
Оформление	CSS	Обои, краска, мебель
Поведение	JavaScript	Электричество, двери, лифт

Теги и элементы

Тег — это слово в угловых скобках. Большинство тегов парные: открывающий и закрывающий (со слешем).

<p>Это абзац текста.</p>

<p> — открывающий тег (p — paragraph, «абзац»);
Это абзац текста. — содержимое;
</p> — закрывающий тег.

Всё вместе — открывающий тег, содержимое и закрывающий тег — называется элементом.

Некоторые теги одиночные (пустые): у них нет содержимого и нет закрывающего тега.

<br>
<hr>
<img src="cat.jpg" alt="Рыжий кот">

Атрибуты

Атрибуты — это дополнительные настройки тега. Они пишутся внутри открывающего тега в виде имя="значение".

<a href="https://developer.mozilla.org" target="_blank">Документация MDN</a>

href — куда ведёт ссылка;
target="_blank" — открыть в новой вкладке.

Вложенность

Теги можно вкладывать друг в друга, как матрёшки. Закрывать их нужно в обратном порядке: что открыли последним — закрываем первым.

<!-- Правильно -->
<p>Это <strong>очень</strong> важно</p>

<!-- Неправильно: теги перепутаны -->
<p>Это <strong>очень</p> важно</strong>

Строки вида  — это комментарии. Браузер их не показывает, они нужны для заметок в коде.

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

Каждая страница начинается с одинакового «скелета». Вы уже получали его в VS Code через ! + Tab:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет!</h1>
    <p>Это моя первая страница.</p>
</body>
</html>

Разберём по строчкам:

<!DOCTYPE html> — сообщает браузеру: «это современный HTML5». Не тег, а объявление; пишется самой первой строкой.
<html lang="ru"> — корневой элемент, в нём всё остальное. lang="ru" говорит, что страница на русском — это важно для поисковиков и программ чтения с экрана.
<head> — «голова» страницы: служебная информация, которую пользователь не видит на самой странице.
<meta charset="UTF-8"> — кодировка. Без неё русские буквы могут превратиться в «кракозябры».
<meta name="viewport" ...> — чтобы страница правильно масштабировалась на телефонах.
<title> — название во вкладке браузера и в результатах поиска.
<body> — «тело» страницы: всё, что видит пользователь.

Текстовые теги

Заголовки h1–h6

Заголовков шесть уровней: от самого главного <h1> до самого мелкого <h6>.

<h1>Рецепты</h1>
<h2>Завтраки</h2>
<h3>Омлет</h3>
<h3>Сырники</h3>
<h2>Обеды</h2>

Это как оглавление книги: h1 — название книги, h2 — главы, h3 — разделы глав.

Абзацы, переносы и линии

<p>Первый абзац. Браузер сам переносит длинные строки.</p>
<p>Второй абзац начинается с новой строки и с отступом.</p>
<p>Строка один<br>Строка два — после принудительного переноса</p>
<hr>
<p>Под горизонтальной линией.</p>

<p> — абзац;
<br> — перенос строки внутри абзаца (например, в адресе или стихах);
<hr> — горизонтальная линия, смысловой разделитель.

Важная особенность: браузер схлопывает пробелы и переносы в коде в один пробел. Сколько бы Enter вы ни нажали внутри <p>, на странице это будет одна строка.

Выделение текста

<p>Это <strong>важное</strong> слово, а это <em>акцент</em>.</p>
<p>Формула воды: H<sub>2</sub>O, площадь: 25 м<sup>2</sup>.</p>
<p>Старая цена: <s>1000 сом</s>, новая: <mark>800 сом</mark>.</p>

Тег	Смысл	Как выглядит по умолчанию
`<strong>`	Важный текст	Жирный
`<em>`	Смысловой акцент	Курсив
`<sub>` / `<sup>`	Нижний / верхний индекс	Мелко внизу / вверху
`<s>`	Неактуальный текст	Зачёркнутый
`<mark>`	Выделенный фрагмент	Жёлтый фон

Есть ещё <b> и <i> — они тоже делают текст жирным и курсивом, но без смысла «важно». Предпочитайте <strong> и <em>.

Ссылки

Ссылка создаётся тегом <a> (anchor — «якорь»):

<a href="https://developer.mozilla.org/ru/">Внешняя ссылка на MDN</a>
<a href="about.html">Страница «О нас» в той же папке</a>
<a href="pages/contacts.html">Страница в подпапке pages</a>
<a href="#contacts">Перейти к разделу с id="contacts"</a>
<a href="mailto:hello@example.com">Написать письмо</a>
<a href="tel:+996555000000">Позвонить</a>

Абсолютный путь — полный адрес с https://, ведёт на другой сайт.
Относительный путь — путь от текущего файла: about.html, pages/contacts.html, ../index.html (.. — подняться на папку выше).
Якорь #имя — переход к элементу с атрибутом id="имя" на той же странице.

Для внешних ссылок, открывающихся в новой вкладке, добавляйте rel="noopener noreferrer":

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN</a>

Картинки

<img src="images/cat.jpg" alt="Рыжий кот спит на диване" width="400">

src — путь к файлу картинки;
alt — альтернативный текст: показывается, если картинка не загрузилась, и зачитывается незрячим пользователям;
width — ширина в пикселях (высота подстроится пропорционально).

Списки

Маркированный список (unordered list) — порядок неважен:

<ul>
    <li>Молоко</li>
    <li>Хлеб</li>
    <li>Яйца</li>
</ul>

Нумерованный список (ordered list) — порядок важен:

<ol>
    <li>Установить VS Code</li>
    <li>Создать index.html</li>
    <li>Открыть в браузере</li>
</ol>

<li> (list item) — пункт списка. Внутри <ul> и <ol> напрямую могут лежать только <li>. Списки можно вкладывать — вложенный список кладётся внутрь <li>:

<ul>
    <li>Фрукты
        <ul>
            <li>Яблоко</li>
            <li>Банан</li>
        </ul>
    </li>
    <li>Овощи</li>
</ul>

Таблицы

<table>
    <thead>
        <tr>
            <th>Тег</th>
            <th>Назначение</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>p</td>
            <td>Абзац</td>
        </tr>
        <tr>
            <td>a</td>
            <td>Ссылка</td>
        </tr>
    </tbody>
</table>

<table> — сама таблица;
<thead> / <tbody> — шапка и тело;
<tr> (table row) — строка;
<th> (table header) — ячейка-заголовок, по умолчанию жирная и по центру;
<td> (table data) — обычная ячейка.

Таблицы — для табличных данных (расписание, прайс). Строить из них макет страницы не нужно — для этого есть CSS.

Блочные и строчные элементы

Элементы ведут себя по-разному:

Блочные (h1–h6, p, ul, ol, li, div, table, section...) занимают всю ширину и начинаются с новой строки — как кирпичи, которые кладут друг на друга.
Строчные (a, strong, em, span, img...) живут внутри строки текста и занимают столько места, сколько нужно содержимому — как слова в предложении.

Два универсальных тега без смысла, только для группировки:

<div>Блочный контейнер — для группировки крупных частей</div>
<p>Текст с <span>кусочком</span>, который можно отдельно оформить</p>

Семантические теги HTML5

Семантика — это смысл. В HTML5 появились теги, которые выглядят как обычный div, но говорят браузеру и поисковикам, что за часть страницы перед ними.

Тег	Что внутри
`<header>`	Шапка: логотип, меню
`<nav>`	Навигация (главное меню)
`<main>`	Основное содержимое страницы, один раз на странице
`<section>`	Тематический раздел с заголовком
`<article>`	Самостоятельный материал: статья, карточка товара, пост
`<aside>`	Побочное: боковая колонка, реклама
`<footer>`	Подвал: контакты, копирайт

Сравните:

<!-- Без семантики: непонятно, что есть что -->
<div class="top">...</div>
<div class="content">...</div>

<!-- С семантикой: структура читается сразу -->
<header>...</header>
<main>...</main>

Атрибут class здесь — это имя для элемента, по которому мы будем находить его в CSS. Подробнее — в следующем уроке.

Собираем страницу целиком

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Кофейня «Утро»</title>
</head>
<body>
    <header>
        <h1>Кофейня «Утро»</h1>
        <nav>
            <a href="#menu">Меню</a>
            <a href="#contacts">Контакты</a>
        </nav>
    </header>

    <main>
        <section id="menu">
            <h2>Меню</h2>
            <ul>
                <li>Американо — <strong>150 сом</strong></li>
                <li>Капучино — <strong>200 сом</strong></li>
            </ul>
        </section>

        <section id="contacts">
            <h2>Контакты</h2>
            <p>Адрес: ул. Примерная, 1<br>Телефон: <a href="tel:+996555000000">+996 555 000 000</a></p>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Кофейня «Утро»</p>
    </footer>
</body>
</html>

Что здесь происходит:

header содержит главный заголовок и nav с двумя ссылками-якорями;
ссылки #menu и #contacts прокручивают страницу к секциям с такими id;
в main две смысловые секции, у каждой свой h2;

Страница пока выглядит скромно — оформлять её будем с помощью CSS.

Типичные ошибки

Забыли закрыть тег — дальше весь текст становится, например, жирным или ссылкой.
Перепутали вложенность — <p><strong>текст</p></strong>.
Ошибка в пути — src="Images/Cat.JPG" вместо images/cat.jpg; пути чувствительны к регистру на сервере.
Контент в <head> — заголовки и абзацы должны быть в <body>.
Блок в абзаце — <p><div>...</div></p> так писать нельзя: внутри <p> только строчные элементы.

Проверить разметку можно в DevTools (вкладка Elements) — браузер покажет, как он на самом деле понял ваш код. Справочник по всем тегам — MDN: HTML elements.

Практика

Визитка. Создайте index.html с h1 (ваше имя), абзацем о себе с одним словом в <strong> и одним в <em>. Результат: страница с заголовком и текстом, вкладка браузера называется вашим именем.
Список дел. Добавьте нумерованный список из 5 шагов «Как сварить чай» и маркированный список покупок с одним вложенным подсписком. Результат: два правильно оформленных списка, вложенный — с отступом.
Таблица. Сделайте таблицу «Расписание недели» с шапкой thead и тремя строками. Результат: таблица с жирной шапкой (рамок пока нет — это нормально).
Многостраничный сайт. Создайте about.html и свяжите его с index.html ссылками в обе стороны. Добавьте картинку с правильным alt. Результат: по ссылкам можно ходить туда-обратно, картинка отображается.
Семантическая страница. Сверстайте страницу любимого кафе или магазина по примеру выше: header с nav, main с тремя section, footer. Результат: ссылки меню прокручивают к нужным секциям.

Итоги

HTML описывает структуру страницы с помощью тегов; элемент = открывающий тег + содержимое + закрывающий тег.
Атрибуты (href, src, alt, id, class) настраивают теги.
Скелет страницы: <!DOCTYPE html>, html, head (настройки), body (содержимое).
Заголовки выбирают по смыслу, а не по размеру; alt у картинок обязателен.
Блочные элементы идут друг под другом, строчные — внутри строки.
Семантические теги HTML5 (header, nav, main, section, article, footer) делают разметку понятной людям и поисковикам.