HTML-теги. Часть 1

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. Так, на рисунке ниже демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.

📷 Вложение тегов, а — правильное

📷 Вложение тегов, б — неверное

Если связать открывающий и закрывающий тег между собой скобкой, как показано на рисунке выше, то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой (рисунок а). Любое пересечение условных скобок (рисунок б) говорит о том, что правильная последовательность тегов нарушена.

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

Все HTML-элементы делятся на пять типов:

пустые элементы — <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, , <link>, <menuitem>, <meta>, <param>, <source>, <track>, <wbr>;
элементы с неформатированным текстом - <script>, <style>;
элементы, выводящие неформатированный текст - <textarea>, <title>;
элементы из другого пространства имён - MathML и SVG;
обычные элементы - все остальные элементы.

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены звездочкой*.

Полный список HTML-элементов(от "a" до "k")

ТАБЛИЦА 1.1 HTML-ЭЛЕМЕНТЫ

Структура таблицы следующая: Тег - Описание

 - Используется для добавления комментариев.
<!DOCTYPE> - Объявляет тип документа и предоставляет основную информацию для браузера - его язык и версия.
<a> - Создаёт гипертекстовые ссылки.
<abbr> - Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address> - Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area> - Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
*<article> - Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
*<aside> - Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
*<audio> - Загружает звуковой контент на веб-страницу.
<b> - Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base> - Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
*<bdi> - Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo> - Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote> - Выделяет текст как цитату, применяется для описания больших цитат.
<body> - Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br> - Перенос текста на новую строку.
<button> - Создает интерактивную кнопку. Внутрь тега можно поместить содержимое - текст или изображение.
*<canvas> - Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption> - Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite> - Используется для указания источника цитирования. Отображается курсивом.
<code> - Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col> - Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup> - Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
*<data> - Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
*<datalist> - Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd> - Используется для описания термина из тега <dt>.
<del> - Помечает текст как удаленный, перечёркивая его.
*<details> - Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn> - Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
*<dialog> - Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div> - Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl> - Тег-контейнер, внутри которого находятся термин и его описание.
<dt> - Используется для задания термина.
<em> - Выделяет важные фрагменты текста, отображая их курсивом.
*<embed> - Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset> - Группирует связанные элементы в форме, рисуя рамку вокруг них.
*<figcaption> - Заголовок/подпись для элемента <figure>.
*<figure> - Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
*<footer> - Определяет завершающую область (нижний колонтитул) документа или раздела.
<form> - Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h1-h6> - Создают заголовки шести уровней для связанных с ними разделов.
<head> - Элемент-контейнер для метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.
*<header> - Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr> - Горизонтальная линия для тематического разделения параграфов.
<html> - Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i> - Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe> - Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img> - Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input> - Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins> - Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd> - Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.

Продолжение в следующей статье!