HTML Wiki — современный справочник по HTML

Что такое HTML

HTML — это язык гипертекстовой разметки, который описывает структуру веб-страницы. Он не является языком программирования в классическом смысле: HTML не выполняет логику, не считает данные и не управляет условиями. Его задача — сказать браузеру, какие элементы находятся на странице: заголовки, абзацы, списки, изображения, формы, таблицы и смысловые блоки.

HTML работает вместе с CSS и JavaScript. HTML отвечает за структуру, CSS — за внешний вид, JavaScript — за интерактивность.

HTML

Скелет страницы

Определяет, какие блоки, тексты, ссылки и формы есть на странице.

CSS

Визуальный стиль

Отвечает за цвета, сетку, отступы, шрифты, адаптивность и анимации.

JavaScript

Поведение

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

Главная мысль: хороший HTML — это не просто набор тегов, а понятная, логичная и доступная структура страницы.

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

Любая современная HTML-страница начинается с объявления типа документа и содержит два главных раздела: head и body.

<!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>Шапка сайта</header>
  <main>Основной контент</main>
  <footer>Подвал сайта</footer>
</body>
</html>

Элемент	Зачем нужен	Пример
<!DOCTYPE html>	Сообщает браузеру, что используется современный HTML5.	Всегда ставится первой строкой.
<html lang="ru">	Корневой элемент документа и язык страницы.	Помогает браузерам, поисковикам и скринридерам.
<head>	Служебная информация: кодировка, title, meta, CSS.	Не отображается как основной контент.
<body>	Видимая часть страницы.	Внутри находятся тексты, изображения, формы.

Для русскоязычных сайтов почти всегда указывайте <meta charset="UTF-8">, чтобы не получить «????????????» вместо нормального текста.

Head, meta и подключение файлов

Раздел head содержит техническую информацию о странице. Он влияет на отображение вкладки браузера, адаптивность, SEO, предпросмотр ссылки в мессенджерах и подключение внешних ресурсов.

Базовый набор для современного сайта

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Краткое описание страницы для поисковых систем.">
  <title>Название страницы</title>

  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
</head>

Подключение CSS

Внешний файл стилей подключается через link. Это правильнее, чем держать весь CSS в HTML, если проект большой.

<link rel="stylesheet" href="style.css">

Подключение JavaScript

Атрибут defer говорит браузеру загрузить скрипт без блокировки HTML и выполнить его после разбора страницы.

<script src="app.js" defer></script>

Meta	Назначение
charset	Кодировка документа. Для современных сайтов используйте UTF-8.
viewport	Нужен для корректного отображения на мобильных устройствах.
description	Краткое описание страницы для поисковой выдачи и сниппетов.
robots	Инструкции поисковым роботам: индексировать страницу или нет.

Текст, заголовки и форматирование

Текстовая структура страницы должна быть иерархичной. На странице обычно один главный заголовок h1, затем подзаголовки h2, h3 и ниже.

<h1>HTML: полный справочник</h1>
<p>HTML помогает описывать структуру веб-страницы.</p>

<h2>Основы</h2>
<p>Каждый элемент состоит из тега, содержимого и иногда атрибутов.</p>

<strong>Важный текст</strong>
<em>Смысловое выделение</em>
<mark>Подсветка</mark>
<small>Мелкий комментарий</small>

Тег	Что означает	Когда использовать
h1-h6	Заголовки разных уровней	Для структуры документа, а не просто для размера текста.
p	Абзац	Для обычных текстовых блоков.
strong	Важное смысловое выделение	Когда текст действительно важен.
em	Акцент	Когда нужно изменить интонацию или подчеркнуть мысль.
blockquote	Цитата	Для длинных цитат.
code	Фрагмент кода	Для команд, тегов и коротких примеров кода.

Не выбирайте h1 только потому, что он большой. Размер текста должен настраиваться через CSS, а заголовки должны отражать структуру документа.

Семантическая верстка

Семантические теги помогают описать смысл блока. Это полезно для поисковых систем, скринридеров, поддержки проекта и командной разработки.

<header>

Верхняя часть страницы или раздела: логотип, меню, вступление.

<nav>

Навигация по сайту или странице.

<main>

Основной уникальный контент страницы. Обычно один на странице.

<section>

Смысловой раздел с собственной темой и заголовком.

<article>

Самостоятельный материал: статья, карточка новости, пост, отзыв.

<aside>

Дополнительный контент: боковое меню, примечания, реклама.

<footer>

Нижняя часть страницы или раздела: контакты, копирайт, ссылки.

<figure>

