Список HTML-элементов: основные теги HTML с примерами и назначением

HTML (HyperText Markup Language) — язык разметки, который описывает структуру веб-страницы. Ниже собран удобный справочник по тегам: базис страницы, структура, оформление текста, ссылки и изображения, списки, таблицы, формы, спецсимволы и устаревшие элементы.

Важно: некоторые теги из старых стандартов (например, <FONT>, <CENTER>, <FRAMESET>, <BLINK>) сегодня считаются устаревшими. В современных проектах вместо них используют CSS и актуальные элементы HTML5.

Базисные элементы HTML-документа

Минимальный «скелет» страницы:

<HTML>...</HTML> — корневой элемент документа (начало/конец)
<HEAD>...</HEAD> — заголовок документа: метаданные, стили, скрипты
<TITLE>...</TITLE> — заголовок вкладки (должен находиться внутри <HEAD>)
<BODY>...</BODY> — тело документа (видимое содержимое страницы)

Определение структуры и смысловые элементы

<H1>...</H1> … <H6>...</H6> — заголовки 1–6 уровня
- ALIGN=LEFT|CENTER|RIGHT — устаревший атрибут, выравнивание делайте CSS
<DIV>...</DIV> — блочный контейнер/секция (структурирование)
- ALIGN=... — устарело, используйте CSS
<BLOCKQUOTE>...</BLOCKQUOTE> — цитата (обычно с отступом)
<EM>...</EM> — смысловое выделение (обычно курсив)
<STRONG>...</STRONG> — сильное выделение (обычно жирный)
<CITE>...</CITE> — источник/название произведения (часто курсив)
<CODE>...</CODE> — фрагмент кода (inline)
<SAMP>...</SAMP> — пример вывода программы
<KBD>...</KBD> — ввод с клавиатуры
<VAR>...</VAR> — переменная
<DFN>...</DFN> — определяемый термин (редко используется)
<ADDRESS>...</ADDRESS> — контактная информация автора/страницы
<BIG>...</BIG>, <SMALL>...</SMALL> — увеличить/уменьшить текст (<BIG> устарел)

Внешний вид текста (типографика)

Современный подход: оформлять CSS, но для справочника:

<B>...</B> — визуально жирный (без смысла)
<I>...</I> — визуально курсив (без смысла)
<U>...</U> — подчёркивание (в HTML5 есть, но чаще решают CSS)
<S>...</S>, <STRIKE>...</STRIKE> — зачёркнутый (<STRIKE> устарел)
<SUP>...</SUP> — верхний индекс
<SUB>...</SUB> — нижний индекс
<TT>...</TT> — моноширинный (устарел, лучше CSS/<code>)
<PRE>...</PRE> — сохранить форматирование (пробелы, переносы)
- <PRE WIDTH=?> — устарело
<CENTER>...</CENTER> — центрировать (устарел, используйте CSS)
<BLINK>...</BLINK> — мигающий текст (устарел/не поддерживается)
<FONT>...</FONT>, <BASEFONT> — шрифты/цвет/размер (устарели, используйте CSS)

Редкие/устаревшие из старых справочников:

<MULTICOL>, <SPACER> — устарели, вместо них CSS (колонки/отступы)

Ссылки и графика

Ссылки

<A HREF="URL">...</A> — ссылка
<A HREF="URL#id">...</A> — ссылка на якорь в другом документе
<A HREF="#id">...</A> — ссылка на якорь в текущем документе
TARGET="_blank|_self|_parent|_top|name" — куда открывать (например _blank)
<A NAME="..."></A> — якорь (устарело), лучше: id=""
REL / REV — rel используется активно (например nofollow), rev — устарел/редко

Изображения

<IMG SRC="URL"> — картинка
ALT="..." — альтернативный текст (важно для SEO и доступности)
WIDTH / HEIGHT — размеры
BORDER, HSPACE, VSPACE, ALIGN — в основном устарели (CSS)

Карты изображений (image map)

<MAP NAME="..."></MAP>, <AREA ...> — кликабельные области
ISMAP / USEMAP — режимы карт (редко используются)

Прочее (встраивание и обновление)

<META HTTP-EQUIV="Refresh" CONTENT="..."> — автообновление/редирект (использовать осторожно)
<EMBED SRC="..."> — встраивание объекта (часто заменяют <iframe> или спец. решениями)

Разделители и переносы

<P>...</P> — абзац (закрывающий тег желателен)
<BR> — перенос строки
- <BR CLEAR=...> — устарело
<HR> — горизонтальная линия
- ALIGN, SIZE, WIDTH, NOSHADE — устарели, лучше CSS
<NOBR>...</NOBR>, <WBR> — запрет/подсказка переноса (<WBR> актуален, <NOBR> устарел)

Списки

<UL><LI>...</LI></UL> — маркированный список
- TYPE, COMPACT — устарели
<OL><LI>...</LI></OL> — нумерованный список
- TYPE, START, VALUE, COMPACT — частично устарело/редко нужно
<DL><DT>...</DT><DD>...</DD></DL> — список определений
<MENU>, <DIR> — устарели (используйте <ul>)

Фон и цвета (старые атрибуты BODY)

<BODY BACKGROUND="...">, BGCOLOR, TEXT, LINK, VLINK, ALINK — устарели, всё делается CSS.

Специальные символы (HTML entities)

Сущности пишутся в нижнем регистре и заканчиваются ;:

< — <
> — >
& — &
" — "
® — ®
© — ©
  — неразрывный пробел
&#...; — символ по числовому коду

Формы (form)

<FORM ACTION="URL" METHOD="GET|POST">...</FORM> — форма
ENCTYPE="multipart/form-data" — для загрузки файлов
<INPUT TYPE="text|password|checkbox|radio|image|hidden|submit|reset"> — поле ввода
- NAME, VALUE, CHECKED, SIZE, MAXLENGTH
<SELECT>...</SELECT> — список выбора
- NAME, SIZE, MULTIPLE
- <OPTION>, SELECTED
<TEXTAREA ROWS="..." COLS="..."></TEXTAREA> — многострочный ввод
- NAME, WRAP=OFF|VIRTUAL|PHYSICAL (wrap сейчас обычно soft/hard в HTML5)

Таблицы (table)

<TABLE>...</TABLE> — таблица
- BORDER, CELLSPACING, CELLPADDING, WIDTH — сейчас чаще через CSS
<TR>...</TR> — строка
<TD>...</TD> — ячейка
<TH>...</TH> — заголовочная ячейка
COLSPAN / ROWSPAN — объединение столбцов/строк
<CAPTION>...</CAPTION> — подпись таблицы
- ALIGN=TOP|BOTTOM — устарело

Фреймы (устаревшая технология)

Фреймы HTML4 сейчас считаются устаревшими:

<FRAMESET>...</FRAMESET>, <FRAME>, <NOFRAMES> — устарели
Современная замена: <iframe> или нормальная маршрутизация/компоненты.

Java Applet (устарело)

<APPLET>...</APPLET> и его атрибуты — устарело и не используется (Java-апплеты больше не поддерживаются браузерами).

Разное и служебные теги

 — комментарий
<!DOCTYPE ...> — объявление типа документа (сейчас обычно <!doctype html>)
<ISINDEX> — устарело
<BASE HREF="...">, <BASE TARGET="..."> — базовый URL/цель для ссылок (в <head>)
<LINK ...> — связи документа (в <head>)
<META ...> — метаданные (в <head>)
<STYLE>...</STYLE> — стили (в <head>)
<SCRIPT>...</SCRIPT> — скрипты (в <head> или перед </body>)