First Code

Курсы программирования

Таблица тегов HTML5

Главный корень
Разделение корня
Метаданные документа
Разделение контента
Текстовый контент
Семантика встроенного текста
Изображение и мультимедиа
Встроенный контент
Таблицы
Сценарии
Демаркация правок
Формы
Интерактивные элементы
Веб-компоненты
Устаревшие элементы
Линейные теги
Блочные теги
Линейно-Блочные теги
Парные теги
Одиночные теги
Популярные теги

html

<html></html>

Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент . Закрывающий тег <html> должен всегда стоять в документе последним.

body

<body></body>

Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.


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

base

<base>

Элемент <base> определен внутри контейнера <head> и инструктирует браузер относительно полного базового адреса текущего документа. Тег <base> предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи.


Браузер ищет тег <base>, определяет полный адрес документа и корректно загружает его. Например, если адрес документа указан как <base href="https://first-code.ru/hzchd/">, то при добавлении рисунков достаточно использовать относительный адрес <img src="images/labuda.gif">. При этом полный путь к изображению будет https://first-code.ru/hzchd/images/labuda.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая веб-страница.


Также можно применять и иерархическую систему пути с двумя точками. Так, если изображение добавляется как <img src="../images/labuda.gif">, то полный путь к файлу будет https://first-code.ru/images/labuda.gif.


Второе применение тега <base> — задание целевого окна для всех ссылок на текущей странице.

Атрибуты

href - Адрес, который должен использоваться для указания полного пути к файлам.

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

head

<head></head>

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


Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.


Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Атрибуты

profile - Указывает адрес профиля метаданных.

link

<link>

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.

Атрибуты

profile - Указывает адрес профиля метаданных.

charset - Кодировка связываемого документа.

href - Путь к связываемому файлу.

media - Определяет устройство, для которого следует применять стилевое оформление.

rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

sizes - Указывает размер иконок для визуального отображения.

type - MIME-тип данных подключаемого файла.

meta

<meta>

Определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

Атрибуты

charset - Задает кодировку документа.

content - Устанавливает значение атрибута, заданного с помощью name или http-equiv.

http-equiv - Предназначен для конвертирования метатега в заголовок HTTP.

name - Имя метатега, также косвенно устанавливает его предназначение.

style

<style></style>

Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.

Атрибуты

media - Определяет устройство вывода, для работы с которым предназначена таблица стилей.

type - Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

title

<title></title>

Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 1). Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.

Атрибуты

Нет

article

<article></article>

Элемент <article> (от англ. article — статья) представляет собой независимый фрагмент веб-страницы и, как правило, включает «шапку», основное содержимое и «подвал», в которых располагаются такие части, как заголовок, текст, имя автора, дата публикации, метки, рейтинг статьи и др. <article> обычно применяется для статей сайта, сообщений блога и форума, комментариев.

Внутри <article> запрещено использовать элемент <main>.

Каждый элемент <article> обязательно должен содержать заголовок через <h1>-<h6>.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события

aside

<aside></aside>

Элемент <aside> (от англ. aside — в стороне, отступление) представляет собой раздел страницы, который имеет косвенное отношение к содержимому страницы и может быть рассмотрен отдельно от этого содержимого. <aside> применяется для боковых панелей, рекламных блоков, ссылок на архив, меток и другой информации, которая отделена от основного содержимого страницы.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события

footer

<footer></footer>

Элемент <footer> (от англ. footer — нижний колонтитул, подвал) задаёт «подвал» сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

<footer> нельзя вкладывать внутрь другого <footer>, а также внутрь элементов <address> и <header>.

Внутри <footer> не должно быть элемента <main>.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события

header

<header></header>

Элемент <header> (от англ. header — верхний колонтитул, шапка) задаёт «шапку» сайта или раздела веб-страницы. Внутри «шапки» сайта обычно располагается логотип, название сайта, поисковая форма, навигационные ссылки и др.

<header> нельзя вкладывать внутрь другого <header>, а также внутрь элементов <address> и <footer>.

