🌐 HTML

Полный справочник: структура страницы, метаданные и SEO, текст, ссылки, медиа, списки и таблицы, формы и валидация, семантика, доступность, атрибуты, Open Graph и лучшие практики.

Шпаргалки · Данные · #html #html5 #web #markup #accessibility

Каркас страницы

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Заголовок страницы (до ~60 символов)</title>
  <meta name="description" content="Краткое описание для поиска (до ~160 символов)">
  <link rel="canonical" href="https://example.com/page">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/app.js" defer></script>
</head>
<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>
</html>

<!DOCTYPE html> включает стандартный режим. lang нужен для скринридеров и переводчиков. Скрипты ставьте с defer (после разбора HTML) или type="module"; async грузит независимо.

Метаданные для соцсетей и поиска

<meta property="og:title" content="Название">
<meta property="og:description" content="Описание">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="robots" content="index, follow">          <!-- noindex, nofollow для закрытых страниц -->
<meta name="theme-color" content="#7c3aed">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"…"}</script>

Предзагрузка: <link rel="preload" href="/font.woff2" as="font" crossorigin>, <link rel="preconnect" href="https://cdn.example.com">, <link rel="prefetch">.

Текст и структура

<h1>Один главный заголовок</h1>   <h2>…</h2>  …  <h6>…</h6>
<p>Абзац с <strong>важным</strong>, <em>акцентом</em>, <mark>выделением</mark>, <code>кодом</code>, <kbd>Ctrl</kbd>, <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<br>  <hr>  <wbr>                         <!-- перенос строки, линия, возможный перенос слова -->
<blockquote cite="…"><p>Цитата</p></blockquote>   <q>короткая</q>   <cite>Источник</cite>
<pre><code>форматированный
код</code></pre>
<sub>2</sub>  <sup>2</sup>  <del>старое</del>  <ins>новое</ins>  <s>неактуально</s>  <small>мелко</small>
<time datetime="2026-05-01T10:00">1 мая</time>   <address>Контакты</address>   <data value="42">сорок два</data>
<span>строчный контейнер</span>   <div>блочный контейнер</div>

Заголовки образуют иерархию без пропусков уровней. strong и em несут смысл, b и i только оформление.

Ссылки

<a href="https://example.com">Внешняя</a>
<a href="/about">Внутренняя</a>   <a href="page.html#section">Раздел</a>   <a href="#top">Вверх</a>
<a href="https://x.com" target="_blank" rel="noopener noreferrer">Новое окно</a>
<a href="mailto:a@x.ru?subject=Тема">Почта</a>   <a href="tel:+79991234567">Позвонить</a>
<a href="/file.pdf" download="report.pdf">Скачать</a>
<a href="https://x.com" rel="nofollow ugc sponsored">Для поисковиков</a>

Текст ссылки должен быть понятен без контекста («Скачать отчёт», а не «здесь»).

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

<img src="cat.jpg" alt="Рыжий кот на подоконнике" width="800" height="600" loading="lazy" decoding="async">
<picture>
  <source srcset="cat.avif" type="image/avif">
  <source srcset="cat.webp" type="image/webp">
  <img src="cat.jpg" alt="Кот">
</picture>
<img srcset="s.jpg 480w, m.jpg 800w, l.jpg 1600w" sizes="(max-width: 600px) 100vw, 800px" src="m.jpg" alt="…">
<figure><img src="chart.png" alt="График продаж"><figcaption>Продажи за 2026</figcaption></figure>
<video src="v.mp4" controls poster="p.jpg" preload="metadata" playsinline muted loop></video>
<audio src="a.mp3" controls></audio>
<iframe src="https://www.youtube.com/embed/ID" title="Видео" loading="lazy" allowfullscreen></iframe>
<svg width="24" height="24" aria-hidden="true">…</svg>      <canvas id="c" width="300" height="150"></canvas>

alt обязателен: для декоративных картинок alt="". Указывайте width и height, чтобы страница не «прыгала» при загрузке.

Списки

<ul><li>маркированный</li></ul>
<ol start="3" reversed type="a"><li>нумерованный</li></ol>
<dl><dt>Термин</dt><dd>Определение</dd></dl>
<menu><li><button>Действие</button></li></menu>

Таблицы

<table>
  <caption>Продажи по кварталам</caption>
  <colgroup><col><col span="2"></colgroup>
  <thead><tr><th scope="col">Товар</th><th scope="col">Цена</th></tr></thead>
  <tbody>
    <tr><th scope="row">Чай</th><td>100 ₽</td></tr>
    <tr><td colspan="2">Ячейка на две колонки</td></tr>
  </tbody>
  <tfoot><tr><td>Итого</td><td>100 ₽</td></tr></tfoot>
</table>

Таблицы только для табличных данных, не для вёрстки. scope, caption и th нужны скринридерам.

Формы

