Распространенные HTML теги

Теги для создания структуры HTML документа:

Тег	Описание	Пример
<!DOCTYPE>	Определяет тип документа
<!-- ... -->	Комментарий	<!--...--> Будет не виден пользователю, но будет доступен в исходном коде страниы
<html>	Корневой тег документа, открывается в начале HTML страницы и заканчивается в самом конце
<head>	Головная часть HTML документа
<title>	Заголовок документа, будет видно в заголовке окна браузера
<link>	Позволяет привязать внешний документ для отображения текущего, обычно CSS или JavaScript	<link rel="stylesheet" href="styles.css"> подключит файл styles.css
<meta>	Мета данные документа, расположено в внутри <head>	<meta charset="UTF-8"> — указывает, что документ в кодировке UTF-8
<body>	Основное тело документа, именно эта часть будет отображаться пользователю
<style>	Встраивает в HTML документ CSS правила, может быть как в <head> так и в <body>	<style>p {color:blue;}</style>

Пример простейшего HTML документа с полной структурой:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Название документа</title>
</head>
<body>
    <!-- Тут расположено тело документа -->
    Тело документа
</body>
</html>

Теги для работы с текстом:

Тег	Описание	Пример
<a>	Ссылка, гиперссылка, якорьный элемент	<a href="https://www.okumy.com/">Перейти на okumy.com</a>
<abbr>	Определяет текст как аббревиатуру	<abbr title="Hypertext Markup Language">HTML</abbr> → HTML
<address>	Контактная информация автора или владельца документа, поисковики могут извлекать эту информацию для определения географической принадлежности сайта
<b>	Полужирный текст	<b>bold text</b> → bold text
<blockquote>	Цитата	<blockquote>To be or not to be</blockquote> → To be or not to be
<br>	Перенос строки	Текст <br>с новой строки → Текст с новой строки
<cite>	Сноска на название материала	<cite>За Альянс</cite> → За Альянс
<code>	Используется для вставки компьютерного кода в текстовом виде, браузеры не умеют подсвечивать синтаксис языков	<code>print("Hello!")</code> → print("Hello!")
<del>	Текст, который удален в новой версии документа	<del>не</del>возможно → невозможно
<details>	Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
<dfn>	Указывает, что содержимое является термином
<div>	Блочный элемент - один из основных элементов верстки
<dl>	Определяет список определений
<dt>	Название термина в списке определений <dl>
<em>	выделенный по смыслу текст (обычно, текст выделенный курсивом)	Луна — это ближайший <em>филиал</em> Земли → Луна — это ближайший филиал Земли
<h1> - <h6>	Заголовки HTML разного уровня: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>	<h1>Этот город</h1> → Этот город
<hr>	Горизонтальная линия - тематический разделитель	<hr> →
<i>	Выделяет текст курсивом	Нетокра́тия (англ. <i>netocracy</i>) → Нетокра́тия (англ. netocracy)
<ins>	Текст, который был добавлен в новой версии документа	Успешный <ins>счастливый</ins> и богатый → Успешный счастливый и богатый
<kbd>	Текст введенный с клавиатуры или названия кнопок клавиатуры обычно выделен моноширинным шрифтом	<kbd>Control + A</kbd> → Control + A
<li>	Элемент списка
<map>	Контейнер для <area> Определяет пользовательскую карту на изображении
<mark>	Выделенный текст (обычно с помощью подсветки фона)	2+2=<mark>4</mark> → 2+2=4
<meter>	Отображает элемент отображающий часть заполнения	Диск заполнен на <meter value="0.6">60%</meter> → Диск заполнен на 60%
<noscript>	Альтернативный контент для пользователей, отключивших скрипты
<ol>	Определяет нумерованный список
<output>	Результат вычислений
<p>	Абзац текста	<p>Привет, я текст</p> → Привет, я текст
<pre>	Предварительно отформатированный текст
<progress>	Индикатор выполнения (прогресса)	Скачано 35% файла <progress value="35" max="100">32%</progress> → Скачано 35% файла 32%
<q>	Цитата в тексте	<q>Тсс! Не мешай мне думать!</q>
<s>	Перечеркнутый текст	<s>Купить авокадо</s> → Купить авокадо
<samp>	Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом )
<small>	Текст шрифтом меньшего размера
<span>	Строчный элемент
<strong>	Текст, выделенный по значению обычно отображается полужирным	Мое сердце принадлежит <strong>Орде</strong>! → Мое сердце принадлежит Орде!
<sub>	Отображает текст в виде нижнего индекса	Я <sub>почти</sub> готов! → Я почти готов!
<summary>	Заголовок внутри тега <details>
<sup>	Отображает текст в виде верхнего индекса	y=x<sup>2</sup> → y=x2
<time>	Дата и/или время
<ul>	Определяет маркированный список
<var>	Используется для обозначения содержимого тега как переменной
<wbr>	Место, где допускается перенос строки

