HTML
Шпаргалка по HTML: структура документа, теги, ссылки, списки, таблицы, формы, семантика HTML5, мультимедиа, сущности, мета-теги и доступность.
HTML (HyperText Markup Language) — язык разметки, на котором строятся все веб-страницы. Он описывает структуру и смысл содержимого: заголовки, абзацы, ссылки, изображения, формы. Эта шпаргалка собирает основные теги и приёмы современного HTML5 с готовыми примерами.
Структура документа
Любая страница начинается с объявления <!DOCTYPE html> — оно включает стандартный режим браузера. Далее идёт корневой элемент <html> с атрибутом lang, внутри которого расположены служебная шапка <head> и видимое тело <body>.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Заголовок вкладки</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Первый абзац страницы.</p>
</body>
</html><head> содержит мета-данные: кодировку, заголовок вкладки, подключение стилей и скриптов. <body> — всё, что видит пользователь. Тег <meta charset="UTF-8"> обязателен, иначе кириллица может отображаться кракозябрами.
Заголовки и текст
Заголовки задаются тегами от <h1> (самый важный) до <h6>. На странице должен быть один <h1>, а вложенность уровней — последовательной. Абзацы оборачивают в <p>.
<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>
<p>Обычный абзац текста. Перенос строки:<br>новая строка.</p>
<p>Текст бывает <strong>важным</strong> и <em>выделенным интонацией</em>.</p>
<hr>
<blockquote>Цитата из источника.</blockquote>
<p>Код внутри текста: <code>console.log()</code>.</p><strong> придаёт смысловую важность (жирный), <em> — акцент (курсив). <br> — перенос строки, <hr> — тематический разделитель. Это семантические теги: предпочитайте их чисто визуальным <b> и <i>.
Ссылки и изображения
Ссылку создаёт тег <a> с атрибутом href. Картинку — <img> с обязательными src (путь) и alt (текстовое описание).
<a href="https://codechick.io">Перейти на сайт</a>
<a href="https://example.com" target="_blank" rel="noopener">
Открыть в новой вкладке
</a>
<a href="#section">Якорь на странице</a>
<a href="mailto:[email protected]">Написать письмо</a>
<img src="/cat.png" alt="Рыжий кот спит на клавиатуре" width="320">Атрибут target="_blank" открывает ссылку в новой вкладке; добавляйте к нему rel="noopener" для безопасности. alt у изображения важен для доступности и SEO — он показывается, если картинка не загрузилась, и читается скринридерами.
Списки
Маркированный список — <ul>, нумерованный — <ol>, элементы внутри — <li>. Списки можно вкладывать друг в друга. Есть и список определений <dl>.
<ul>
<li>Первый пункт</li>
<li>Второй пункт
<ul>
<li>Вложенный пункт</li>
</ul>
</li>
</ul>
<ol>
<li>Шаг один</li>
<li>Шаг два</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Язык разметки страниц.</dd>
</dl>Таблицы
Таблица — тег <table>. Шапка оформляется в <thead>, тело — в <tbody>. Строка — <tr>, ячейка-заголовок — <th>, обычная ячейка — <td>. Объединять ячейки помогают colspan и rowspan.
<table>
<thead>
<tr>
<th>Язык</th>
<th>Год</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td>1991</td>
</tr>
<tr>
<td colspan="2">Объединённая ячейка</td>
</tr>
</tbody>
</table>Формы
Форма — тег <form> с атрибутами action (куда отправлять) и method (GET или POST). Поля ввода — <input>, каждое привязывают к подписи <label> через совпадение for и id.
<form action="/submit" method="post">
<label for="name">Имя</label>
<input type="text" id="name" name="name" placeholder="Иван">
<label for="mail">Email</label>
<input type="email" id="mail" name="email" required>
<button type="submit">Отправить</button>
</form>Типы поля input
Атрибут type меняет поведение и вид поля: от текста до выбора даты и цвета. Правильный тип включает удобную клавиатуру на телефоне и встроенную проверку.
<input type="text"> <!-- обычный текст -->
<input type="password"> <!-- скрытый ввод -->
<input type="email"> <!-- e-mail с проверкой -->
<input type="number" min="0" max="10">
<input type="tel"> <!-- телефон -->
<input type="url"> <!-- адрес сайта -->
<input type="date"> <!-- выбор даты -->
<input type="color"> <!-- палитра цвета -->
<input type="range" min="0" max="100">
<input type="file"> <!-- загрузка файла -->
<input type="checkbox"> <!-- флажок -->
<input type="radio" name="plan"> <!-- переключатель -->
<input type="hidden"> <!-- скрытое значение -->Select, textarea и кнопки
Выпадающий список — <select> с вариантами <option>. Многострочный текст — <textarea>. Кнопки — <button> с типами submit, reset или button.
<label for="city">Город</label>
<select id="city" name="city">
<option value="msk">Москва</option>
<option value="spb" selected>Санкт-Петербург</option>
</select>
<label for="msg">Сообщение</label>
<textarea id="msg" name="msg" rows="4"></textarea>
<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>Валидация форм
Браузер умеет проверять поля сам, без JavaScript. Атрибут required делает поле обязательным, pattern задаёт регулярное выражение, min/max и minlength/maxlength ограничивают значения и длину.
<input type="text" required minlength="2" maxlength="30">
<input type="number" min="18" max="99" step="1">
<input type="tel" pattern="[0-9]{10}" title="10 цифр">
<input type="email" required>Если поле не проходит проверку, форма не отправится, а браузер покажет подсказку. Атрибут title поясняет, что именно ожидается от пользователя.
Семантические теги HTML5
Семантические теги описывают роль блока, а не его внешний вид. Они улучшают доступность, SEO и читаемость кода. Вместо безликих <div> используйте теги по смыслу.
<body>
<header>Шапка сайта, логотип</header>
<nav>Меню навигации</nav>
<main>
<article>
<h2>Заголовок статьи</h2>
<section>Раздел статьи</section>
</article>
<aside>Боковая колонка</aside>
</main>
<footer>Подвал: контакты, копирайт</footer>
</body><header> — шапка, <nav> — навигация, <main> — основное содержимое (один на странице), <article> — самостоятельная единица контента, <section> — тематический раздел, <aside> — побочный блок, <footer> — подвал. Полезны также <figure> и <figcaption> для изображений с подписью.
Мультимедиа: audio и video
Звук вставляют тегом <audio>, видео — <video>. Атрибут controls показывает встроенный плеер. Несколько форматов задают через вложенные <source> — браузер выберет поддерживаемый.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио.
</audio>
<video controls width="640" poster="preview.jpg">
<source src="clip.mp4" type="video/mp4">
<source src="clip.webm" type="video/webm">
Видео не поддерживается.
</video>Дополнительные атрибуты: autoplay (автозапуск, обычно только с muted), loop (повтор), poster (картинка-заставка до старта видео).
Атрибуты: id, class, data-*
Атрибуты уточняют поведение элементов. id — уникальный идентификатор (один на странице), class — имя для группировки и стилизации (можно несколько через пробел). data-* хранит произвольные данные для JavaScript.
<div id="header" class="card card--big">
Содержимое
</div>
<button data-user-id="42" data-role="admin">
Профиль
</button>
<input type="text" disabled> <!-- логический атрибут -->
<img src="x.png" alt="" loading="lazy">Значения data-* читаются в JavaScript через element.dataset. Логические атрибуты (disabled, checked, required) не требуют значения — достаточно их наличия.
HTML-сущности
Некоторые символы нельзя писать напрямую, потому что они часть синтаксиса HTML. Их заменяют сущностями вида &имя; или &#код;.
< → знак < (меньше)
> → знак > (больше)
& → знак & (амперсанд)
" → двойная кавычка
→ неразрывный пробел
© → знак (c) копирайт
— → длинное тире
→ → стрелка вправо
★ → звезда (числовой код)Самые частые на практике — <, > и &: без них браузер примет текст за теги. склеивает слова, чтобы их не разорвал перенос строки.
Мета-теги и основы SEO
Мета-теги в <head> сообщают браузеру и поисковикам важную информацию о странице. Грамотные <title> и description напрямую влияют на то, как страница выглядит в выдаче.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Шпаргалка по HTML — codechick</title>
<meta name="description"
content="Краткое описание страницы до 160 символов">
<link rel="canonical" href="https://codechick.io/html">
<!-- Open Graph для соцсетей -->
<meta property="og:title" content="HTML-шпаргалка">
<meta property="og:image" content="/preview.png">
</head>viewport обязателен для адаптивности на мобильных. canonical указывает основной адрес страницы и убирает дубли. Теги og:* (Open Graph) задают красивую карточку при репосте в соцсети и мессенджеры.
Доступность (accessibility)
Доступность делает сайт удобным для людей со скринридерами и клавиатурной навигацией. Три кита: alt у картинок, <label> у полей и точечные aria-* атрибуты там, где обычной семантики не хватает.
<!-- описание изображения -->
<img src="chart.png" alt="График роста за 2025 год">
<!-- декоративная картинка: пустой alt -->
<img src="line.svg" alt="">
<!-- подпись к полю -->
<label for="q">Поиск</label>
<input id="q" type="search">
<!-- кнопка-иконка без текста -->
<button aria-label="Закрыть окно">×</button>
<nav aria-label="Основное меню"> ... </nav>Каждое поле формы должно иметь связанный <label>. Если кнопка содержит только иконку, добавьте aria-label с текстовым описанием. У декоративных изображений ставьте пустой alt="", чтобы скринридер их пропустил. Главное правило ARIA: сначала используйте правильный семантический тег, и только потом — aria-атрибуты.