Иллюстрация, схема или пример вместе с подписью.

<time>

Дата или время в машинно-читаемом формате.

Пример семантической страницы

<body>
  <header>
    <a href="/">Логотип</a>
    <nav aria-label="Главное меню">
      <a href="/articles">Статьи</a>
      <a href="/contacts">Контакты</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Как работает HTML</h1>
      <p>HTML описывает структуру документа.</p>
    </article>
  </main>

  <footer>© 2026 HTML Wiki</footer>
</body>

Шапка сайта
Логотип + навигация

Основной контент

Здесь находится статья, справочник, карточки, формы и другие важные блоки.

Ссылки и навигация

Ссылки создаются тегом a. Они могут вести на другую страницу, внешний сайт, файл, email, телефон или конкретный раздел текущей страницы.

<a href="https://example.com">Внешняя ссылка</a>
<a href="/about.html">Внутренняя страница</a>
<a href="#forms">Перейти к формам</a>
<a href="mailto:hello@example.com">Написать на почту</a>
<a href="tel:+79990000000">Позвонить</a>

Безопасная внешняя ссылка

Если ссылка открывается в новой вкладке, добавляйте rel="noopener noreferrer".

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть сайт
</a>

Текст ссылки должен быть понятным сам по себе. Плохо: «нажмите здесь». Хорошо: «Скачать HTML-чек-лист».

Изображения и медиа

Изображения подключаются через тег img. Самый важный атрибут — alt. Он описывает изображение для людей, которые не видят картинку, и помогает при ошибке загрузки.

<img src="images/html-structure.png" alt="Схема структуры HTML-документа" width="800" height="450" loading="lazy">

Атрибут	Зачем нужен
src	Путь к изображению.
alt	Текстовое описание изображения.
width / height	Помогают браузеру заранее зарезервировать место и снизить скачки макета.
loading="lazy"	Ленивая загрузка изображения, если оно находится ниже первого экрана.

Адаптивные изображения через picture

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Рабочее место веб-разработчика">
</picture>

Видео и аудио

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

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

Списки

Списки помогают структурировать однотипную информацию: пункты меню, инструкции, наборы характеристик, этапы процесса.

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

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

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

<ol>
  <li>Создать файл</li>
  <li>Добавить HTML</li>
  <li>Открыть в браузере</li>
</ol>

Список определений

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки.</dd>
</dl>

Для меню сайта обычно используют nav + ul + li + a.

Таблицы

Таблицы нужны для табличных данных: расписаний, тарифов, сравнений, отчетов. Не используйте таблицы для построения сетки сайта — для этого есть CSS Grid и Flexbox.

<table>
  <caption>Сравнение HTML-тегов</caption>
  <thead>
    <tr>
      <th scope="col">Тег</th>
      <th scope="col">Назначение</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&lt;article&gt;</td>
      <td>Самостоятельный материал</td>
    </tr>
  </tbody>
</table>

Пример простой справочной таблицы
Тег	Смысл	Примечание
table	Контейнер таблицы	Внутри находятся строки и ячейки.
thead	Шапка таблицы	Содержит заголовки колонок.
tbody	Основное тело	Содержит главные данные.
th	Заголовочная ячейка	Желательно указывать scope.
td	Обычная ячейка	Используется для данных.

Формы

Формы позволяют пользователю вводить данные: имя, email, пароль, комментарий, дату, файл, выбор из списка. Качественная форма — это не только поля, но и понятные подписи, валидация, доступность и корректные типы input.

Базовая форма

<form action="/send" method="post">
  <label for="name">Имя</label>
  <input id="name" name="name" type="text" autocomplete="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="message">Сообщение</label>
  <textarea id="message" name="message" rows="5"></textarea>

  <button type="submit">Отправить</button>
</form>

Тип	Для чего	Пример
text	Обычный текст	Имя, город, должность
email	Email с базовой проверкой	user@example.com
password	Пароль	Скрывает вводимые символы
number	Число	Возраст, количество
tel	Телефон	Удобная клавиатура на смартфоне
date	Дата	Дата рождения, дедлайн
checkbox	Несколько вариантов или согласие	Согласие на обработку данных
radio	Один вариант из группы	Способ доставки
file	Загрузка файла	Аватар, документ

Правильные label

Каждое поле формы должно иметь подпись. Это повышает удобство, доступность и кликабельность.

<label for="agree">
  <input id="agree" name="agree" type="checkbox" required>
  Я согласен с правилами
</label>

Ошибка: использовать placeholder вместо label. Placeholder исчезает при вводе и не заменяет полноценную подпись поля.

