Теги html с пояснением

Содержание

Таблица основных тегов html с примерами
Базовые теги
Форматирование текста
Встраивание элементов
Работа с таблицами
Создание форм и кнопок
Справочник по HTML
Типы тегов

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

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

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

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

Базовые теги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Тег	Описание
	Определяет комментарий
	Определяет тип документа
	Определяет гиперссылку
	Определяет абревиатуру или акроним
	Не поддерживается в HTML5. Используйте вместо этого. Определяет акроним
	Определяет контактную информацию автора / владельца документа
	Не поддерживается в HTML5. Используйте или вместо этого. Определяет встроенный аплет
	Определяет область внутри карты изображения
	Определяет статью
	Определяет содержание, кроме содержания страницы (в стороне)
	Определяет звуковой контент
	Определяет жирный текст
	Указывает базовый URL-адрес / цель для всех относительных URL-адресов документа
	Не поддерживается в HTML5. Используйте CSS вместо этого. Отпределяет цвет, размер и шрифт по умолчанию для всего текста документа
	Изолирует часть текста, который может быть отформатирован в другом направлении от иного текста за его пределами
	Переопределяет текущее направление текста
	Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет увеличенный текст
	Определяет раздел, который цитируется с другого источника
	Определяет тело документа
	Определяет разрыв строки
	Определяет кнопку, которую можно нажимать
	Используется для рисования на лету, с помощью сценариев (обычно на JavaScript)
	Определяет подпись к таблице
	Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет центрирование текста
	Определяет название произведения при цитировании из него
	Определяет фрагмент компьютерного кода
	Указывает свойства столбцов для каждого столбца в элементе
	Определяет группу с одного или нескольких столбцов в таблице для форматирования
	Связывает заданный контент с машиночитаемым переводом
	Определяет список предварительно определённых параметров управления вводом
	Определяет описание / значение термина в списке описания
	Определяет удалённый с документа текст
	Определяет дополнительные детали, которые пользователь может просматривать или прятать
	Задаёт термин, для которого будет дано определение (definition)
	Определяет диалоговый бокс или окно
	Не поддерживается в HTML5. Используйте вместо этого. Определяет список каталогов
	Определяет раздел (блочный) в документе
	Определяет список описаний
	Определяет термин / имя в списке описания
	Определяет семантически подчёркнутый текст (empharized)
	Определяет контейнер для внешнего (не HTML) приложения
	Группы связанных элементов в форме
	Определяет заголовок для элемента
	Определяет автономное содержание
	Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет шрифт, цвет и размер текста
	Определяет нижний колонтитул (футер) для документа или раздела
	Определяет HTML форму для ввода пользователем
	Не поддерживается в HTML5. Определяет окно (фрейм) в наборе фреймов
	Не поддерживается в HTML5. Определяет набор фреймов
to	Определяет HTML заголовки
	Определяет информацию о документе
	Определяет заголовок для документа или раздела
	Определяет тематическую смену контента
	Определяет корень HTML-документа
	Определяет часть текста альтернативным голосом или настроением
	Определяет встроенный фрейм
	Определяет изображение
	Определяет элемент управления вводом
	Определяет текст, который был вставлен в документ
	Определяет ввод с клавиатуры
	Определяет метку для элемента
	Определяет заголовок для элемента
	Определяет элемент списка
	Определяет взаимосвязь между документом и внешним ресурсом (обычно используется для ссылки на внешние таблицы стилей)
	Определяет основное содержание документа
	Определяет карту изображения на стороне клиента
	Определяет помеченный (маркированный) / выделенный текст
	Определяет метаданные HTML документа
	Определяет скалярное измерение в пределах известного диапазона (датчик)
	Определяет навигационные ссылки (навигация по сайту)
	Не поддерживается в HTML5. Определяет альтернативное содержание для пользователей, которые не поддерживают фреймы
	Определяет альтернативное содержание для пользователей, которые не поддерживают скрипты на стороне клиента
	Определяет встроенный объект
	Определяет упорядоченный (нумерованный) список
	Определяет группу соответствующих параметров в выпадающем списке (выпадающем меню)
	Определяет параметр в выпадающем списке
	Определяет результат расчёт (калькуляции)
	Определяет параграф (абзац)
	Определяет параметр для объекта
	Определяет контейнер для нескольких ресурсов изображения
	Определяет предварительно отформатированный текст
	Представляет ход выполнения задания
	Определяет короткую цитату
	Определяет, что показывать в браузерах, которые не поддерживают ruby аннотации
	Определяет пояснения / произношение символов (для восточноазиатской типографики)
	Определяет аннотацию ruby (для восточноазиатской типографики)
	Определяет текст, который больше не является правильным
	Определяет исходные данные с компьютерной программы
	Определяет скрипт на стороне клиента
	Определяет раздел (секцию) в документе
	Определяет выпадающий список
	Определяет меньший текст
	Определяет несколько медиа-ресурсов для медиа-элементов ( и )
	Определяет раздел (строчный) в документе
	Не поддерживается в HTML5. Используйте или вместо этого. Определяет перечеркнутый текст
	Определяет семантически важный текст
	Определяет информацию о стиле в документе
	Определяет подстрчный текст (нижний индекс)
	Определяет видимый заголовок для элемента
	Определяет надстрочный текст (верхний индекс)
	Определяет контейнер для графики SVG
	Определяет таблицу
	Группирует содержание тела в таблице
	Определяет клетку (ячейку) в таблице
	Определяет шаблон
	Определяет многострочный элемент управления вводом (текстовая область)
	Группирует содержание нижнего колонтитула в таблице
	Определяет ячейку заголовка в таблице
	Группирует содержание заголовка в таблице
	Определяет дату / время
	Определяет заголовок документа
	Определяет строку в таблице
	Определяет текстовые дорожки для медиа-элементов ( и )
	Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет текст телетайпа
	Определяет текст, который должен быть стилистически отличным от обычного текста
	Определяет неупорядоченный (ненумерованный) список
	Определяет переменную
	Определяет видео или фильм
	Определяет возможный разрыв строки

Источник

Справочник по HTML

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.