Все теги html примерами

Справочник тегов HTML

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

Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.

Список тегов HTML

Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.

Тег Краткое описание
Комментарий. Подробнее
Определяет тип документа. Подробнее
Ссылка, гиперссылка, якорь. Подробнее
Определяет текст как аббревиатуру. Подробнее
Контактная информация автора или владельца документа. Подробнее
Определяет область на карте-изображении
Статья
Контент в стороне (содержимое не является основным на странице по смыслу)
Позволяет вставить воспроизводимый аудио файл. Подробнее
Полужирный текст. Подробнее
Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее
Область, где написание текста может имееть другое направления. Подробнее
Устанавливает направление написания текста. В отличии от направление указывается физическое направление Подробнее
Цитата. Подробнее
Указывает область body документа. Подробнее
Перенос строки. Подробнее
Кликабельная кнопка. Подробнее
Используется для рисовании графики с помощью скриптов
Подпись таблицы. Подробнее
Сноска на название материала. Подробнее
Используется для вставки компьютерного кода в текстовом виде. Подробнее
Задает характеристики колонок в таблице. Подробнее
Определяет группу из одной или более колонок таблицы для форматирования. Подробнее
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее
Определяет описание термина из тега в списке терминов . Подробнее
Текст, который удален в новой версии документа. Подробнее
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее
Указывает, что содержимое является термином. Подробнее
Определяет диалоговое окно или интерактивный элемент
Блочный элемент — один из основных элементов верстки. Подробнее
Определяет список определений. Подробнее
Название термина в списке определений . Подробнее
выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее
Контейнер для внешнего приложения
Группа связанных элементов в форме. Подробнее
Заголовок для элемента
Определяет автономную группу из нескольких элементов (например картинка с подписью)
Нижний колонтитул
Определяет форму пользовательского ввода. Подробнее
Заголовки HTML разного уровня: , , , , , . Подробнее
Указывает область head документа. Подробнее
Блок заголовка
Горизонтальная линия — тематический разделитель. Подробнее
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее
Выделяет текст курсивом. Подробнее
Определяет встроенный фрейм
Изображение, картинка. Подробнее
Поле для ввода, элемент формы. Подробнее
Текст, который был добавлен в новой версии документа. Подробнее
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее
Метка для поля ввода. Обычно содержит подпись поля. Подробнее
Заголовок элементов . Подробнее
Элемент списка. Подробнее
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее
Основной контент
Контейнер для . Определяет пользовательскую карту на изображении
Выделенный текст (обычно с помощью подсветки фона). Подробнее
Контейнер для списка пунктов меню
Определяет элементы, которые пользователь может вызвать из контекстного меню
Используется для определения мета-данных документа. Подробнее
Измеритель значений в заданном диапазоне
Контейнер для навигационных элементов
Альтернативный контент для пользователей, отключивших скрипты
Определяет встроенный объект
Определяет нумерованный список. Подробнее
Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее
Параметр (вариант выбора) в выпадающем списке. Подробнее
Результат вычислений. Подробнее
Абзац. Подробнее
Задает параметры для встроенных объектов
Контейнер для нескольких изображений
Предварительно отформатированный текст. Подробнее
Индикатор выполнения (прогресса)
Цитата в тексте. Подробнее
Альтернативный текст, если браузер не поддерживает тег . Подробнее
Аннотация к содержимому тега . Подробнее
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее
Перечеркнутый текст. Подробнее
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее
Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее
Раздел
Определяет выпадающий список или список с множественным выбором. Подробнее
Текст шрифтом меньшего размера. Подробнее
Определяет ресурс для тегов , и . Подробнее
Строчный элемент. Подробнее
Текст, выделенный по значению. Обычно отображается полужирным. Подробнее
Определяет контейнер для определения CSS стилей документа. Подробнее
Отображает текст в виде нижнего индекса. Подробнее
Заголовок внутри тега . Подробнее
Отображает текст в виде верхнего индекса. Подробнее
Определяет таблицу. Подробнее
Определяет область контента в таблице. Подробнее
Ячейка в таблице . Подробнее
Многострочное поле для ввода. Подробнее
Определяет группу строк в нижней части таблицы — нижний колонтитул. Подробнее
Ячейка — заголовок в таблице . Подробнее
Определяет группу строк в верхней части таблицы — верхний колонтитул. Подробнее
Дата и/или время. Подробнее
Заголовок HTML документа. Подробнее
Определяет строку в таблице. Подробнее
Определяет текстовую дорожку для тегов и Подробнее
Определяет маркированный список. Подробнее
Используется для обозначения содержимого тега как переменной. Подробнее
Позволяет вставить воспроизводимое видео. Подробнее
Место, где допускается перенос строки. Подробнее

