HTML-теги

HTML-теги — это строительные блоки веб-страниц. Они определяют структуру, содержание и функциональность веб-страницы.

HTML-теги состоят из ключевых слов, заключённых в угловые скобки( < > ), и большинство тегов имеют открывающий и закрывающий теги. Например, <p> — открывающий тег абзаца, а </p> — закрывающий тег.

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

Базовый синтаксис HTML-тегов

HTML-теги имеют единый синтаксис. Большинство тегов имеют следующую структуру: 

<tagname attribute="value">Content</tagname>

Ключевые компоненты HTML-тегов включают в себя:

  • Имя тега: определяет тип элемента(например, <p> для абзацев, <h1> для заголовков).
  • Атрибуты: Необязательные параметры, которые предоставляют дополнительную информацию или изменяют поведение тега(например, class , id , style ).
  • Содержимое: текст или элементы, заключенные в открывающие и закрывающие теги.

Категории HTML-тегов

HTML-теги можно в целом классифицировать по их функциональности:

  • Структурные теги: определяют структуру веб-страницы. <ul class="wp-block-list">
  • <html> : Корневой элемент HTML-документа.
  • <head> : Содержит метаданные и ссылки на таблицы стилей или скрипты.
  • <body> : Содержит видимое содержимое страницы.
  • Теги форматирования текста: стиль и форматирование текста. <ul class="wp-block-list"> <li> <p> : Определяет абзац.
  • <h1> to <h6> : Определение заголовков разных уровней.
  • <strong> , <em> , <mark> : применение жирного, курсивного или выделенного стиля текста.
  • Теги ссылок и медиа: встраивайте ссылки и медиа-элементы. <ul class="wp-block-list"> <li> <a> : Определяет гиперссылки.
  • <img> : Встраивает изображения.
  • <video> , <audio> : Встраивание мультимедийного контента.
  • Теги форм и ввода: создание интерактивных форм. <ul class="wp-block-list"> <li> <form> : Определяет форму для пользовательского ввода.
  • <input> : Определяет поля ввода.
  • <button> , <select> , <textarea> : Добавить кнопки, раскрывающиеся списки и текстовые области.
  • Теги таблиц: организация данных в табличном формате. <ul class="wp-block-list"> <li> <table> : Определяет таблицу.
  • <tr> , <td> , <th> : Определение строк и ячеек.
  • <thead> , <tbody> , <tfoot> : Определение разделов таблицы.
  • Семантические теги: обеспечивают осмысленную структуру. <ul class="wp-block-list"> <li> <header> , <footer> : Определение разделов верхнего и нижнего колонтитула.
  • <article> , <section> , <aside> : Семантическая организация контента.
  • <nav> : Представляет навигационные ссылки.

    • Пустые теги против парных тегов

    HTML-теги делятся на два типа:

    • Пустые теги: эти теги не имеют закрывающего тега и являются самозакрывающимися. Примеры: <ul class="wp-block-list">
    • <img> : Встраивает изображение.
    • <br> : Вставляет перенос строки.
    • <hr> : Вставляет горизонтальную линию.
  • Парные теги: эти теги содержат как открывающий, так и закрывающий теги. Примеры: <ul class="wp-block-list"> <li> <p>...</p> : Определяет абзац.
  • <div>...</div> : Определяет контейнер.
  • <span>...</span> : Определяет встроенный текст.

    • Таблица тегов HTML

    В следующей таблице мы рассмотрели все теги HTML, где каждый тег ведет к отдельному руководству по соответствующему тегу, а также для каждого тега дано краткое описание.

    Ярлык Описание
    <а> Определяет гиперссылку.
    <аббр> Определяет аббревиатуру или акроним.
    <адрес> Определяет контактную информацию автора/владельца документа.
    <область> Определяет область внутри карты изображения.
    <статья> Определяет статью.
    <в сторону> Определяет контент отдельно от содержимого страницы.
    <аудио> Определяет встроенный звуковой контент.
    <б> Определяет жирный текст.
    <база> Указывает базовый URL/целевой адрес для всех относительных URL в документе.
    <bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении.
    <бдо> Переопределяет текущее направление текста.
    <блокцитата> Определяет раздел, цитируемый из другого источника.
    <тело> Определяет тело документа.
    Определяет одинарный перенос строки.
    <кнопка> Определяет кнопку, на которую можно нажать.
    <холст> Используется для рисования графики с помощью скриптов(обычно JavaScript).
    <подпись> Определяет заголовок таблицы.
    <цитировать> Определяет название произведения.
    <код> Определяет фрагмент компьютерного кода.
    <col> Задает свойства столбца для каждого столбца в элементе <colgroup>.
    <colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования.
    <данные> Связывает контент с машиночитаемым значением.
    <datalist> Задает список предопределенных параметров для элемента ввода.
    <дд> Определяет описание/значение термина в списке описаний.
    <del> Определяет текст, который был удален.
    <подробности> Определяет дополнительные сведения, которые пользователь может просматривать или скрывать.
    <дфн> Представляет собой определяющий пример термина.
    <диалог> Определяет диалоговое окно или интерактивный компонент.
    <div> Определяет раздел или секцию в документе.
    <дл> Определяет список описаний.
    <дт> Определяет термин/имя в списке описаний.
    <эм> Определяет выделенный текст.
    <встроить> Определяет контейнер для внешнего(не HTML) приложения.
    <набор_полей> Группирует связанные элементы в форме.
    <figcaption> Определяет подпись для элемента <figure>.
    <рисунок> Указывает на самодостаточный контент.
    <нижний колонтитул> Определяет нижний колонтитул документа или раздела.
    <форма> Определяет HTML-форму для ввода данных пользователем.
    <h1> Определяет заголовок HTML: Заголовок 1.
    <h2> Определяет заголовок HTML: Заголовок 2.
    <h3> Определяет заголовок HTML: Заголовок 3.
    <h4> Определяет заголовок HTML: Заголовок 4.
    <h5> Определяет заголовок HTML: Заголовок 5.
    <h6> Определяет заголовок HTML: Заголовок 6.
    <голова> Содержит метаданные/информацию о документе.
    <заголовок> Определяет заголовок документа или раздела.
    <ч> Определяет тематическое изменение содержания.
    <html> Определяет корень HTML-документа.
    <я> Определяет часть текста, произнесенную другим голосом или в другом настроении.
    <iframe> Определяет встроенный фрейм.
    <img> Определяет изображение.
    <вход> Определяет элемент управления вводом.
    <ins> Определяет вставленный текст.
    <кбд> Определяет ввод с клавиатуры.
    <метка> Определяет метку для элемента ввода.
    <легенда> Определяет заголовок для элемента <fieldset>.
    <ли> Определяет элемент списка.
    <ссылка> Определяет связь между документом и внешним ресурсом.
    <главная> Определяет основное содержание документа.
    <карта> Определяет карту изображений на стороне клиента.
    <отметка> Определяет выделенный/выделенный текст.
    <мета> Определяет метаданные HTML-документа.
    <метр> Определяет скалярное измерение в известном диапазоне.
    <нав> Определяет навигационные ссылки.
    <noscript> Определяет альтернативный контент для пользователей, которые не поддерживают клиентские скрипты.
    <объект> Определяет контейнер для внешнего ресурса.
    <ол> Определяет упорядоченный список.
    <optgroup> Определяет группу связанных параметров в раскрывающемся списке.
    <опция> Определяет опцию в раскрывающемся списке.
    <выход> Определяет результат расчета.
    <п> Определяет абзац.
    <картинка> Определяет контейнер для нескольких ресурсов изображений.
    <пред> Определяет предварительно отформатированный текст.
    <прогресс> Показывает ход выполнения задачи.
    <q> Определяет короткую цитату.
    <rp> Определяет, что отображать в браузерах, не поддерживающих аннотации Ruby.
    <рт> Определяет объяснение/произношение символов.
    <рубин> Определяет аннотацию Ruby.
    <с> Определяет текст, который больше не является правильным.
    <самп> Определяет пример выходных данных компьютерной программы.
    <скрипт> Определяет клиентский скрипт.
    <раздел> Определяет раздел в документе.
    <выбрать> Определяет раскрывающийся список.
    <маленький> Определяет более мелкий текст.
    <источник> Определяет несколько медиаресурсов для медиаэлементов.
    <пространство> Определяет встроенный раздел в документе.
    <strong> Определяет важный текст.
    <стиль> Определяет информацию о стиле для документа.
    <sub> Определяет подстрочный текст.
    <резюме> Определяет видимый заголовок для элемента <details>.
    <sup> Определяет надстрочный текст.
    <svg> Определяет контейнер для графики SVG.
    <таблица> Определяет таблицу.
    <тело> Группирует содержимое тела в таблицу.
    <тд> Определяет ячейку в таблице.
    <шаблон> Определяет контейнер для содержимого, которое должно быть скрыто при загрузке страницы.
    <текстовая область> Определяет многострочный элемент управления вводом(текстовую область).
    <tfoot> Группирует содержимое нижнего колонтитула в таблицу.
    Определяет ячейку заголовка в таблице.
    <заголовок> Группирует содержимое заголовка в таблицу.
    <время> Определяет конкретный момент времени.
    <название> Определяет название документа.
    Определяет строку в таблице.
    <трек> Определяет текстовые дорожки для элементов мультимедиа.
    <u> Определяет текст, который должен стилистически отличаться от обычного текста.
    <ул> Определяет неупорядоченный список.
    <var> Определяет переменную.
    <видео> Определяет встроенный видеоконтент.
    <wbr> Определяет возможный разрыв строки.