HTML — основа любой веб‑страницы. В этой статье разберём ключевые теги,
которые понадобятся для создания структуры сайта. Приведём примеры кода
и объясним, как правильно их использовать.

Что такое HTML и зачем нужны теги

HTML (HyperText Markup Language) — язык разметки, который задаёт структуру веб‑страницы.
Теги — это команды в угловых скобках (<...>), которые указывают браузеру,
как отображать контент.

Основные задачи тегов:

  • разметка заголовков и текста;
  • вставка изображений и мультимедиа;
  • создание ссылок и форм;
  • структурирование страницы (шапка, подвал, разделы).

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

Любой HTML‑файл начинается с объявления типа документа и включает обязательные теги: 

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
    <!-- Контент страницы -->
  </body>
</html>

Пояснения:

  • <!DOCTYPE html> — объявление стандарта HTML5;
  • <html> — корневой элемент, атрибут lang задаёт язык;
  • <head> — метаданные (кодировка, заголовок, стили);
  • <meta charset="UTF-8"> — кодировка символов;
  • <title> — заголовок вкладки браузера;
  • <body> — видимый контент страницы.

Теги для работы с текстом

1. Заголовки

Используются для структурирования контента. Есть 6 уровней: 

<h1>Главный заголовок</h1>\n<h2>Подзаголовок</h2>\n...\n<h6>Мелкий подзаголовок</h6>

Важно: <h1> должен быть один на странице.

2. Параграфы и переносы

<p>Абзац текста.</p>\n<br> — перенос строки внутри абзаца

3. Форматирование текста

  • <b> — жирное начертание (без семантики);
  • <strong> — важное выделение (семантически значимо);
  • <i> — курсив (без семантики);
  • <em> — акцент (семантически значимо);
  • <u> — подчёркнутый текст;
  • <s> — зачёркнутый текст.

4. Списки

Маркированный список: 

<ul>\n    <li>Пункт 1</li>\n    <li>Пункт 2</li>\n</ul>

Нумерованный список: 

<ol>\n    <li>Первый пункт</li>\n    <li>Второй пункт</li>\n</ol>

Теги для вставки мультимедиа

1. Изображения

<img src="image.jpg" alt="Описание изображения" width="300" height="200">

Обязательные атрибуты:

  • src — путь к файлу;
  • alt — текстовое описание (важно для доступности и SEO).

2. Видео

<video controls>\n    <source src="video.mp4" type="video/mp4">\n    Ваш браузер не поддерживает видео.\n</video>

Атрибут controls добавляет панель управления.

3. Аудио

<audio controls>\n    <source src="audio.mp3" type="audio/mpeg">\n    Ваш браузер не поддерживает аудио.\n</audio>

Теги для ссылок и навигации

<a href="https://example.com" target="_blank" rel="noopener">Ссылка</a>

Ключевые атрибуты:

  • href — URL-адрес;
  • target="_blank" — открытие в новой вкладке;
  • rel="noopener" — безопасность при target="_blank".

Пример якорной ссылки (переход внутри страницы): 

<a href="#section1">Перейти к разделу</a>\n\n<section id="section1">...</section>

Теги для структурирования страницы

  • <header> — шапка сайта;
  • <nav> — навигационное меню;
  • <main> — основное содержимое;
  • <section> — логический раздел;
  • <article> — самостоятельный контент (статья, пост);
  • <aside> — побочный контент (боковая панель);
  • <footer> — подвал страницы (контакты, копирайт).

Теги для создания форм

Формы позволяют собирать данные от пользователей. Основные теги:

1. Контейнер формы

<form action="/submit" method="POST">\n    ... поля формы ...\n</form>
  • action — URL для отправки данных;
  • method — метод отправки (GET или POST).

2. Многострочное поле

<textarea name="message" rows="4" cols="50">Ваш отзыв...</textarea>

3. Выпадающий список

<select name="country">\n    <option value="ru">Россия</option>\n    <option value="us">США</option>\n</select>

4. Кнопки

<button type="submit">Отправить</button>\n<button type="reset">Очистить</button>

5. Метки (подписи к полям)

<label for="username">Имя:</label>\n<input type="text" id="username" name="username">

Дополнительные полезные теги

1. Горизонтальная линия

<hr>

Создаёт разделитель между блоками.

2. Цитата

<blockquote cite="https://example.com">\n    Текст цитаты.\n</blockquote>

3. Код

<code>console.log('Hello');</code>

Для отображения фрагментов кода.

4. Предформатированный текст

<pre>\n    Сохраняет пробелы и переносы строк.\n</pre>

5. Аббревиатура

<abbr title="HyperText Markup Language">HTML</abbr>

При наведении показывает полное название.

Правила корректного использования тегов

  1. Соблюдайте иерархию.

    Например, <h1> должен быть выше <h2>, а списки — только внутри <ul>/<ol>.

  2. Закрывайте теги.

    Исключения: <img>, <br>, <hr>, <input>.

  3. Используйте семантику.

    Выбирайте теги по смыслу: <button> для кнопок, <a> для ссылок.

  4. Заполняйте атрибуты alt и title.

    Это важно для доступности и SEO.

  5. Избегайте избыточности.

    Не вставляйте лишние <div> без необходимости.

Заключение

Знание базовых HTML‑тегов — фундамент веб‑разработки. Начните с практики:

  • создайте простую страницу с заголовком, текстом и изображением;
  • добавьте навигацию и форму обратной связи;
  • экспериментируйте с семантическими тегами;

Чем чаще вы пишете HTML, тем быстрее запомните теги и их атрибуты. Успехов в изучении!