Атрибуты HTML

Атрибуты добавляют элементам настройки, идентификаторы, ссылки, подсказки, классы, доступность и данные для JavaScript.

Атрибут	Назначение	Пример
class	Класс для CSS и JS	class="card active"
id	Уникальный идентификатор	id="contacts"
title	Дополнительная подсказка	title="Подробнее"
hidden	Скрывает элемент	hidden
data-*	Пользовательские данные для JS	data-id="42"
aria-*	Доступность	aria-label="Закрыть"

Class и id

<section id="pricing" class="section section-pricing">
  <h2>Тарифы</h2>
</section>

id должен быть уникальным на странице. class можно использовать много раз.

Доступность: чтобы сайтом могли пользоваться все

Доступность — это подход, при котором сайт удобен не только для людей с идеальным зрением и мышкой, но и для пользователей скринридеров, клавиатуры, мобильных устройств и разных условий восприятия.

Используйте правильную иерархию заголовков: один h1, затем логичные h2, h3.
Добавляйте осмысленный alt для важных изображений.
Связывайте label с каждым полем формы.
Не делайте кнопку через div. Для действия используйте button, для перехода — a.
Проверяйте сайт с клавиатуры: Tab, Enter, Esc.
Не передавайте смысл только цветом. Добавляйте текст, иконку или подпись.

Примеры ARIA

<button aria-label="Закрыть окно">×</button>

<nav aria-label="Хлебные крошки">
  <a href="/">Главная</a>
  <a href="/html">HTML</a>
</nav>

ARIA не заменяет правильный HTML. Сначала выбирайте правильный тег, и только потом добавляйте ARIA, если без нее нельзя.

SEO и предпросмотр ссылок

HTML сильно влияет на то, как страницу понимают поисковые системы и как ссылка выглядит в Telegram, VK, Facebook, Slack и других сервисах.

Минимальный SEO-блок

<title>HTML Wiki — полный справочник по HTML</title>
<meta name="description" content="Подробное руководство по HTML: структура, теги, формы, таблицы, доступность и SEO.">
<link rel="canonical" href="https://example.com/html-wiki">

Open Graph

<meta property="og:type" content="article">
<meta property="og:title" content="HTML Wiki — полный справочник">
<meta property="og:description" content="Изучите HTML на практических примерах.">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/html-wiki">

Что важно для SEO в HTML

Уникальный title для каждой страницы.
Понятный description, который объясняет ценность страницы.
Логичная структура заголовков.
Семантические теги: article, section, nav, main.
Описание изображений через alt.
Чистые ссылки и понятные якоря.

Адаптивность и мобильные устройства

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<img src="photo.jpg" alt="Описание" style="max-width: 100%; height: auto;">

Что делать

Использовать viewport.
Писать короткие понятные заголовки.
Делать кликабельные зоны достаточно крупными.
Проверять формы на смартфоне.

Чего избегать

Фиксированной ширины 1200px для всего сайта.
Таблиц для сетки страницы.
Мелких ссылок рядом друг с другом.
Изображений без ограничения ширины.

HTML-сущности и спецсимволы

Некоторые символы в HTML имеют особое значение. Например, если написать знак меньше напрямую, браузер может принять его за начало тега. Для таких случаев используют HTML-сущности.

Символ	Сущность	Когда нужна
<	<	Показать открывающую угловую скобку.
>	>	Показать закрывающую угловую скобку.
&	&	Показать амперсанд.
©	©	Знак копирайта.
—	—	Длинное тире.
неразрывный пробел		Не дает словам разорваться на разные строки.

<p>Чтобы показать тег, напишите: &lt;h1&gt;Заголовок&lt;/h1&gt;</p>

Лучшие практики HTML

Пишите валидный HTML: закрывайте теги, не вкладывайте блочные элементы туда, где они не должны быть.
Используйте семантические теги вместо бесконечных div.
Держите структуру простой: один экран — одна понятная задача.
Не используйте HTML для оформления. Внешний вид — задача CSS.
Не используйте устаревшие теги вроде font, center, marquee.
Добавляйте понятные имена классов: article-card, main-nav, contact-form.
Пишите понятные alt-тексты для изображений, которые несут смысл.
Проверяйте страницу на мобильном экране.
Не забывайте про lang="ru" и charset="UTF-8".
Разделяйте структуру, стили и поведение в больших проектах.

Идеальная логика HTML-блока

