HTML: виды тегов

Введение

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

В веб-разработке HTML применяется для создания разметки документа, которая потом стилизуется для отображения в браузере. Таким образом, если вам нужно сверстать элемент, то сначала для него пишется HTML-код (определяется структура этого элемента), затем с помощью стилей CSS оформляется внешний вид этого элемента и его расположение на странице. После этого с помощью языка JavaScript элементу может быть задана определенная функциональность, он становится интерактивным. 

Теги в языке HTML

Основной и единственный структурный элемент языка HTML – это тег. Разберем их основные виды.

Формат тегов HTML: 

<имя_тега>Содержимое</имя_тега>

Например: 

<a>Текст внутри тега</a>

Такие теги называются парными, так как для них указаны маркеры начала и конца тега. 

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

Например:

<a title="">Текст внутри тега</a>

Также существуют одиночные теги, для которых закрывающая часть отдельно не указывается.

Например:

<img alt="">

или 

<img alt="" />

Отметим ещё одну особенность HTML – язык HTML является регистронезависимым, имена тегов и атрибутов можно записывать как в нижнем, так и в верхнем регистре.

Виды тегов

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

1. Теги для форматирования текста и указания ссылок

• h1, h2, h3, h4, h5, h6 – теги заголовков;
• b, em – теги для изменения начертания текста;
• ul, ol – теги для создания списков;
• a – тег для создания ссылок.

2. Теги структуры документа

• nav – тег для создания навигации по сайту;
• aside – создаёт боковую панель на сайте, где размещается неосновной контент;
• header – тег для создания шапки сайта или раздела;
• section – тег для создания раздела веб-страницы;
• div – тег, с помощью которого выделяется отдельный блок, с целью его последующего изменения;
• span – определяет строчные элементы.

3. Функциональные теги

• html – включает в себя всё содержимое страницы;
• body – раздел html-файла, где содержится техническая инфомрация;
• script – предназначен для создания/подключения скриптов;
• link – предназначен для подключения внешних файлов (шрифтов или стилей);
• meta – содержит информацию, предназанченную для поисковых систем и браузеров.

4. Теги встраиваемого контента

• img – изображение;
• audio – аудиуоконтент;
• iframe – отдельная область документа, в которую можно подгружать другие независимые документы.

5. Теги форм (для взаимодействия с пользователем)

• form, input – теги для создания формы.

6. Теги таблиц

• table, td, tr – теги для создания таблицы.