Памятка по тегам HTML / XHTML

HTML & CSS

Язык гипертекстовой разметки — HTML

HyperText Markup Language (HTML) – это язык разметки гипертекста, что означает использование кода, который может быть прочитан человеком и не нуждается в компиляции. По сути, web-страницы размечены таким кодом для того, чтобы «объяснить» браузеру, как отображать содержимое. Когда Вы используете HTML, то пишете с помощью HTML-тегов, которые состоят из:

  • знака «меньше» — «< »
  • буквы или слова
  • далее может идти любое количество HTML-атрибутов в виде пары «имя=значение»
  • в конце идет знак «больше» — «>»

Пример: <font style="font-size:15px;">Шрифт размером 15 пикселей</font>

Тег – это основополагающий элемент HTML. Обычно понятия «элемент HTML» и «HTML-тег» взаимозаменяемы. В соответствии со спецификацией W3C «элемент» – это тег со всем его содержимым, включая открывающий и закрывающий теги. У некоторых элементов нет закрывающего тега — такие элементы называются одиночными или пустыми. Несмотря на то, что они не могут содержать в себе никакого контента, все равно считаются полноценными элементами.

На страницах сайта понятия тега и элемента используются для обозначения одного и того же – структурной единицы языка HTML, которая определяет что-либо на веб-странице.

Тэги HTML

В колонке «Статус» для некоторых тегов указано дополняющее определение тега:

  • «HTML5» — новый тег, который появился в спецификации HTML5.
  • «Устаревший тег» — тег, который уже не поддерживается спецификацией HTML5.
  • «Нест. тег» — нестандартный тег, который не был описан ни в одной из спецификаций, но поддерживается некоторыми браузерами.
Названия тегов Краткое описание тегов Статус
<!-- текст -->

Определяет комментарии на странице HTML.

<!DOCTYPE>

Определяет тип документа.

<a>

Предназначен для создания ссылок (гиперссылок).

<abbr>

Выделяет в тексте аббревиатуру, обычно подчеркивается пунктирной линией.

<acronym>

Выделяет в тексте акроним, обычно подчеркивается пунктирной линией.

Устаревший
тег
<address>

Указывает автора документа и его адрес, обычно отображается курсивом.

<applet> Внедряет Java-программы.
В разработке.
Устаревший
тег
<area>

Определяет области карты-изображения, которые являются ссылками на тот или иной документ. Располагается внутри тега <map>. Не требует закрывающего тега.

<article> Основной контент страницы. HTML5
<aside> Боковая панель (сайдбар) сайта. HTML5
<audio> Воспроизводит аудиофайлы, создаёт панель управления ими. HTML5
<b>

Делает текст полужирным. Аналогичен тегу <strong>

<base> Базовый адрес страницы. Указывает базовый URL для всех ссылок имеющих относительный URL-адрес на странице.
<basefont> Форматирует текст для всей страницы. Устаревший
тег
<bdi> Запрещает изменять направление текста. HTML5
<bdo>

Определяет направление вывода текста. Основное предназначение работа с текстами языковых групп, где чтение происходит справа — налево.

<bgsound>

Внедряет в документ звуковой файл. Файл проигрывается в качестве фоновой музыки. Не требует закрывающего тега.

Нест.
тег
<big>

Делает текст крупным — увеличивает размер шрифта на единицу.

Устаревший
тег
<blink> Мигающий (мерцающий) текст. Нест.
тег
<blockquote>

Предназначен для создания выделенных цитат.

<body>

Тело HTML-документа, указывает содержание видимой части (тело) документа.

<br>

Перенос (перевод) строки. Не требует закрывающего тега.

<button> Определяет интерактивную кнопку, элемент формы.
<canvas> Замена флэш-технологии. Область для рисования графики посредством сценариев. HTML5
<caption> Заголовок таблицы.
<center>

Горизонтальное выравнивание всех элементов по центру документа.

Устаревший
тег
<cite>

Выделяет в тексте цитату, обычно курсивом — название произведения, романа, стиха, песни, картины и т.д.

<code>

Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.

<col>

Форматирует одну/несколько колонок таблицы.

<colgroup> Форматирует одну/несколько колонок таблицы, может объединять теги <col>.
<comment> Выделяет комментарий. Нест.
тег
<datalist> Выпадающий список. Определяет список вариантов, которые можно выбирать при наборе в текстовом поле ввода. HTML5
<dd>

