Шпаргалка по HTML
Последнее обновление
Структура документа
Любая HTML-страница начинается с этого каркаса.
| Элемент | Что делает |
|---|---|
<!DOCTYPE html> | Объявляет документ как HTML5 (первая строка) |
<html lang="en"> | Корневой элемент; lang задаёт язык |
<head> | Метаданные: title, ссылки, скрипты - не отображаются на странице |
<meta charset="UTF-8"> | Кодировка символов (всегда указывайте) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Адаптивное масштабирование на мобильных |
<title> | Заголовок страницы во вкладке браузера и результатах поиска |
<body> | Сюда помещается всё видимое на странице |
Текст и заголовки
| Элемент | Что делает |
|---|---|
<h1> … <h6> | Заголовки, <h1> самый важный (один на страницу) |
<p> | Абзац текста |
<br> | Перенос строки (без закрывающего тега) |
<hr> | Тематический разделитель / горизонтальная линия |
<strong> | Важный текст (полужирный) |
<em> | Выделенный текст (курсив) |
<span> | Строчный контейнер для стилизации фрагмента текста |
<code> | Строчный код |
<pre> | Преформатированный текст (сохраняет пробелы) |
<blockquote> | Цитируемый блок текста |
Ссылки и изображения
| Элемент | Синтаксис |
|---|---|
| Ссылка | <a href="https://coddy.tech">Coddy</a> |
| Открыть в новой вкладке | <a href="..." target="_blank" rel="noopener"> |
| Якорь (переход к id) | <a href="#section">Jump</a> |
| Изображение | <img src="cat.png" alt="A cat" width="200"> |
| Адаптивное изображение | <img src="..." srcset="..." sizes="..."> |
| Иллюстрация с подписью | <figure><img ...><figcaption>…</figcaption></figure> |
Списки
| Элемент | Что делает |
|---|---|
<ul> | Неупорядоченный (маркированный) список |
<ol> | Упорядоченный (нумерованный) список |
<li> | Элемент списка (внутри <ul> или <ol>) |
<dl> | Список определений |
<dt> / <dd> | Термин определения / описание определения |
Таблицы
| Элемент | Что делает |
|---|---|
<table> | Контейнер таблицы |
<thead> / <tbody> / <tfoot> | Группы заголовка, тела и подвала таблицы |
<tr> | Строка таблицы |
<th> | Ячейка заголовка (полужирная, по центру) |
<td> | Ячейка данных |
colspan / rowspan | Объединение ячеек по столбцам / строкам |
Формы и поля ввода
Строительные блоки любой формы, собирающей ввод.
| Элемент | Синтаксис / назначение |
|---|---|
| Форма | <form action="/submit" method="post"> |
| Текстовое поле | <input type="text" name="q" placeholder="Search"> |
| Email / пароль | <input type="email">, <input type="password"> |
| Чекбокс / радиокнопка | <input type="checkbox">, <input type="radio"> |
| Число / дата | <input type="number">, <input type="date"> |
| Метка | <label for="q">Search</label> |
| Многострочное поле | <textarea rows="4"></textarea> |
| Выпадающий список | <select><option>One</option></select> |
| Кнопка | <button type="submit">Send</button> |
| Обязательное поле | <input required> |
Семантические теги и теги разметки
Используйте их вместо обычных <div>, чтобы браузеры, программы чтения с экрана и поисковики понимали вашу страницу.
| Элемент | Что размечает |
|---|---|
<header> | Верх страницы или раздела (логотип, навигация) |
<nav> | Навигационные ссылки |
<main> | Основное содержимое (одно на страницу) |
<section> | Тематическую группу содержимого |
<article> | Самодостаточное содержимое (пост, карточка) |
<aside> | Боковую панель / второстепенное содержимое |
<footer> | Низ страницы или раздела |
<div> | Обычный блочный контейнер (без смысла) |
Частые глобальные атрибуты
| Атрибут | Что делает |
|---|---|
id | Уникальный идентификатор элемента |
class | Одно или несколько имён классов (для CSS / JS) |
style | Встроенный CSS (используйте умеренно) |
title | Текст всплывающей подсказки при наведении |
data-* | Пользовательский атрибут данных, напр. data-id="42" |
hidden | Скрывает элемент |
Каждый тег и атрибут HTML, который вам нужен, сгруппированы по назначению. Эта шпаргалка по HTML охватывает каркас страницы, текст и ссылки, изображения и медиа, списки, таблицы, формы и семантические теги, которые придают разметке смысл.
Всё это - стандартный HTML5, который работает в любом современном браузере. Скопируйте тег или откройте playground для HTML, чтобы редактировать его с живым предпросмотром - без настройки.
Часто задаваемые вопросы по шпаргалке HTML
Эта шпаргалка по HTML бесплатна?
Да. Эта шпаргалка по HTML бесплатна в использовании и без регистрации. Добавьте её в закладки и возвращайтесь, когда нужно посмотреть тег или атрибут.
В чём разница между <section> и <div>?
<section> - это семантический тег: он сообщает браузерам и программам чтения с экрана, что его содержимое - осмысленная тематическая группа, и обычно у него есть заголовок. <div> не несёт смысла и является просто обычным контейнером для стилизации или скриптов. Берите семантический тег (<section>, <article>, <nav>), когда он подходит, и используйте <div> только когда ни один не подходит.Всем ли тегам HTML нужен закрывающий тег?
Большинству нужен (
<p>...</p>), но нескольким "пустым" (void) элементам - нет, потому что они не могут ничего содержать: <img>, <br>, <hr>, <input>, <meta> и <link>. В HTML5 их можно писать как с завершающим слешем, так и без него.Можно ли практиковать HTML онлайн?
Да. Откройте playground для HTML, чтобы писать HTML в браузере с живым предпросмотром - без установки. А если нужна структура, бесплатный интерактивный курс HTML от Coddy шаг за шагом обучает тегам, формам и вёрстке.
Подходит ли эта шпаргалка для начинающих?
Да. Она начинается с каркаса страницы и повседневных тегов, которые вы используете в первую очередь, затем переходит к формам и семантической разметке, так что верхние разделы можно использовать с первого дня.
Связанные ресурсы
Другие шпаргалки
