HTML теги
Теги это строительные блоки в HTML. Все что можно увидеть на веб-странице и с чем можно взаимодействовать реализовано при помощи тегов HTML.
В данном справочнике содержится информация обо всех тегах HTML 4.01 и HTML5 с описанием, примерами и атрибутами.
Базовые теги
| Вставляет комментарии | |
| body | Определяет тело HTML документа |
| br | Вставляет разрыв строки |
| DOCTYPE | Декларация типа HTML документа |
| h1-h6 | Определяют HTML заголовки |
| hr | Определяет тематический разрыв контента |
| html | Определяет, что это HTML-документ |
| p | Определяет текстовый параграф |
| title | Определяет титульный заголовок страницы |
Ссылки
| a | Определяет гипертекстовую ссылку |
| link | Определяет ссылку на внешний ресурс |
| nav | Определяет набор ссылок навигации |
Форматирование
| abbr | Определяет аббревиатуру |
| acronym | Определяет акроним |
| address | Определяет информацию об авторе статьи или документа |
| b | Определяет жирное начертание текста |
| bdi | Изолирует текст от изменения направления вывода |
| bdo | Устанавливает направление вывода текста |
| big | Увеличивает размер текста |
| blockquote | Определяет цитату внутри документа |
| center | Используется для выравнивания текста по центру |
| cite | Определяет название работы, цитату или сноску на другой документ |
| code | Определяет программный код |
| del | Определяет удаленный текст |
| dfn | Определяет первое появление нового термина |
| em | Определяет акцентированный текст |
| font | Определяет характеристики шрифта текст |
| i | Устанавливает начертание текста курсивом |
| ins | Определяет новый добавленный текст |
| kbd | Определяет текст, набранный на клавиатуре |
| mark | Определяет выделенный текст |
| meter | Определяет оценочный индикатор |
| pre | Определяет заранее форматированный текст |
| progress | Определяет индикатор прогресса выполнения задачи |
| q | Определяет короткую цитату внутри документа |
| rp | Определяет текст для вывода в браузерах, не поддерживающих элемент |
| rt | Определяет небольшую аннотацию к тексту |
| ruby | Предназначен для добавления небольшой аннотации |
| s | Определяет нерелевантный текст |
| samp | Определяет текст, который является результатом вывода компьютерной программы |
| small | Уменьшает размер текста |
| strike | Определяет перечеркнутый текст |
| strong | Определяет важный текст |
| sub | Определяет текст в виде нижнего индекса |
| sup | Определяет текст в виде верхнего индекса |
| time | Определяет дату/время |
| tt | Определяет телетайпный текст |
| u | Определяет подчеркнутый текст |
| var | Определяет переменную компьютерной программы |
| wbr | Определяет место для переноса строки в тексте |
Программные объекты
| applet | Вставляет в код страницы Java апплет |
| embed | Определяет контейнер для внешнего приложения |
| noscript | Определяет контент, который будет отображаться, если браузер не поддерживает скрипты |
| object | Вставляет в код страницы программный объект |
| param | Определяет параметры для программных объектов |
| script | Определяет скрипты, исполняемые на стороне пользователя |
Изображения
| area | Определяет активные области в карте-изображении |
| canvas | Определяет область, в которой можно рисовать при помощи скриптов |
| figcaption | Определяет подпись к элементу |
| figure | Используется для группирования различных самодостаточных элементов |
| img | Вставляет изображение |
| map | Определяет карту-изображение |
Семантика и стили
| article | Определяет автономный контент |
| aside | Определяет блок сбоку от основного контента |
| details | Определяет дополнительную информацию |
| dialog | Создает диалоговое окно |
| div | Определяет блок кода HTML документа |
| footer | Определяет «подвал» документа или раздела |
| header | Определяет «шапку» документа или раздела |
| main | Определяет основное содержимое документа |
| section | Определяет раздел документа |
| span | Используется для группирования строчных элементов |
| style | Определяет CSS стили на уровне веб-страницы |
| summary | Определяет заголовок для элемента |
Аудио и видео
| audio | Позволяет в браузере проигрывать звуковые файлы |
| source | Определяет медиа ресурс для медиа элементов |
| track | Определяет текстовую дорожку для медиа элементов |
| video | Позволяет в браузере проигрывать видео файлы |
Мета-информация
| base | Определяет базовые URL для ссылок на странице |
| basefont | Определяет цвет, размер и шрифт текста по умолчанию |
| head | Является контейнером для всех головных элементов документа |
| meta | Определяет мета-информацию о HTML документе |
Формы и элементы ввода
| button | Определяет кнопку формы |
| datalist | Определяет предопределенные варианты значений для элемента |
| fieldset | Используется для группирования родственных элементов формы |
| form | Используется для создания HTML форм |
| input | Определяет поле ввода HTML формы |
| keygen | Определяет поле-генератор ключей |
| label | Определяет метку для элемента |
| legend | Определяет заголовок для элемента |
| optgroup | Используется для группирования родственных вариантов выбора |
| option | Определяет отдельные пункты в выпадающем списке выбора |
| output | Представляет результаты вычислительных операций |
| select | Используется для создания выпадающего списка |
| textarea | Определяет многострочное текстовое поле ввода |
Таблицы
| caption | Определяет пояснительный заголовок таблицы |
| col | Определяет свойства для каждого столбца таблицы |
| colgroup | Определяет группу из одного или более столбцов таблицы для форматирования |
| table | Определяет HTML таблицу |
| tbody | Группирует основное содержимое HTML таблицы |
| td | Определяет стандартную ячейку HTML таблицы |
| tfoot | Группирует содержимое нижнего колонтитула HTML таблицы |
| th | Определяет заголовочную ячейку HTML таблицы |
| thead | Группирует содержимое верхнего колонтитула HTML таблицы |
| tr | Определяет строку HTML таблицы |
Списки
| dd | Используется для создания определения термина в списке определений |
| dir | Определяет список директорий (системных папок) |
| dl | Создает список определений |
| dt | Создает термин в списке определений |
| li | Создает элемент списка |
| menu | Определяет список/меню команд |
| menuitem | Определяет команду/пункт меню |
| ol | Создает упорядоченный (нумерованный) список |
| ul | Создает неупорядоченный (маркированный) список |
Фреймы
| frame | Определяет фрейм внутри фреймовой структуры |
| frameset | Определяет фреймовую структуру |
| iframe | Определяет встроенный фрейм |
| noframes | Определяет информацию, которая выводится, когда нет поддержки фреймов |
Таблица основных тегов html с примерами
HTML — язык разметки, который используется в большинстве веб-страниц. Браузер интерпретирует его значения (теги) и отображает текст и элементы так, как их представляли разработчики. Без стандартизированного языка страницы сайта превращались бы в мешанину из букв, картинок и форм, которой невозможно нормально пользоваться.
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
— показывает браузеру тип документа, сообщает его версию и язык.
— корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или .
— тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.
— тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег имеет несколько атрибутов, позволяющих управлять цветами.
— цвет фона документа в формате RGB.
— цвет гиперссылок, по которым уже переходили.
— цвет гиперссылок при нажатии.
— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
— определяет содержимое блока с вводной информацией сайта или группой ссылок.
Форматирование текста
. . — теги заголовков, от самого большого к самому маленькому.
— жирный текст без придания важности выделенному фрагменту.
— расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
— выделение текста курсивом без придания важности.
— зачёркивает текст, помечая его удалённым.
— отображает перечёркнутый текст.
— подчёркивает текст, визуально выделяя внесённые изменения.
— подчёркивание без дополнительного акцентирования внимания.
— расставление акцентов путём выделения фрагментов текста курсивом.
— выделение частей текста жёлтым маркером.
— имитация текста, набранного на печатной машинке.
— отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
— подстрочное начертание символов.
— надстрочное начертание символов.
— добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
— вывод неформатированного текста с сохранением пробелов и особенностей переносов.
— переносит текст на другую строку без создания абзаца.
— отступы с обеих сторон для оформления цитаты или врезки.
— контейнер для размещения термина и его определения.
— добавление определения понятия
— выделение термина курсивом. Последующий текст должен раскрывать понятие.
— указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
— добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
— выделение фрагмента кода с помощью шрифта monospace.
Встраивание элементов
— вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:
— выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.
— позволяет настроить в пикселях толщину рамки вокруг изображения.
— контейнер для расположения элемента без , который даёт браузеру возможность самостоятельно выбрать подходящую картинку.
— вставка звукового контента.
— вставка видео (поддерживается Ogg, WebM и MP4).
— указывает местоположение файла для , и
— контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег .
— размещает на странице горизонтальную линию. Имеет несколько атрибутов.
— устанавливает высоту линии.
— устанавливает ширину линии.
— определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
— ограничивает фрагмент документа, в котором скрипт не выполняется.
Работа с таблицами
— размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.
— указывает на заголовок ячейки.
— показывает нижний колонтитул.
— позволяет указать ширину и другие параметры одной или нескольких колонок.
Создание форм и кнопок
— создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
— создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
— формирует меню с поддержкой скроллинга.
— описывает каждый отдельный пункт меню.
— формирует поля для добавления пользовательских данных.
— выводит результаты вычислений, сделанных с помощью скрипта.
— оформляет пометку для поля, созданного тегом .
— создаёт большие поля для ввода текста.