Определение термина, описание списка определений. Закрывающий тег необязателен.

<del>

Выделяет удалённый текст в новой версии документа. Выделенный текст отображается перечёркнутым.

<details> Спойлер — открывающийся текст по внутренней ссылке. Позволяет скрыть/показать дополнительную информацию. HTML5
<dfn>

Отмечает текст как определение — впервые встречающийся термин в тексте, обычно отображается курсивом.

<dialog> Диалоги. HTML5
<dir> Список папок. Устаревший
тег
<div>

Определяет блок, используется как контейнер для других объёктов. Преимущественно используется совместно с CSS.

<dl>

Создаёт список терминов и определений.

<dt>

Определение термина в списке определений. Закрывающий тег необязателен.

<em>

Выделяет особенно важный фрагмент текста. Обычно браузерами отображается курсивом.

<embed> Внедряет плагины. Область для внешнего приложения или интерактивного содержимого. HTML5
<fieldset> Контейнер для объединения элементов формы — группирует элементы формы.
<figcaption> Заголовок тега <figure>. HTML5
<figure> Контейнер для группировки контента, обычно используется с элементом <figcaption>. HTML5
<font>

Форматирует текст.

Устаревший
тег
<footer> Нижний колонтитул (подвал сайта) — нижняя часть документа или раздела. HTML5
<form> Форма для отправки введенных пользователем данных.
<frame>

Определяет фрейм в фреймовой структуре документа. Располагается внутри тега <frameset>.
Не требует закрывающего тега.

<frameset>

Определяет фреймовую структуру документа. Используется вместо тега <body>.

<h1>

Делает текст заголовком. Может иметь значение от <h1> до <h6>.

<head>

Обрамляет контейнер для метаданных документа.

<header> Верхний колонтитул (шапка сайта) — верхняя часть документа или раздела. HTML5
<hgroup> Группирует заголовки. HTML5
<hr>

Рисует горизонтальную линию.
Не требует закрывающего тега.

<html>

Указывает программам просмотра html страниц начало и конец HTML-документа.

<i>

Преобразует текст в курсивный (текст с наклонным начертанием).

<iframe>

Добавляет на страницу плавающий (встроенный) фрейм.

<img>

Выводит графическое изображение (рисунок).
Не требует закрывающего тега.

<input> Элемент формы, может быть кнопкой, текстовым полем, переключателем и др.
<ins>

Выделяет новый текст в новой версии документа (текст, который был добавлен в документ). Выделенный текст станет подчёркнутым.

<isindex> Поисковая строка. Устаревший
тег
<kbd>

От английского keyboard — клавиатура. Указывает текст вводимый с клавиатуры. Обычно отображается моноширинным шрифтом.

<keygen> Используется для генерации пары ключей. Шифровка/расшифровка данных. HTML5
<label> Создаёт связь с элементом формы, элемент формы.
<legend> Заголовок тега fieldset, элемент формы.
<li>

Обозначает элемент списка. Используется в нумерованных и ненумерованных списках (находится между тегами <ul> и <ol>). Закрывающий тег необязателен.

<link>

Указывает на связь документа с каким либо внешним файлом — позволяет загрузить внешние файлы .css, .xml, .ico и т.д. Не требует закрывающего тега.

<listing> Код программы. Устаревший
тег
<main> Контейнер с основным контентом.
<map>

Определяет место в коде документа в котором создаётся описание карты-изображения с помощью тега/тегов <area>

<mark> Выделенный текст — определяет важную часть текста. HTML5
<marquee>

Бегущая строка.

Нест.
тег
<menu> Определяет список/меню команд. Обрамляет теги <command>. HTML5
<meta>

Определяет мета-теги, информация в которых предназначена для браузеров и поисковых систем. Не требует закрывающего тега.

<meter> Шкала измерения. Определяет скалярное измерение в пределах известного диапазона. HTML5
<multicol> Многоколоночный текст. Нест.
тег
<nav> Важные ссылки страницы — раздел навигационных ссылок. HTML5
<nobr>

Запрещает перенос строки.
Противоположен значению тега <br>

<noembed> Вывод текста при отсутствии браузером поддержки плагинов. Нест.
тег
<noframes>

Выводит текст заключенный в него в том случае если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках.

<noscript>

