Все html теги с описанием — справочник со списком кодов
В этом справочнике мы рассмотрим все основные html теги, которые пригодятся при создании сайтов и веб-документов. Вы узнаете, что это такое и для чего нужно. Также на примерах я покажу как это все используется.
Что такое html теги
Одни теги говорят браузеру, что нужно отобразить абзац. Другие, что нужно отобразить заголовок. Третьи, что нужно сделать таблицу. С помощью таких команд мы общаемся с браузером и как бы программируем его действия.
Парный html тег с атрибутом
Между угловыми скобками обязательно должны присутствовать кодовые слова. Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html. Например, выделение текста жирным:
Ниже мы еще к этому вернемся.
Стоит сказать, что теги пишутся маленькими латинскими буквами. Хотя нет ничего страшного если вы их напишите большими. Однако стандарт подразумевает писать их в нижнем регистре.
У тега могут быть атрибуты.
Виды хтмл тегов
Все хтмл теги подразделяются на два вида:
Парные имеют открывающий и закрывающий тег. Также между этими двумя элементами обязательно должен присутствовать какой-то контент или другие теги. Причем уровень вложенности не ограничен.
К примеру, если вам нужно вставить абзац, то сначала ставим открывающий тег
. Это будет начало абзаца. Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег
[ads_custom_box title=»Обратите внимание!» color_border=»#e87e04″]К закрывающему элементу всегда добавляется слеш. Благодаря ему браузер понимает, где заканчивается команда. В данном примере конец абзаца.[/ads_custom_box]
Если же нам нужно выделить определенный участок текста жирным, то здесь тоже делаем по аналогии.
Сначала из справочника (будет ниже) подбираем нужный тег, который выделяет текст жирным. Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.
Наглядный пример выделения
Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.
Основные html теги
Сейчас затронем основные html теги, которые имеют важную роль среди остальных элементов. Такие команды обязательно должны присутствовать на каждой странице.
Doctype предназначен для определения типа документа. То есть по нему браузер понимает, что это html-документ, а не что-либо еще.
Тег HTML — это контейнер, который имеет основное содержимое страницы. Контейнером называется потому что у него есть парный тег (открывающий и закрывающий). Абсолютно все элементы (кроме doctype) должны быть вложены в этот контейнер.
Head содержит в себе служебные теги. Они предназначены для работы поисковых систем и браузеров. Обычно эта информация не видна пользователю.
Body — это основное тело страницы. Она содержит рабочие элементы, которые видны пользователям. Как правило, это информационный контент.
Вот так выглядит скелет любой html-страницы:
Справочник HTML
Здесь расположен справочник html тегов. Словарь содержит все основные команды, которые можно использовать для создания сайта и веб-документов.
Все теги имеют описание. А при переходе по ссылке, можно более подробно узнать о данном элементе. Там вы увидите подробные определения и примеры использования.
Тег html
О нем говорили выше. Это главный контейнер, который содержит почти все элементы страницы. Закрывающая его часть всегда должна идти в самом конце документа.
| Имя | Описание | Значение свойства display |
| корневой элемент html-документа | block |
Служебные
Служебные теги предназначены для поисковых систем и браузеров. Браузеры по ним определяют тип документа и его интерпретацию. А поисковым системам важно для четкого сканирования документа и его ранжирования в выдаче.
| Имя | Описание | Значение свойства display |
| комментарий | none | |
| объявление типа документа | none | |
| контейнер для метаданных html-документа | none | |
| заголовок / имя html-документа | none | |
| мета-данные веб-страницы | none | |
| подключает внешние таблицы стилей | none | |
| подключает сценарии к странице | none | |
| подключает встраиваемые таблицы стилей | none | |
| базовый url-адрес, относительно которого вычисляются относительные адреса | none | |
| секция, не поддерживающая скрипт | block |
HTML теги для текста
Здесь расположены основные html теги для работы с текстом на странице. Как правило, это различные выделения, подчеркивания, вставка заголовков и так далее.
Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.
| Имя | Описание | Значение свойства display |
| параграфы в тексте | block | |
| перенос текста на новую строку | none | |
| горизонтальная линия | block | |
| возможное место разрыва длинной строки | none | |
| большая цитата | block | |
| источник цитирования | inline | |
| краткая цитата | inline | |
| фрагмент программного кода | inline | |
| текст, вводимый пользователем с клавиатуры | inline | |
| выводит текст с пробелами и переносами | block | |
| результат выполнения сценария | inline | |
| выделяет переменные из программ | inline | |
| перечёркивает текст, помечая как удаленный | inline | |
| перечёркивает неактуальный текст | inline | |
| выделяет термин курсивом | inline | |
| выделяет важные фрагменты текста курсивом | inline | |
| выделяет текст курсивом без акцента | inline | |
| выделяет полужирным важный текст | inline | |
| задает полужирное начертание отрывка текста, без дополнительного акцента | inline | |
| подчёркивает изменения в тексте | inline | |
| выделяет отрывок текста подчёркиванием, без дополнительного акцента | inline | |
| выделяет фрагменты текста желтым фоном | inline | |
| отображает текст шрифтом меньшего размера | inline | |
| подстрочное написание символов | inline | |
| надстрочное написание символов | inline | |
| дата / время документа или статьи | inline | |
| аббревиатура или акроним | none | |
| контактные данные автора документа или статьи | block | |
| изолирует текст, читаемый справа налево | inline | |
| задаёт направление написания текста | inline | |
| контейнер для Восточно-Азиатских символов и их расшифровки | inline | |
| тег для скобок вокруг символов | none | |
| расшифровка символов | block |
Теги таблицы html
Здесь расположены html теги для создания таблиц. Такие элементы тоже рекомендую использовать на странице. Особенно в аналитических каких-то материалах. Так пользователи могут быстро сориентироваться в ваших данных.
| Имя | Описание | Значение свойства display |
| html-таблица | table | |
| строка таблицы | table-row | |
| заголовок столбца таблицы | table-cell | |
| ячейка таблицы | table-cell | |
| блок заголовков таблицы | table-header-group | |
| тело таблицы | table-row-group | |
| нижний колонтитул таблицы | table-footer-group | |
| подпись к таблице | table-caption | |
| выбирает для форматирования столбцы | table-column | |
| контейнер для одного или нескольких | table-column-group |
Картинки
Обязательно используйте тег картинки в html-документе. Тоже полезно при восприятии и усвоения информации. Еще полезно и в SEO. Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.
| Имя | Описание | Значение свойства display |
| html-изображения | inline | |
| активные области на карте-изображении | inline | |
| гиперссылка с текстом или активная область внутри карты-изображения | inline | |
| холст-контейнер для динамического отображения изображений | inline-block |
Списки
Теги списка тоже рекомендую использовать. Очень полезно при каком-то перечислении или создании пошаговой инструкции. Информацию в списке старайтесь давать максимально коротко и понятно. То есть не делать длинных предложений.
| Название | Описание | Значение свойства display |
| упорядоченный нумерованный список | block | |
| маркированный список | block | |
| элемент списка | list-item | |
| контейнер для термина и его описания | block | |
| задаёт термин | block | |
| расшифровывает термин | block |
Ссылки
Тег ссылки в html всегда один. Будьте осторожны при его использовании. Всегда проверяйте, куда вы ссылаетесь. То есть, что это за сайт и релевантен ли он данной теме. Также в атрибуте данного тега внимательно прописывайте адрес перехода.
Если что-то сделаете не так, то вас перебросит на страницу с 404 ошибкой. Это плохо для юзабилити и продвижения сайта в целом. Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!
| Название | Описание | Значение свойства display |
| гиперссылка | inline |
Встраиваемый контент
Контент, который можно встроить в основное тело страницы. Также полезно для восприятия информации. Например, вы сначала написали текстовую инструкцию. После этого в самом конце можно вставить видео с наглядной демонстрацией работы.
| Имя | Описание | Значение свойства display |
| добавляет аудио-файлы | inline-block | |
| добавляет видео-файлы | inline-block | |
| указывает местоположение и тип альтернативных файлов для и | none | |
| субтитры для элементов и | none | |
| встраивает внешний интерактивный контент или плагин | inline-block | |
| контейнер для встраивания мультимедиа | inline-block | |
| задаёт параметры для плагинов, встраиваемых с помощью элемента | none | |
| создаёт встроенный фрейм | block |
Группировка контента
Дополнительная группировка контента по различным секциям страницы. Своего рода семантическая структура страницы. Очень полезно для юзабилити сайта.
Структура страницы
К примеру, постраничная навигация позволяет разбивать длинные страницы архивов на несколько подстраниц. Это улучшает как удобство пользования, так и скорость загрузки страницы.
HTML-теги и атрибуты, о которых вы, возможно, не знали
Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
blockquote и cite
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
Тег code используется для определения части компьютерного кода:
Для форматирования блока кода code часто используется совместно с тегом pre :
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
details
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).
dialog
Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Так можно записать уровень заряда батареи вашего устройства в значение meter :
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Так можно реализовать десятисекундный таймер:
output
Тег output используется для представления результата вычислений.
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
noscript
Другие теги в форме шпаргалок
Семантическое «секционирование» страницы
Стилизация текста
Форма
Поля для ввода данных
Пример валидации адреса электронной почты и пароля:
Таблица
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Послесловие
Наши виртуалки можно использовать для разработки веб-сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
