Справочник по тегам HTML элементов
В мире веб-разработки теги играют ключевую роль в создании структуры и содержимого веб-страниц!
Введение в HTML Теги
HTML (HyperText Markup Language) – это язык разметки, используемый для создания веб-страниц. Одним из основных инструментов HTML являются теги, которые определяют структуру и визуализацию содержимого веб-страницы. Здесь вы узнаете, что такое HTML теги и как их использовать.
Функциональность HTML Тегов
HTML теги представляют собой элементы кода, заключенные в угловые скобки (< >). Каждый тег имеет свое название и определяет определенный тип содержимого. Открывающий тег указывает начало определенного элемента, а закрывающий тег – его конец.
Элемент HTML — это тип компонента документа HTML, один из нескольких типов узлов. Элементы HTML размещаются между тегами:
<имя тега>
Элементы находятся здесь...
</имя тега>
Использование HTML Тегов в Практике
Для использования HTML тегов необходимо разбираться в их назначении и правильном форматировании. При создании веб-страницы важно следовать семантике и правильно структурировать контент с помощью тегов.
Одним из популярных текстовых редакторов для написания HTML кода является Visual Studio Code, который предоставляет удобный редактор с подсветкой синтаксиса и подсказками тегов.
HTML теги играют ключевую роль в создании веб-страниц, позволяя структурировать и визуально оформлять информацию. Понимание основных категорий HTML тегов и их использование поможет создавать качественные и удобочитаемые веб-страницы.
Список HTML Тегов
Этот справочник содержит список тегов и их описания, а также ссылки на страницы тегов с их подробным описанием.
Базовые теги HTML
| Тег |
Описание |
| <!DOCTYPE> |
Определяет тип документа |
| <html> |
Определяет документ HTML |
| <head> |
Содержит метаданные/информацию для документа |
| <title> |
Определяет заголовок документа |
| <body> |
Определяет тело документа |
| От <h1> до <h6> |
Определяет заголовки HTML |
| <p> |
Определяет абзац |
| <br> |
Вставляет одиночный разрыв строки |
| <hr> |
Определяет тематическое изменение содержания |
| <!--...--> |
Определяет комментарий |
Теги форматирования (Formatting)
| Тег |
Описание |
| <acronym> |
Не поддерживается в HTML5. Вместо этого используйте <abbr>
Определяет аббревиатуру |
| <abbr> |
Определяет аббревиатуру или акроним |
| <address> |
Определяет контактную информацию для автора/владельца документа/статьи |
| <b> |
Определяет полужирный текст |
| <bdi> |
Изолирует часть текста, которая может быть отформатирована в направлении, отличном от другого текста за ее пределами |
| <bdo> |
Переопределяет текущее направление текста |
| <big> |
Не поддерживается в HTML5. Вместо этого используйте CSS
Определяет большой текст |
| <blockquote> |
Определяет раздел, который цитируется из другого источника |
| <center> |
Не поддерживается в HTML5. Вместо этого используйте CSS
Определяет центрированный текст |
| <cite> |
Определяет название произведения |
| <code> |
Определяет часть компьютерного кода |
| <del> |
Определяет текст, который был удален из документа |
| <dfn> |
Указывает термин, который будет определен в содержимом |
| <em> |
Определяет выделенный текст |
| <font> |
Не поддерживается в HTML5. Вместо этого используйте CSS
Определяет шрифт, цвет и размер текста |
| <i> |
Определяет часть текста в другом тоне или настроении |
| <ins> |
Определяет текст, который был вставлен в документ |
| <kbd> |
Определяет ввод с клавиатуры |
| <mark> |
Определяет помеченный/выделенный текст |
| <meter> |
Определяет скалярное измерение в пределах известного диапазона (датчик) |
| <pre> |
Определяет предварительно отформатированный текст |
| <progress> |
Представляет ход выполнения задачи |
| <q> |
Определяет короткую цитату |
| <rp> |
Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации |
| <rt> |
Определяет объяснение/произношение символов (для восточноазиатской типографики) |
| <ruby> |
Определяет рубиновую аннотацию (для восточноазиатской типографики) |
| <s> |
Определяет текст, который больше не является правильным |
| <samp> |
Определяет образец вывода из компьютерной программы |
| <small> |
Определяет меньший текст |
| <strike> |
Не поддерживается в HTML5. Вместо этого используйте <del> или <s>
Определяет зачеркнутый текст |
| <strong> |
Определяет важный текст |
| <sub> |
Определяет подстрочный текст |
| <sup> |
Определяет текст с надстрочным индексом |
| <template> |
Определяет контейнер для содержимого, которое должно быть скрыто при загрузке страницы |
| <time> |
Определяет конкретное время (или datetime) |
| <tt> |
Не поддерживается в HTML5. Вместо этого используйте CSS
Определяет текст телетайпа |
| <u> |
Определяет текст, который не артикулирован и оформлен иначе, чем обычный текст |
| <var> |
Определяет переменную |
| <wbr> |
Определяет возможный разрыв строки |
Формы и ввод (Forms and Input)
| Тег |
Описание |
| <form> |
Определяет форму HTML для пользовательского ввода |
| <input> |
Определяет элемент управления вводом |
| <textarea> |
Определяет элемент управления многострочным вводом (текстовая область) |
| <button> |
Определяет кликабельную кнопку |
| <select> |
Определяет раскрывающийся список |
| <optgroup> |
Определяет группу связанных параметров в раскрывающемся списке |
| <option> |
Определяет параметр в раскрывающемся списке |
| <label> |
Определяет метку для элемента <input> |
| <fieldset> |
Группирует связанные элементы в форме |
| <legend> |
Определяет заголовок для элемента <fieldset> |
| <datalist> |
Задает список предопределенных параметров для элементов управления вводом |
| <output> |
Определяет результат вычисления |
Фреймы (Frames)
| Тег |
Описание |
| <frame> |
Не поддерживается в HTML5
Определяет окно (фрейм) в наборе фреймов |
| <frameset> |
Не поддерживается в HTML5
Определяет набор фремов |
| <noframes> |
Не поддерживается в HTML5
Определяет альтернативный контент для пользователей, не поддерживающих фреймы |
| <iframe> |
Определяет встроенный фрейм |
Изображения (Images)
| Тег |
Описание |
| <img> |
Определяет изображение |
| <map> |
Определяет карту изображения на стороне клиента |
| <area> |
Определяет область внутри карты изображения |
| <canvas> |
Используется для рисования графики на лету с помощью сценариев (обычно JavaScript) |
| <figcaption> |
Определяет заголовок для элемента <figure> |
| <picture> |
Определяет контейнер для нескольких ресурсов изображений |
| <svg> |
Определяет контейнер для графики SVG |
Аудио и Видео теги (Audio / Video)
| Тег |
Описание |
| <audio> |
Определяет звуковое содержимое |
| <source> |
Определяет несколько медиа-ресурсов для медиа-элементов (<video>, <audio> и <picture>) |
| <track> |
Определяет текстовые дорожки для медиа-элементов (<video> и <audio>) |
| <video> |
Определяет видео или фильм |
Ссылки (Links)
| Тег |
Описание |
| <a> |
Определяет гиперссылку |
| <link> |
Определяет связь между документом и внешним ресурсом (чаще всего используется для ссылки на таблицы стилей) |
| <nav> |
Определяет навигационные ссылки |
Списки (Lists)
| Тег |
Описание |
| <ul> |
Определяет неупорядоченный список |
| <ol> |
Определяет упорядоченный список |
| <li> |
Определяет элемент списка |
| <dir> |
Не поддерживается в HTML5. Вместо этого используйте <ul>
Определяет список каталогов |
| <dl> |
Определяет список описаний |
| <dt> |
Определяет термин/имя в списке описаний |
| <dd> |
Определяет описание термина/имени в списке описаний |
Таблицы (Tables)
| Тег |
Описание |
| <table> |
Определяет таблицу |
| <caption> |
Определяет заголовок таблицы |
| <th> |
Определяет ячейку заголовка в таблице |
| <tr> |
Определяет строку в таблице |
| <td> |
Определяет ячейку в таблице |
| <thead> |
Группирует содержимое заголовка в таблице |
| <tbody> |
Группирует содержимое тела в таблице |
| <tfoot> |
Группирует содержимое нижнего колонтитула в таблице |
| <col> |
Задает свойства столбца для каждого столбца в элементе <colgroup> |
| <colgroup> |
Указывает группу из одного или нескольких столбцов в таблице для форматирования |
Стили и семантика (Styles & Semantics)
| Тег |
Описание |
| <style> |
Определяет информацию о стиле для документа |
| <div> |
Определяет раздел в документе |
| <span> |
Определяет раздел в документе |
| <header> |
Определяет заголовок для документа или раздела |
| <footer> |
Определяет нижний колонтитул для документа или раздела |
| <main> |
Определяет основное содержание документа |
| <section> |
Определяет раздел в документе |
| <article> |
Определяет статью |
| <aside> |
Определяет содержимое отдельно от содержимого страницы |
| <details> |
Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть |
| <dialog> |
Определяет диалоговое окно или окно |
| <summary> |
Определяет видимый заголовок для элемента <details> |
| <data> |
Добавляет машиночитаемый перевод данного контента |
Мета информация (Meta Info)
| Тег |
Описание |
| <head> |
Определяет информацию о документе |
| <meta> |
Определяет метаданные о HTML-документе |
| <base> |
Указывает базовый URL-адрес / цель для всех относительных URL-адресов в документе |
| <basefont> |
Не поддерживается в HTML5. Вместо этого используйте CSS
Указывает цвет, размер и шрифт по умолчанию для всего текста в документе. |
Программирование (Programming)
| Тег |
Описание |
| <script> |
Определяет сценарий на стороне клиента |
| <noscript> |
Определяет альтернативный контент для пользователей, которые не поддерживают сценарии на стороне клиента |
| <applet> |
Не поддерживается в HTML5. Вместо этого используйте <embed> или <object>
Определяет встроенный апплет |
| <embed> |
Определяет контейнер для внешнего приложения |
| <object> |
Определяет внедренный объект |
| <param> |
Определяет параметр для объекта |
Рекомендация W3C, вторая редакция HTML 5.1:
Теги используются для разграничения начала и конца элементов в разметке. Начальный и конечный тег некоторых обычных элементов могут быть опущены. Содержимое элемента должно быть помещено между сразу после начального тега и непосредственно перед конечным тегом.