Выводит текст заключенный в него в том случае если браузер пользователя не поддерживает скрипты или они принудительно выключены в его настройках.

<object> Внедряет плагины, внешний подключаемый ресурс. Устаревший
тег
<ol>

Определяет нумерованный (упорядоченный) список.

<optgroup> Группирует теги <option> — определяет группу связанных логически элементов списка в выпадающем списке.
<option> Элемент списка выбора — вариант выбора в выпадающем списке. Находится между тегами <select>, <optgroup>, <datalist>.
<output> Определяет область, в которую выводится результат расчета (работы скрипта). HTML5
<p>

Создаёт параграф (абзац) текста.

<param> Значения параметров для объекта — используется внутри элементов <applet> и <object>.
<plaintext> Предварительно отформатированный текст. Нест.
тег
<pre>

Обрамляет предварительно отформатированный текст. Браузер при выводе текста на экран не удаляет пробелы и переносы строк.

<progress> Отображает текущий прогресс выполнения задачи — шкала прогресса. HTML5
<q>

Предназначен для создания цитат. От <blockquote> отличается тем, что цитата не имеет отступов. А в отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки.

<rp> Определяет, что показывать браузеру, который не поддерживает тег <ruby>. HTML5
<rt> Определяет объяснение/произношение символов, используется внутри тега <ruby>. HTML5
<ruby> Обрамляет аннотацию. HTML5
<s>

Определяет текст, который больше не является правильным и отображает текст перечёркнутым. Аналогичен тегу <strike>.

Устаревший
тег
<samp>

Выделяет текст как образец. Используется для отметки текста являющемся результатом работы программ. Отображает текст как моноширинный. Отображается моноширинным шрифтом.

<script>

Внедряет на страницу скрипт (клиентский сценарий).

<section> Раздел документа — семантически единые разделы страницы. HTML5
<select> Группирует теги option. Выпадающий список.
<small>

Уменьшает размер шрифта на единицу — отображение текста происходит более мелким шрифтом.

<source> Внедряет аудио/видео файлы, с помощью тегов audio и video. HTML5
<spacer> Пустое пространство. Нест.
тег
<span>

Определяет контейнер для внутреннего текста (строчного содержимого). Как правило используется совместно с CSS.

<strike>

Делает текст перечёркнутым. Аналогичен тегу <s>.

Устаревший
тег
<strong>

Выделяет особенно важный фрагмент текста. Обычно браузерами отображается полужирным.

<style>

Служит для определения стилей элементов страницы с использованием разметок CSS.

<sub>

Определяет текст в нижнем индексе (подстрочный текст).

<summary> Заголовок для элемента <details>. HTML5
<sup>

Определяет текст в верхнем индексе (надстрочный текст).

<table>

Создаёт таблицу.

<tbody> Тело таблицы, которому можно задавать свойства.
<td>

Создаёт отдельную ячейку в таблице.

<textarea> Элемент формы, многострочное текстовое поле.
<tfoot> Подвал таблицы.
<th>

Создаёт ячейку в таблице которая определяется как заголовок.

<thead> Голова таблицы.
<time> Определяет время/дату. HTML5
<title>

Заголовок и название страницы.

<tr>

Создаёт строку в таблице.

<track> Внедряет текстовую информацию (субтитры, характеристики медиафайлов и т.д.) в аудио/видео файлы, через теги audio и video. HTML5
<tt>

Делает текст моноширинным.

<u>

Делает текст подчёркнутым.

Устаревший
тег
<ul>

Определяет ненумерованный (маркированный символами) список.

<var>

Выделяет в тексте переменные (для языков программирования). Обычно отображается курсивом.

<video> Воспроизводит видеофайлы, создаёт панель управления ими. HTML5
<wbr>

Разрешает перенос строки и указывает, где нужно перенести длинное слово, если оно не вмещается в окно браузера. Не требует закрывающего тега.

<xmp>

Отображает текст в том виде, в котором он и был набран — предварительно отформатированный текст.

Устаревший
тег

Поделитесь страницей в социальных сетях

Один отзыв на «Памятка по тегам HTML / XHTML»

  1. Dmitry пишет:

    Очень удобно с раскрывающимися пояснениями. Наиболее полный список тегов на одной странице, проще искать. Спасибо за работу!
    Только некоторые теги без синтаксиса, надеюсь что дополните со временем.

Оставьте свой отзыв

*