Устаревшие теги HTML

Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.

Источник

Таблица основных тегов html с примерами

Таблица основных тегов html с примерами - uGuide.ru

HTML — язык разметки, который используется в большинстве веб-страниц. Браузер интерпретирует его значения (теги) и отображает текст и элементы так, как их представляли разработчики. Без стандартизированного языка страницы сайта превращались бы в мешанину из букв, картинок и форм, которой невозможно нормально пользоваться.

Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.

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

Базовые теги

— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

— показывает браузеру тип документа, сообщает его версию и язык.

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

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

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

— тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег имеет несколько атрибутов, позволяющих управлять цветами.

— цвет фона документа в формате RGB.

— цвет гиперссылок, по которым уже переходили.

— цвет гиперссылок при нажатии.

— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

— определяет содержимое блока с вводной информацией сайта или группой ссылок.

Форматирование текста

. . — теги заголовков, от самого большого к самому маленькому.

— жирный текст без придания важности выделенному фрагменту.

— расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

— выделение текста курсивом без придания важности.

— зачёркивает текст, помечая его удалённым.

— отображает перечёркнутый текст.

— подчёркивает текст, визуально выделяя внесённые изменения.

— подчёркивание без дополнительного акцентирования внимания.

— расставление акцентов путём выделения фрагментов текста курсивом.

— выделение частей текста жёлтым маркером.

— имитация текста, набранного на печатной машинке.

— отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.

— подстрочное начертание символов.

— надстрочное начертание символов.

— добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

— вывод неформатированного текста с сохранением пробелов и особенностей переносов.

— переносит текст на другую строку без создания абзаца.

— отступы с обеих сторон для оформления цитаты или врезки.

— контейнер для размещения термина и его определения.

— добавление определения понятия

— выделение термина курсивом. Последующий текст должен раскрывать понятие.

— указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

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

— выделение фрагмента кода с помощью шрифта monospace.

Встраивание элементов

— вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

— выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

— позволяет настроить в пикселях толщину рамки вокруг изображения.

— контейнер для расположения элемента без , который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

— вставка звукового контента.

— вставка видео (поддерживается Ogg, WebM и MP4).

— указывает местоположение файла для , и

— контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег .


— размещает на странице горизонтальную линию. Имеет несколько атрибутов.


— устанавливает высоту линии.


— устанавливает ширину линии.

— определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.

— ограничивает фрагмент документа, в котором скрипт не выполняется.

Работа с таблицами

— размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.

— указывает на заголовок ячейки.

— показывает нижний колонтитул.

— позволяет указать ширину и другие параметры одной или нескольких колонок.

Создание форм и кнопок

— создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.

— создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.

— формирует меню с поддержкой скроллинга.

— описывает каждый отдельный пункт меню.

— формирует поля для добавления пользовательских данных.

— выводит результаты вычислений, сделанных с помощью скрипта.

— оформляет пометку для поля, созданного тегом .

— создаёт большие поля для ввода текста.

Источник

Читайте также:  Document
Оцените статью