Главная
›
Новости
Основные теги html. Таблица тегов
Опубликовано: 24.10.2017
Я решил создать табличку, в которой вы можете посмотреть на основные теги языка html, а также для чего они нужны. Теги разделены по категориям, чтобы было удобнее ориентироваться.
Каждый тег записывается в угловых скобках, вот так: <название тега>. Для собственного удобства я вывел в таблице только названия тегов без угловых скобок.
Тег
Что означает
Подробнее
Базовые |
!doctype |
Определяет тип документа |
Определяет, как именно обрабатывать страницу. |
html |
Весь документ |
Является контейнером для всех элементов на веб-странице |
body |
Тело страницы |
Все содержимое страницы, которое будет выведено на экран, ее структура |
head |
Важная информация о странице |
Не будет выведена на экран, но нужна для работы сайта (кодировка, подключение таблицы стилей и т.д.) |
title |
Название страницы |
Главное название, будет выводиться в поисковике и в верхней строке браузера |
link |
Подключает внешние файлы |
С помощью этого тега подключаются таблицы стилей и другие внешние файлы |
script |
Подключает javascript-файлы |
Обязательный атрибут — src, в котором указывается путь к файлу |
meta |
Задает мета-информацию |
Мета-информация включает в себя кодировку и метатеги. |
Семантические теги html5 |
header |
Создает шапку сайта или раздела |
На страице может быть несколько таких тегов. Header может формировать как шапку сайта в целом, так и шапку статьи и т.д. |
footer |
Тег для создания подвала сайта или раздела |
Аналогичен по своему смыслу предыдущему элементу, но создан для создания в нем нижней части сайта |
article |
Контейнер для вывода в нем контента (основной текстовой информации) |
Основной текст, который присутствует на вашей странице, нужно заключить в этот тег. |
aside |
Выводит побочную информацию, не относящуюся к основной |
Контейнер для вывода в нем различных виджетов и прочей информации, не имеющей прямого отношения к основному тексту. |
Форматирование |
p |
Абзац |
Тег создает абзац, который отделяется от других элементов вертикальными отступами. |
h1-h6 |
Заголовки |
h1 — самый важный заголовок (статьи, сайта), h6 — самый маленький. |
hr |
Горизонтальная линия |
Создает горизонтальную линию на всю ширину блока, в котором размещается. Ее высота обычно 1 пиксель. Не несет никакого смысла, это просто разделитель. |
br |
Принудительный перенос строки |
Может применяться, когда не создается новый абзац, но нужно написать текст с новой строки. Одинарный тег, как и hr. |
span |
Универсальный строчный элемент |
Span создан для того, чтобы с его помощью оборачивать нужные куски текста и применять к ним уникальное оформление. |
div |
Универсальный блочный элемент |
Не имеет никакого семантического смысла. По сути, обычный контейнер с блочными свойствами. Испольуется для самых разных целей. |
pre |
Тег для вывода текста в таком виде, как он набран в редакторе |
Текст будет выведен с сохранением всех пробелов, переносов строк и отступов. |
figure |
Контейнер для группировки элементов. Самый простой пример — группировка картинок и подписей для них. |
Тег появился в спецификации html5. |
figcaption |
Заголовок для элементов, собранных в figure. |
Может располагаться выше или ниже фигуры, в зависимости от того, как расположен в коде. |
Ссылки |
a |
Ссылка |
Тег имеет обязательный атрибут href, которым указывается url-адрес документа, к которому ведет ссылка. |
nav |
Контейнер для важных ссылок |
Тег из html5, который создан специально для того, чтобы помещать в него самые важные ссылки на странице. По сути, создан для формирования главного меню на сайте. |
Списки |
ol |
Нумерованный список |
Контейнер для пунктов списка, которые будут пронумерованы |
ul |
Маркированный список |
Контейнер для пунктов списка, которые будут помечены одинаковым маркером |
li |
Пункт списка |
Каждый отдельный пункт списка помещается в этот парный тег. По умолчанию он имеет блочные свойства. |
Изображения |
img |
Выводит любое изображение |
Обязательный атрибут — src (путь к картинке). Одинарный тег. |
Для текста |
b |
Жирный шрифт |
Парный тег. Весь текст, который обрамлен в него, становится жирным. Логического смысла не придает. |
strong |
Выделяет текст как важный + делает его жирным |
Действует аналогично тегу b, но также придает словам дополнительную важность. |
i |
Выделяет текст курсивом |
Придает курсивное начертание |
em |
Выделяет текст курсивом + акцентирует внимание на словах |
Добвляет логическое выделение слов на фоне других |
q |
Небольшая цитата |
Предназначен для выделения маленьких цитат на странице |
s |
Отображает текст перечеркнутым |
Действует только на оформление, не добавляя никакого смысла |
u |
Отображает текст подчеркнутым |
Как и s, это чисто оформительский тег. |
pre |
Вывод текста с сохранением форматирования |
Сохраняет все пробелы и переносы строк, которые сделаны при наборе. |
sub |
Для вывода шрифта в нижнем индексе |
Также уменьшает сам размер шрифта |
sup |
Для вывода шрифта в верхнем индексе |
Действует аналогично с sub |
Фреймы |
iframe |
Выводит плавающий фрейм |
Обязательный параметр — src. Можно также установить ширину и высоту. |
Формы |
form |
Контейнер для формы |
В него помещаются все поля, которые необходимо заполнять. Имеет обязательные параметры method и action для того, чтобы ее отправка работала. |
input |
Выводит различные поля формы |
Тип поля зависит от атрибута type. Это может быть поле для ввода текста, пароля, выбора даты и т.д. |
fieldset |
Отделяет одну часть формы от другой |
Например, если одни поля предназначены для общих регистрационных данных, а другие — для выбора интересов, то они могут быть разделены такими тегами, так как это разные группы полей. |
legend |
Выводит заголовок к группе полей |
Это название для котейнера fieldset |
label |
Подпись к полю |
Позволяет установить связь между полем input и этим элементом. При клике на label происходит перенос фокуса в то поле, с которым он связан. А если лейбл связан с чекбоксом или радио-кнопками, то при клике на него автоматически выбирается и соответствующая кнопка. Привязка делается с помощью атрибута for. |
select |
Раскрывающийся список из вариантов |
При клике на него можно будет выбрать один из ранее заданных вариантов. С атрибутом multiple в таком списке можно выбирать несколько значений. |
option |
Выводит один вариант для раскрывающегося списка |
Этот тег одинарный, нужный текст записывается в атрибут value. |
textarea |
Поле для многострочного текста |
Используется, когда нужно написать много текста. Например, для комментариев, отзывов и т.д. |
Таблицы |
table |
Главный контейнер для таблицы |
В нем располагается все ее содержимое — ряды и ячейки. |
caption |
Заголовок таблицы |
Может располагаться в любом месте контейнера table, в любом случае будет выведен сверху или снизу. |
tr |
Создает один ряд таблицы |
В ряду может быть неограниченное количество ячеек. В сам ряд ничего кроме ячеек помещать не стоит. |
td |
Создает одну ячейку |
Этот текст тоже написан в ячейке. В нее можно вставлять другие html-элементы. Например, картинки, видео и даже другие таблицы |
th |
Создает заглавную ячейку |
Текст в ней становится жирным и выравнивается по центру |
Мультимедиа |
audio |
Позволяет вставить аудиофайл |
Вставка происходит с помощью одинарных тегов source, в которые вписывается путь к файлу. Пока что для кроссбраузерности веб-разработчикам приходится вставлять несколько форматов файла, чтобы любой веб-обозреватель мог его опознать. |
video |
Вставляет видео |
Процесс происходит также, как и в случае с audio. Пустой атрибут controls добавляет элементы управления роликом, атрибут poster — добавляет картинку-миниатюру. |
source |
Задает путь к медиафайлу (аудио или видео) |
Вставляется внутрь тегов audio или video, между их открывающей и закрывающей частью. Путь задается с помощью атрибута src, также указываются кодеки. |
В этой таблице вы можете найти все основные теги, но это не абсолютно все. Впрочем, именно эти вам пригодятся, остальные будут использоваться лишь в 5-10% случаев и вы можете посмотреть их в каком-нибудь подробном справочнике.