Внутри <header> не должно быть элемента <main>.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события

main

<main></main>

Элемент <main> (от англ. main — основной, главный) предназначен для основного содержимого документа. На странице может быть только один <main> и он не должен располагаться внутри элементов <article>, <aside>, <footer>, <header>, <nav> или <section>

Элемент <main> включает в себя содержимое, которое является уникальным для данного документа, и не должен включать повторяющиеся разделы сайта, такие как навигация, название сайта, логотип, поисковая форма, баннеры и др.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события

nav

<nav></nav>

Элемент <nav> (от англ. navigation — навигация) задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Атрибуты

Нет

section

<section></section>

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один элемент

(от англ. section — раздел) внутрь другого.

Атрибуты

Нет

address

<address></address>

Элемент <address> (от англ. address — адрес) предназначен для хранения контактной информации автора (адрес, телефон, e-mail, ссылка на сайт и др.) и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т. д. Планируется, что поисковые системы будут анализировать содержимое этого элемента для сбора информации об авторах.

<address> не должен использоваться для разметки почтовых адресов в целом, только для контактной информации.

Используйте <address> в следующем контексте:

- если <address> располагается внутри <body>, то информация внутри <address> относится ко всему документу в целом;

- если <address> располагается внутри <article>, то информация внутри <address> относится к автору статьи.

Внутри <address> нельзя размещать заголовки <h1>,...<h6>, элементы <header>, <footer> и другой <address>.

По умолчанию текст внутри контейнера

отображается курсивным начертанием.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события

h1-h6

<h1></h1>

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, элемент <h1> (от англ. heading — заголовок) представляет собой наиболее важный заголовок первого уровня, а <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

Атрибуты

align - определяет выравнивание заголовка (Устарел в HTML5)

hgroup

<hgroup></hgroup>

<hgroup> (от англ. heading group — группа заголовков) используется для группирования заголовков веб-страницы или раздела. Внутри располагаются заголовки от <h1> до <h6>.

Данный элемент исключён из спецификации W3C HTML5, но оставлен в спецификации WHATWG. Не рекомендуем его применять на рабочих сайтах, поскольку статус элемента точно не определён и его дальнейшая судьба не известна.

Атрибуты

Нет

figcaption

<figcaption></figcaption>

Содержит описание для элемента <figure>. <figcaption> (от англ. figure caption — подпись к рисунку) должен быть первым или последним элементом в группе.

Пример
<figure>
<p><img src="image.jpg"></p>
<figcaption>Описание для элемента</figcaption>
</figure>
Атрибуты

Нет

div

<div></div>

Элемент <div> (от англ. division — раздел, секция) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или id с именем класса или идентификатора.

Как и при использовании других блочных элементов, содержимое <div> всегда начинается с новой строки, после него также добавляется перенос строки.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события

blockquote

<blockquote></blockquote>

Элемент <blockquote> (от англ. block quote — блок с цитатой) предназначен для выделения длинных цитат внутри документа. Текст внутри <blockquote> отображается как выровненный блок с отступами слева и справа (по 40 пикселей), а также с отбивкой сверху и снизу.

Атрибуты

citу - адрес, который указывает на источник цитаты

dd

<dd></dd>

Элемент <dd> (от англ. description list description — описание списка описаний) входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.

Пример
<dl>
<dt>Термин 1</dt>
  <dd>Описание термина 1</dd>
<dt>Термин 2</dt>
  <dd>Описание термина 2</dd>
</dl>
Атрибуты

citу - адрес, который указывает на источник цитаты

dir

<dir></dir>

Элемент <dir> (от англ. directory — директория) создаёт список, содержащий названия директорий (системные папки). Аналогично элемента <ol> и <ul> внутри контейнера <dir> список формируется с помощью <li>.

Данный элемент устарел, вместо него используйте <ul>

Пример
<dir>
<li>имя директории 1</li>
<li>имя директории 2</li>
</dir>
Атрибуты