Примеры списков:

<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Какао</li>
</ol>

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Какао</li>
</ul>

Что даст:

1. Кофе
2. Чай
3. Какао

• Кофе
• Чай
• Какао

Теги для встраивания других документов или объектов:

Тег	Описание	Пример
<audio>	Позволяет вставить воспроизводимый аудио файл
<canvas>	Используется для рисовании графики с помощью скриптов
<embed>	Контейнер для внешнего приложения
<figcaption>	Заголовок для <figure> элемента
<figure>	Определяет автономную группу из нескольких элементов (например картинка с подписью)
<iframe>	Определяет встроенный фрейм, в страницу встраивается другая страница
<img>	Изображение, картинка
<object>	Определяет встроенный объект
<param>	Задает параметры для встроенных объектов
<picture>	Контейнер для нескольких изображений
<script>	Определяет скрипт или подключение скрипта из внешнего ресурса
<source>	Определяет ресурс для тегов <video>, <audio> и <picture>
<track>	Определяет текстовую дорожку для тегов <video> и <audio>
<video>	Позволяет вставить воспроизводимое видео

Теги для создания таблиц:

Тег	Описание	Пример
<caption>	Подпись таблицы
<col>	Задает характеристики колонок в таблице
<colgroup>	Определяет группу из одной или более колонок таблицы для форматирования
<table>	Определяет таблицу
<tbody>	Определяет область контента в таблице
<td>	Ячейка в таблице <table>
<tfoot>	Определяет группу строк в нижней части таблицы <table> - нижний колонтитул
<th>	Ячейка - заголовок в таблице <table>
<thead>	Определяет группу строк в верхней части таблицы <table> - верхний колонтитул
<tr>	Определяет строку в таблице

Пример таблицы:

<table>
  <caption>Таблица побед</caption>
  <colgroup>
    <col style="background-color:lightgray">
    <col style="background-color:yellow">
  </colgroup>
  <thead>
    <tr>
      <th>Игрок</th>
      <th>Количество побед</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Илья</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Иван</td>
      <td>7</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Всего побед</td>
      <td>12</td>
    </tr>
  </tfoot>
</table>

Что превратится в:

Таблица побед

Игрок	Количество побед
Илья	5
Иван	7
Всего побед	12

Теги для задания семантической структуры документа:

Тег	Описание
<article>	Статья, обозначает начало содержимого страницы без навигации
<aside>	Контент в стороне, обычно задает боковое навигационное меню или дополнительное содержимое
<footer>	Нижний колонтитул, подвал
<header>	Блок заголовка, не является повторением тегов <h1> - <h6>, потому что может содержать внутри блок навигации, заголовок и краткое описание статьи
<main>	Основной контент страницы
<menu>	Блок с навигационным меню, обычно содержит ссылки на другие страницы
<menuitem>	Определяет элементы, которые пользователь может вызвать из контекстного меню
<nav>	Контейнер для навигационных элементов, например горизонтальное меню в шапке или ссылки в подвале страницы
<section>	Раздел, может имет вложенные разделы, обычно применяется чтобы выделить главу или подраздел

Теги для работы с формами:

Тег	Описание
<button>	Кликабельная кнопка
<fieldset>	Группа связанных элементов в форме
<form>	Определяет форму пользовательского ввода
<input>	Поле для ввода, элемент формы
<label>	Метка для поля ввода Обычно содержит подпись поля
<legend>	Заголовок элементов <fieldset>
<optgroup>	Определяет группу связанных вариантов в выпадающем списке Дает название группы
<option>	Параметр (вариант выбора) в выпадающем списке
<select>	Определяет выпадающий список или список с множественным выбором
<textarea>	Многострочное поле для ввода