<article class="article-card">
  <img src="html-basics.jpg" alt="Схема базовой структуры HTML" loading="lazy">
  <h2>Основы HTML</h2>
  <p>Краткое описание материала.</p>
  <a href="/html-basics">Читать статью</a>
</article>

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

Ошибка	Почему плохо	Как правильно
Нет meta charset	Русский текст может отображаться криво.	Добавить <meta charset="UTF-8">.
Много h1 без смысла	Ломается структура документа.	Один главный h1 и логичные h2/h3.
Кнопка сделана через div	Плохо для клавиатуры и доступности.	Использовать button.
Ссылка без понятного текста	Непонятно, куда ведет переход.	Писать конкретно: «Скачать руководство».
Изображение без alt	Проблемы с доступностью и SEO.	Добавить описание изображения.
Таблицы для верстки	Сложно поддерживать и адаптировать.	Использовать CSS Grid/Flexbox.
Весь стиль в HTML	Код становится грязным и сложным.	Выносить оформление в 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>
    <nav aria-label="Главное меню">
      <a href="#features">Преимущества</a>
      <a href="#pricing">Цены</a>
      <a href="#contacts">Контакты</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Название продукта</h1>
      <p>Короткое объяснение ценности продукта.</p>
      <a href="#contacts">Оставить заявку</a>
    </section>

    <section id="features">
      <h2>Преимущества</h2>
      <article><h3>Быстро</h3><p>Описание.</p></article>
      <article><h3>Удобно</h3><p>Описание.</p></article>
    </section>
  </main>

  <footer id="contacts">
    <p>Email: hello@example.com</p>
  </footer>
</body>
</html>

Шаблон статьи

<article>
  <header>
    <p><time datetime="2026-05-14">14 мая 2026</time></p>
    <h1>Заголовок статьи</h1>
    <p>Краткое вступление, которое объясняет пользу материала.</p>
  </header>

  <section>
    <h2>Первый раздел</h2>
    <p>Текст статьи.</p>
  </section>

  <footer>
    <p>Автор: HTML Wiki</p>
  </footer>
</article>

Шаблон карточки товара

<article class="product-card">
  <img src="keyboard.jpg" alt="Механическая клавиатура KeyPro X1" loading="lazy">
  <h2>KeyPro X1</h2>
  <p>Компактная механическая клавиатура для работы и программирования.</p>
  <p><strong>7 990 ₽</strong></p>
  <button type="button">Добавить в корзину</button>
</article>

Практика: что сделать руками

HTML лучше всего изучается через практику. Ниже — набор заданий от простого к более сложному.

Уровень 1

Личная страница

Создайте страницу о себе: заголовок, фото, список навыков, ссылки на соцсети, блок контактов.

Уровень 2

Страница статьи

Сделайте статью с заголовками, датой публикации, картинкой, цитатой, списком и блоком автора.

Уровень 3

Форма заявки

Соберите форму: имя, телефон, email, тема обращения, комментарий, согласие с правилами и кнопка отправки.

Уровень 4

Мини-wiki

Создайте страницу-справочник с боковым меню, несколькими разделами, таблицей и примерами кода.

Чек-лист проверки своей страницы

Страница начинается с <!DOCTYPE html>.
Указаны lang="ru" и charset="UTF-8".
Есть title и description.
Есть один понятный h1.
Все картинки имеют alt.
Формы имеют label.
Ссылки имеют понятный текст.
Страница нормально открывается на телефоне.

Глоссарий

Термин	Объяснение
Тег	Команда разметки в угловых скобках: <p>, <h1>, <img>.
Элемент	Тег вместе с содержимым и закрывающим тегом, если он нужен.
Атрибут	Дополнительная настройка элемента: href, src, class.
DOM	Дерево объектов страницы, которое браузер строит из HTML.
Семантика	Смысловая разметка: использование тегов по назначению.
Валидация	Проверка кода на соответствие правилам HTML.
Доступность	Подход, при котором сайтом удобно пользоваться людям с разными возможностями и устройствами.
Viewport	Видимая область страницы на экране устройства.
SEO	Оптимизация страницы для поисковых систем.
Open Graph	Мета-теги для красивого предпросмотра ссылки в соцсетях и мессенджерах.

Итог

HTML — это фундамент веб-разработки. Чтобы писать качественные страницы, важно не просто помнить теги, а понимать смысл структуры: что является заголовком, что является навигацией, где основной контент, как описать форму, как сделать страницу доступной и понятной для браузера, поисковика и человека.

Правильный HTML = понятная структура + семантика + доступность + аккуратные атрибуты + чистый код.

Начать со структуры Изучить семантику Разобрать формы Перейти к практике