Основные теги html. Таблица тегов
Я решил создать табличку, в которой вы можете посмотреть на основные теги языка 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% случаев и вы можете посмотреть их в каком-нибудь подробном справочнике.
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.