Распространенные 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=x²
`<time>`	Дата и/или время
`<ul>`	Определяет маркированный список
`<var>`	Используется для обозначения содержимого тега как переменной
`<wbr>`	Место, где допускается перенос строки

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

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

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

Что даст:

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

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

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

Тег	Описание	Пример
`<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>`	Многострочное поле для ввода

Этот город