citу - адрес, который указывает на источник цитаты

dl

<dl></dl>

Элемент <dl> (от англ. description list — список описаний) входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.

Пример
<dl>
<dt>Термин 1</dt>
  <dd>Описание термина 1</dd>
<dt>Термин 2</dt>
  <dd>Описание термина 2</dd>
</dl>
Атрибуты

Для этого элемента доступны универсальные атрибуты и события

dt

<dt></dt>

Элемент <dt> (от англ. description list term — термин списка описаний) входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.

Пример
<dl>
<dt>Термин 1</dt>
  <dd>Описание термина 1</dd>
<dt>Термин 2</dt>
  <dd>Описание термина 2</dd>
</dl>
Атрибуты

Для этого элемента доступны универсальные атрибуты и события

figure

<figure></figure>

Используется для группирования любых элементов, например, изображений и подписей к ним. <figure> (от англ. figure — рисунок, иллюстрация) не должен быть связан непосредственно с основным содержимым документа и при его перемещении в другое место смысл текста не должен меняться. Обычно применяется для иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.

Пример
<figure>
<p><img src="image.jpg"></p>
<figcaption>Описание для элемента</figcaption>
</figure>
Атрибуты

Нет

hr

<hr>

<hr> (от англ. horizontal rule — горизонтальная линейка) рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера

Атрибуты

Нет

li

<li></li>

Элемент <li> (от англ. list item — пункт списка) определяет отдельный пункт списка. Внешний элемент <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

Закрывающий тег - не обязателен

Пример
<ul>
<li>элемент списка 1</li>
<li>элемент списка 2</li>
</ul>
<ol>
<li>элемент списка 1</li>
<li>элемент списка 2</li>
</ol>
Атрибуты

Для этого элемента доступны универсальные атрибуты и события

ol

<ol></ol>

Элемент <ol> (от англ. ordered list — упорядоченный список) устанавливает нумерованный список. Каждый элемент списка должен начинаться с <li>. Если к <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Пример
<ol>
<li>элемент нумерованного списка 1</li>
<li>элемент нумерованного списка 2</li>
</ol>
Атрибуты

type - устанавливает вид маркера списка

reversed - нумерация в списке становится по убыванию (3,2,1)

start - задаёт число, с которого будет начинаться нумерованный список

p

<p></p>

Определяет текстовый абзац. Элемент <p> (от англ. paragraph — абзац, параграф) является блочным, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего абзаца или другого блочного элемента.

Пример
<p>Текст</p>
Атрибуты

Для этого элемента доступны универсальные атрибуты и события

pre

<pre></pre>

Элемент <pre> (от англ. preformatted text — форматированный текст) определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Элемент <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.

Пример
<pre>Текст</pre>
Атрибуты

Для этого элемента доступны универсальные атрибуты и события

ul

<ul></ul>

Элемент <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный список. Каждый пункт списка должен начинаться с элемента <li>.

Пример
<ul>
<li>элемент маркированного списка 1</li>
<li>элемент маркированного списка 2</li>
</ul>
Атрибуты

Для этого элемента доступны универсальные атрибуты и события

bdi

ruby

addr

b

bdo

br

cite

mark

wbr

data

dfn

em

i

kbd

rp

rt

a

q

rb

rtc

s

samp

small

time

code

span

strong

sub

sup

tt

u

var

audio

track

video

area

img

map

embed

source

applet

iframe

noembed

object

param

picture

canvas

noscript

script

del

ins

caption

col

colgroup

table

tbody

td

tfoot

th

thead

tr

datalist

progress

fieldset

form

input

label

legend

meter

output

button

optgroup

option

select

textarea

details

summary

dialog

menu

menuitem

content

element

shadow

slot

template

command

keygen

acronym

applet

basefont

bgsound

big

blink

center

content

dir

element

font

frame

frameset

image

isindex

listing

marquee

menuitem

multicol

nextid

nobr

noembed

noframes

plaintext

shadow

spacer

strike

tt

xmp