Справочник тегов HTML — основные теги и что они делают

Справочник · HTML и CSS · 1 минута чтения

Тег — команда в угловых скобках: <p> открывает абзац, </p> закрывает. У большинства тегов есть пара, одиночные (<br>, <img>, <input>, <meta>) закрывать не нужно. Настройки тега — атрибуты: <a href="https://example.org">. С нуля — урок Первая страница на HTML.

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

Тег	Что это
`<!doctype html>`	первая строка файла: документ на современном HTML
`<html lang="ru">`	вся страница; `lang` — язык текста
`<head>`	служебная часть: заголовок вкладки, кодировка, стили
`<title>`	заголовок во вкладке браузера и в поисковиках
`<meta charset="utf-8">`	кодировка — без неё бывают «кракозябры»
`<link rel="stylesheet" href="…">`	подключить файл CSS
`<style>`, `<script>`	стили и программа на JavaScript прямо в странице
`<body>`	всё, что видно на странице

Текст

Тег	Что это
`<h1>`…`<h6>`	заголовки шести уровней; `<h1>` на странице обычно один
`<p>`	абзац
`<br>`	перенос строки внутри абзаца
`<hr>`	разделительная линия
`<strong>`, `<em>`	важное (жирным) и выделенное (курсивом)
`<mark>`	подсвеченный текст
`<sub>`, `<sup>`	нижний и верхний индекс: `H<sub>2</sub>O` — это H₂O, `м<sup>2</sup>` — м²
`<blockquote>`	цитата отдельным блоком
`<code>`, `<pre>`	код в строке и блок с сохранёнными пробелами

Подробнее — урок Текст, заголовки, списки и ссылки.

Ссылки, картинки, звук и видео

Тег	Что это
`<a href="…">`	ссылка — как сделать
`<img src="…" alt="…">`	картинка — как вставить
`<figure>`, `<figcaption>`	картинка с подписью
`<audio>`, `<video>`, `<source>`, `<track>`	звук, видео, их файлы и субтитры — справка
`<iframe>`	чужая страница внутри своей: карта, видео с YouTube

Списки и таблицы

Тег	Что это
`<ul>`, `<ol>`, `<li>`	список с точками, нумерованный список, пункт списка
`<table>`, `<tr>`, `<th>`, `<td>`	таблица, строка, ячейка заголовка, обычная ячейка — урок Таблицы
`<thead>`, `<tbody>`, `<caption>`	шапка, тело и подпись таблицы

Формы

Тег	Что это
`<form action="…">`	форма: куда отправить данные
`<input>`	поле: `type="text"`, `email`, `password`, `checkbox`, `radio`, `file` и другие
`<label>`	подпись поля
`<textarea>`	многострочное поле
`<select>`, `<option>`	выпадающий список и его пункт
`<button>`	кнопка

Подробнее — урок Формы.

Блоки и смысл

Тег	Что это
`<div>`, `<span>`	блок и кусок текста без смысла, для оформления — в чём разница
`<header>`, `<footer>`	шапка и подвал страницы или раздела
`<nav>`	меню
`<main>`	главное содержимое страницы, один раз
`<section>`, `<article>`, `<aside>`	раздел, отдельная статья, боковая колонка
`<details>`, `<summary>`	сворачиваемый блок и его заголовок

Смысловые теги (header, nav, main, article) выглядят как <div>, но подсказывают поисковикам и программам чтения с экрана, где на странице что.

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

Незакрытый тег. Забытый </div> или </a> ломает всё, что ниже: блоки съезжают, ссылкой становится полстраницы. Редактор кода с подсветкой пар тегов находит такое сразу.
Теги закрыты не по порядку. Правильно <strong><em>текст</em></strong>: что открыто последним, закрывается первым.
Блок внутри абзаца. В <p> нельзя вкладывать <div>, <ul>, <table> и другой <p>: браузер сам закроет абзац раньше, и стили лягут не туда.
Отступы пустыми строками. Несколько <br> подряд вместо отступа — плохая привычка: расстояния задают в CSS свойством margin (справка Как сделать отступы).
Картинка без alt. Без описания картинку не поймут программы чтения с экрана, а поисковик не узнает, что на ней.

Проверить разметку можно официальным валидатором validator.w3.org: он показывает незакрытые и неправильно вложенные теги с номерами строк.