<form action="/send" method="post" enctype="multipart/form-data" autocomplete="on" novalidate>
  <fieldset>
    <legend>Контакты</legend>
    <label for="email">Почта</label>
    <input id="email" name="email" type="email" required autocomplete="email" placeholder="a@x.ru">

    <label>Пароль <input type="password" name="pw" minlength="8" maxlength="64" required autocomplete="new-password"></label>
    <label>Возраст <input type="number" name="age" min="18" max="99" step="1"></label>
    <label>Телефон <input type="tel" name="tel" pattern="\+7\d{10}" inputmode="tel"></label>
    <label>Сайт <input type="url" name="site"></label>
    <input type="date" name="d"> <input type="time"> <input type="datetime-local"> <input type="month"> <input type="week">
    <input type="range" min="0" max="100"> <input type="color"> <input type="search"> <input type="file" accept="image/*" multiple>
    <input type="checkbox" name="agree" id="agree" required><label for="agree">Согласен</label>
    <input type="radio" name="plan" value="free" checked> <input type="radio" name="plan" value="pro">
    <input type="hidden" name="csrf" value="token">

    <select name="city" required>
      <option value="">Выберите…</option>
      <optgroup label="Россия"><option value="msk" selected>Москва</option></optgroup>
    </select>
    <textarea name="msg" rows="4" cols="40" maxlength="500"></textarea>

    <input list="langs" name="lang"><datalist id="langs"><option value="HTML"><option value="CSS"></datalist>
    <progress value="40" max="100"></progress> <meter value="0.6">60%</meter> <output name="r"></output>
  </fieldset>
  <button type="submit">Отправить</button> <button type="reset">Сброс</button> <button type="button">Просто кнопка</button>
</form>

Атрибут	Смысл
`required`, `disabled`, `readonly`	обязательность, отключено, только чтение
`min`, `max`, `step`, `minlength`, `maxlength`, `pattern`	встроенная валидация
`autocomplete`, `autofocus`, `placeholder`	подсказки и автозаполнение
`name`	ключ при отправке (без него поле не уйдёт)
`form`, `formaction`, `formmethod`	привязка кнопки к форме или переопределение
`inputmode`, `enterkeyhint`	клавиатура на мобильных

Правильная пара label for и id. method="get" для поиска (данные в URL), post для изменений. Проверка в браузере (:invalid, :user-invalid) дополняет, но не заменяет серверную валидацию.

Семантические элементы

Тег	Роль
`<header>`, `<footer>`	шапка / подвал страницы или раздела
`<nav>`	основная навигация
`<main>`	основное содержимое (один на странице)
`<section>`	тематический раздел с заголовком
`<article>`	самостоятельный материал (статья, пост, карточка)
`<aside>`	вспомогательное: сайдбар, врезка
`<figure>` + `<figcaption>`	иллюстрация с подписью
`<details>` + `<summary>`	раскрывающийся блок без JavaScript
`<dialog>`	модальное окно (`showModal()`)
`<search>`	область поиска
`<template>`, `<slot>`	шаблоны и веб-компоненты
`<menu>`, `<hgroup>`, `<mark>`, `<time>`	дополнительная семантика

Универсальные атрибуты

id (уникален), class, style, title, lang, dir, hidden, tabindex, contenteditable, draggable, spellcheck, translate="no", inert, popover, data-* (свои данные, доступны через el.dataset), aria-*, role.

Семантические теги вместо div-ов с onclick: кнопка это <button>, ссылка это <a href>.
alt у картинок, label у полей, lang у страницы, понятный порядок заголовков.
Контраст текста не ниже 4.5:1, видимый фокус (:focus-visible), управление с клавиатуры (Tab, Enter, Space, Esc).
ARIA нужен, когда нативных средств не хватает: aria-label, aria-labelledby, aria-describedby, aria-expanded, aria-live="polite", role="alert". Первое правило ARIA: не используйте ARIA, если можно обойтись нативным элементом.
Ссылка «Перейти к содержимому» в начале страницы, prefers-reduced-motion для анимации.

Безопасность и производительность

Внешние ссылки с target="_blank" дополняйте rel="noopener noreferrer".
Не подставляйте пользовательский текст в разметку без экранирования (XSS): textContent, шаблонизаторы с автоэкранированием, Content-Security-Policy.
<iframe sandbox> для чужого содержимого, integrity (SRI) для подключаемых скриптов и стилей с CDN.
Скорость: сжатые изображения (AVIF, WebP), loading="lazy", width/height, шрифты font-display: swap, минимум блокирующих скриптов, fetchpriority="high" для главной картинки.

Валидация и инструменты

Проверка разметки: validator.w3.org (Nu Html Checker), Lighthouse и axe DevTools (доступность и производительность), WAVE, HTMLHint. Редакторы: Emmet (ul>li*3 → Tab), VS Code, WebStorm.

Частые ошибки

Несколько <h1> без смысла, пропущенные уровни заголовков, div вместо кнопки, нет alt и label, вложение интерактивных элементов (<a> в <button>), повторяющиеся id, таблицы для вёрстки, <br> вместо отступов, отсутствие viewport (страница не адаптивна на телефоне), не закрыты теги.