book51.ru

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Справочник по элементам HTML ======
На этой странице собраны все [[software:development:web:docs:glossary:element|элементы]] [[software:development:web:docs:glossary:HTML|HTML]], созданные с использованием [[software:development:web:docs:glossary:tag|тегов]] . Они сгруппированы по функциям, чтобы помочь вам найти то, что вам нужно для реализации ваших идей. Хотя это руководство написано для относительных новичков в программировании, мы хотим, чтобы оно было полезным для всех.

===== Основные элементы =====
Основные элементы являются основой любого HTML документа. Вы увидите эти элементы в исходном коде для всех веб-страниц после задания типа документа на первой строке на странице. [[software:development:web:docs:glossary:DOCTYPE|<DOCTYPE>]] определяет, какую версию (X) HTML эта страница использует. Элементы страницы находятся между открывающим тегом [[software:development:web:docs:web:html:element:HTML|<html>]] и закрывающим [[software:development:web:docs:web:html:element:HTML|</html>]]. Элемент[[software:development:web:docs:web:html:element:html|<html>]] называется корневым элементом.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:html|<html>]]| Представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него).|  
\\  	 
===== Метаданные документа =====

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

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:base|<base>]]| Определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один [[software:development:web:docs:web:html:element:base|<base>]] элемент в одном документе.|
|[[software:development:web:docs:web:html:element:head|<head>]]| Содержит машиночитаемую информацию [[software:development:web:docs:glossary:metadata|(metadata)]] о документе, например его [[software:development:web:docs:web:html:element:title|заголовок]], [[software:development:web:docs:web:html:element:script|скрипты]] и [[software:development:web:docs:web:html:element:style|страницы стилей]].|
|[[software:development:web:docs:web:html:element:link|<link>]]| Определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.|
|[[software:development:web:docs:web:html:element:meta|<meta>]]| Представляет такие [[software:development:web:docs:glossary:metadata|метаданные]], которые не могут быть представлены другими HTML-метатегами, такими как [[software:development:web:docs:web:html:element:base|<base>]], [[software:development:web:docs:web:html:element:link|<link>]], [[software:development:web:docs:web:html:element:script|<script>]], [[software:development:web:docs:web:html:element:style|<style>]] или [[software:development:web:docs:web:html:element:title|<title>]].|
|[[software:development:web:docs:web:html:element:style|<style>]]| Содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.|
|[[software:development:web:docs:web:html:element:title|<title>]]| Определяет заголовок документа, который отображается в заголовке окна [[software:development:web:docs:web:html:element:Browser|браузера]] или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.|

===== Корень раздела =====

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:body|<body>]]| Представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент [[software:development:web:docs:web:html:element:body|<body>]].|

===== Разделение контента =====

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

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:address|<address>]]| Задаёт контактные данные для ближайшего родительского [[software:development:web:docs:web:html:element:article|<>]] или [[software:development:web:docs:web:html:element:body|<body>]] ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.|
|[[software:development:web:docs:web:html:element:article|<article>]]| Представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.|
|[[software:development:web:docs:web:html:element:aside|<aside>]]| Представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.|
|[[software:development:web:docs:web:html:element:footer|<footer>]]| Представляет собой нижний колонтитул (футер, подвал) для своего ближайшего секционного контента или секционного корня. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.|
|[[software:development:web:docs:web:html:element:header|<header>]]| Представляет собой [[software:development:web:docs:web:html:content_categories:content_categories#Секционный_контент|вводный контент]], обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы.|
|[[software:development:web:docs:web:html:element:h1|<h1>]], [[software:development:web:docs:web:html:element:h1|<h2>]], [[software:development:web:docs:web:html:element:h1|<h3>]], [[software:development:web:docs:web:html:element:h1|<h4>]], [[software:development:web:docs:web:html:element:h1|<h5>]], [[software:development:web:docs:web:html:element:h1|<h6>]]| HTML-элементы [[software:development:web:docs:web:html:element:h1|<h1>]]–[[software:development:web:docs:web:html:element:h1|<h6>]] представляют собой 6 уровней заголовков секций. [[software:development:web:docs:web:html:element:h1|<h1>]] это наибольший заголовок и [[software:development:web:docs:web:html:element:h1|<h6>]] - наименьший.|
|[[software:development:web:docs:web:html:element:hgroup|<hgroup>]]|Представляет заголовок, сгруппированный с любым дополнительным содержимым, например подзаголовками, альтернативным заголовком или слоганом.|
|[[software:development:web:docs:web:html:element:main|<main>]]| Предназначен для основного контента (содержимого) [[software:development:web:docs:web:html:element:body|<body>]] документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.|
|[[software:development:web:docs:web:html:element:nav|<nav>]]| Определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки.|
|[[software:development:web:docs:web:html:element:section|<section>]]| Представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.|
|[[software:development:web:docs:web:html:element:search|<search>]]|Представляет часть, содержащую набор элементов управления формой или другое содержимое, связанное с выполнением операции поиска или фильтрации.|

===== Текстовое содержание =====

Используйте текстовые элементы HTML для организации блоков или разделов содержания, размещённые между тегами открытия [[software:development:web:docs:web:html:element:body|<body>]] и закрытия [[software:development:web:docs:web:html:element:/body|<body>]]. Важное значение для accessibility и SEO, чтобы эти элементы определили цель или структуру этого контента.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:blockquote|<blockquote>]]| Указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание , где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом [[software:development:web:docs:web:html:element:cite|<cite>]].|
|[[software:development:web:docs:web:html:element:dd|<dd>]]| Предоставляет подробности или определение предшествующего термина ([[software:development:web:docs:web:html:element:dt|<dt>]]) в списке определений ([[software:development:web:docs:web:html:element:dl|<dl>]]).|
|[[software:development:web:docs:web:html:element:div|<div>]]| Является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS. (например, к нему непосредственно не будет применен стиль или к его родительскому элементу не будет применена какая-либо модель макета, такая как [[software:development:web:docs:glossary:flexbox|flexbox]]).|
|[[software:development:web:docs:web:html:element:dl|<dl>]]| Представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом [[software:development:web:docs:web:html:element:dt|<dt>]]) и их описаний (определяемых элементами [[software:development:web:docs:web:html:element:dd|<dd>]]). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).|
|[[software:development:web:docs:web:html:element:dt|<dt>]]| Определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента [[software:development:web:docs:web:html:element:dl|<dl>]] . Обычно за ним следует элемент [[software:development:web:docs:web:html:element:dd|<dd>]]. Кроме того, несколько элементов [[software:development:web:docs:web:html:element:dt|<dt>]] идущие друг за другом будут содержать своё определение в следующем идущем за ним элементом[[software:development:web:docs:web:html:element:dd|<dd>]].|
|[[software:development:web:docs:web:html:element:figcaption|<figcaption>]]| Представляет собой подпись (заголовок) или легенду, описывающую остальную часть содержимого родительского элемента [[software:development:web:docs:web:html:element:figure|<figure>]].|
|[[software:development:web:docs:web:html:element:figure|<figure>]]| Представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента ([[software:development:web:docs:web:html:element:figcaption|<figcaption>]]). Диаграмма и её подпись представляет собой единое целое.|
|[[software:development:web:docs:web:html:element:hr|<hr>]]| Представляет тематический разрыв между элементами уровня абзаца: например, смену сцены в рассказе или сдвиг темы внутри раздела.|
|[[software:development:web:docs:web:html:element:li|<li>]]| Используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке ([[software:development:web:docs:web:html:element:ol|<ol>]]), неупорядоченном списке ([[software:development:web:docs:web:html:element:ul|<ul>]]), или меню ([[software:development:web:docs:web:html:element:menu|<menu>]]). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.|
|[[software:development:web:docs:web:html:element:menu|<menu>]]| Семантическая альтернатива [[software:development:web:docs:web:html:element:ul|<ul>]], но обрабатывается браузерами (и отображается через дерево доступности) как ничем не отличающаяся от [[software:development:web:docs:web:html:element:ul|<ul>]]. Он представляет собой неупорядоченный список элементов (которые представлены [[software:development:web:docs:web:html:element:li|<li>]]элементами).|
|[[software:development:web:docs:web:html:element:ol|<ol>]]| Используется для упорядоченного списка — в частности для пронумерованного списка.|
|[[software:development:web:docs:web:html:element:p|<p>]]| Представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделённых от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.|
|[[software:development:web:docs:web:html:element:pre|<pre>]]| Представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием непропорционального [[https://en.wikipedia.org/wiki/Monospaced_font|("monospace")]] шрифта. Пробелы внутри этого элемента отображаются как записанные.|
|[[software:development:web:docs:web:html:element:ul|<ul>]]| Используется для неупорядоченного списка - в частности для маркированного списка.|

===== Семантика встроенного текста =====

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

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:a|<a>]]| Определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.|
|[[software:development:web:docs:web:html:element:abbr|<abbr>]]| Представляет собой аббревиатуру или акроним и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут title. Иные значения title, кроме расшифровки аббревиатуры не допускаются.|
|[[software:development:web:docs:web:html:element:b|<b>]]| Используется для привлечения внимания читателя к содержимому элемента, которому в противном случае не придается особого значения. Раньше он назывался элементом Boldface, и большинство браузеров до сих пор рисуют текст полужирным шрифтом. Однако не следует использовать его <b>для стилизации текста или придания важности. Если вы хотите создать жирный текст, вам следует использовать [[software:development:web:docs:web:css:font-weight|font-weight]] свойство CSS. Если вы хотите указать, что элемент имеет особую важность, вам следует использовать сильный элемент.|
|[[software:development:web:docs:web:html:element:bdi|<bdi>]]|Указывает двунаправленному алгоритму браузера обрабатывать содержащийся в нем текст отдельно от окружающего его текста. Это особенно полезно, когда веб-сайт динамически вставляет некоторый текст и не знает направления вставляемого текста. |
|[[software:development:web:docs:web:html:element:bdo|<bdo>]]| Переопределяет текущее направление текста так, что текст внутри отображается в другом направлении.|
|[[software:development:web:docs:web:html:element:br|<br>]]| Устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.|
|[[software:development:web:docs:web:html:element:cite|<cite>]]| Представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращённом виде в соответствии с правилами, используемых для добавления метаданных цитирования.|
|[[software:development:web:docs:web:html:element:code|<code>]]| Отображает его содержимое в стиле, предназначенном для указания на то, что текст является коротким фрагментом компьютерного кода. По умолчанию текст содержимого отображается с использованием шрифта монопространства по умолчанию пользовательского агента.|
|[[software:development:web:docs:web:html:element:data|<data>]]| Связывает данное содержимое с машиночитаемым представлением. Если содержимое относится к времени или дате, необходимо использовать элемент [[software:development:web:docs:web:html:element:time|<time>]].|
|[[software:development:web:docs:web:html:element:dfn|<dfn>]]| Используется для указания термина, определяемого в контексте фразы или предложения. Элемент -предок [[software:development:web:docs:web:html:element:p|<p>]], пара [[software:development:web:docs:web:html:element:dt|<dt>]]/[[software:development:web:docs:web:html:element:dd|<dd>]] или элемент [[software:development:web:docs:web:html:element:section|<section>]], который является ближайшим предком [[software:development:web:docs:web:html:element:dfn|<dfn>]] считается определением термина.|
|[[software:development:web:docs:web:html:element:em|<em>]]| Отмечает акцентируемый текст. Элемент [[software:development:web:docs:web:html:element:em|<em>]] может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента.|
|[[software:development:web:docs:web:html:element:i|<i>]]| Представляет собой отрывок текста, выделяемый среди прочего по определенным причинам, например: идиоматический текст, технические термины, систематические обозначения и прочее. Обычно отмечается курсивом, от чего и получил свое название (от англ. Italic).|
|[[software:development:web:docs:web:html:element:kbd|<kbd>]]| Указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста. По общему соглашению, user agent использует моноширинный шрифт для отображения содержимого элемента [[software:development:web:docs:web:html:element:kbd|<kbd>]] по умолчанию, хотя это и не указывается HTML стандартом явно.|
|[[software:development:web:docs:web:html:element:mark|<mark>]]| Представляет текст, выделенный в справочных целях из-за своей актуальности в определённом контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова.|
|[[software:development:web:docs:web:html:element:q|<q>]]| Указывает, что прилагаемый текст представляет собой короткую встроенную цитату. Большинство современных браузеров реализуют это, заключая текст в кавычки. Этот элемент предназначен для коротких цитат, не требующих разрывов абзацев; для длинных цитат используйте [[software:development:web:docs:web:html:element:blockquote|<blockquote>]] элемент.|
|[[software:development:web:docs:web:html:element:rp|<rp>]]| Используется для предоставления запасных круглых скобок для браузеров, которые не поддерживают отображение аннотаций Ruby с использованием этого [[software:development:web:docs:web:html:element:ruby|<ruby>]] элемента. Один [[software:development:web:docs:web:html:element:rp|<rp>]] элемент должен заключать в себя каждую открывающую и закрывающую скобку, заключающую в себя [[software:development:web:docs:web:html:element:rt|<rt>]]  элемент, содержащий текст аннотации.|
|[[software:development:web:docs:web:html:element:rt|<rt>]]| Указывает текстовый компонент Ruby аннотации Ruby, который используется для предоставления информации о произношении, переводе или транслитерации для восточноазиатской типографики. Элемент [[software:development:web:docs:web:html:element:rt|<rt>]] всегда должен содержаться внутри [[software:development:web:docs:web:html:element:ruby|<ruby>]] элемента.|
|[[software:development:web:docs:web:html:element:ruby|<ruby>]]| Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.|
|[[software:development:web:docs:web:html:element:s|<s>]]| Отображает текст перечеркнутым или перечеркнутым линией. Используйте этот [[software:development:web:docs:web:html:element:s|<s>]] элемент для обозначения вещей, которые больше не актуальны или неточны. Однако, [[software:development:web:docs:web:html:element:s|<s>]] это не подходит при указании изменений в документе; для этого используйте элементы [[software:development:web:docs:web:html:element:del|<del>]] и [[software:development:web:docs:web:html:element:ins|<ins>]], если это необходимо.|
|[[software:development:web:docs:web:html:element:samp|<samp>]]| Используется для включения встроенного текста, представляющего пример (или цитирование) вывода компьютерной программы. Его содержимое обычно отображается с использованием моноширинного шрифта браузера по умолчанию (например, [[https://en.wikipedia.org/wiki/Courier_(typeface)|Courier]] или [[https://en.wikipedia.org/wiki/Lucida#Lucida_Console|Lucida Console]]).|
|[[software:development:web:docs:web:html:element:small|<small>]]| Представляет побочные комментарии и мелкий шрифт, например текст об авторских правах и юридический текст, независимо от его стилизованного представления. По умолчанию текст внутри него отображается на один размер шрифта меньше, например от smallдо x-small.|
|[[software:development:web:docs:web:html:element:span|<span>]]| Является основным строковым контейнером для фразового контента, который, по существу, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов class или id) или потому, что они имеет общие значения атрибутов, например lang. Он должен быть использован только когда нет другого подходящего по семантике элемента. [[software:development:web:docs:web:html:element:span|<span>]] очень похож на элемент [[software:development:web:docs:web:html:element:div|<div>]], но [[software:development:web:docs:web:html:element:div|<div>]] является [[software:development:web:docs:glossary:Block-level_content|блочным элементом]], в то время как [[software:development:web:docs:web:html:element:span|<span>]] является [[software:development:web:docs:glossary:Inline-level_content|элементом строчного уровня]].|
|[[software:development:web:docs:web:html:element:strong|<strong>]]| Указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.|
|[[software:development:web:docs:web:html:element:sub|<sub>]]| 	Указывает встроенный текст, который должен отображаться в виде нижнего индекса исключительно по типографским причинам. Нижние индексы обычно отображаются с пониженной базовой линией и более мелким текстом.|
|[[software:development:web:docs:web:html:element:sup|<sup>]]| Указывает встроенный текст, который должен отображаться как надстрочный индекс исключительно по типографским причинам. Надстрочные индексы обычно отображаются с приподнятой базовой линией и более мелким текстом.|
|[[software:development:web:docs:web:html:element:time|<time>]]| Используется для представления либо времени в 24-часовом формате, либо точной даты по Григорианскому календарю (с опциональным указанием времени и часового пояса). Он может включать datetime атрибут для перевода дат в машиночитаемый формат, что позволяет улучшить результаты поисковых систем или использовать специальные функции, такие как напоминания.|
|[[software:development:web:docs:web:html:element:u|<u>]]| Представляет фрагмент встроенного текста, который должен отображаться таким образом, чтобы указывать на наличие нетекстовой аннотации. По умолчанию это отображается как простое сплошное подчеркивание, но его можно изменить с помощью CSS.|
|[[software:development:web:docs:web:html:element:var|<var>]]| Представляет имя переменной в математическом выражении или контексте программирования. Обычно он отображается с использованием курсивной версии текущего шрифта, хотя такое поведение зависит от браузера.|
|[[software:development:web:docs:web:html:element:wbr|<wbr>]]| Предоставляет возможность переноса слова – позицию в тексте, где браузер может по желанию разбить строку, в противном случае его правила разрыва строки не будут создавать разрыв в этом месте.|

===== Изображения и мультимедиа =====

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

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:area|<area>]]| Определяет область внутри карты изображений с предопределенными областями, доступными для щелчка. Карта изображения позволяет связать геометрические области изображения с помощью [[software:development:web:docs:glossary:Hyperlink|гиперссылки]]. Этот элемент используется только внутри элемента [[software:development:web:docs:web:html:element:map|<map>]].|
|[[software:development:web:docs:web:html:element:audio|<audio>]]| Используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута [[software:development:web:docs:web:html:attributes:src|src]] или элемента [[software:development:web:docs:web:html:element:source|<source>]] – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс [[software:development:web:docs:web:api:MediaStream|MediaStream]].|
|[[software:development:web:docs:web:html:element:img|<img>]]| Встраивает изображение в документ. Это замещаемый элемент.|
|[[software:development:web:docs:web:html:element:map|<map>]]| Используется с элементами [[software:development:web:docs:web:html:element:area|<area>]] для определения карты изображения (интерактивной области ссылок).|
|[[software:development:web:docs:web:html:element:track|<track>]]| Используется как дочерний элемент медиа-элементов [[software:development:web:docs:web:html:element:audio|<audio>]] and [[software:development:web:docs:web:html:element:video|<video>]]. Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют формат [[software:development:web:docs:web:api:WebVTT_API|WebVTT]] (.vtt файлы) — Web Video Text Tracks или Timed Text Markup Language (TTML).|
|[[software:development:web:docs:web:html:element:video|<video>]]| Для встраивания видео контента в документ используйте элемент HTML [[software:development:web:docs:web:html:element:video|<video>]]. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент [[software:development:web:docs:web:html:element:source|<source>]]; браузер сам определит наиболее подходящий источник.|

===== Встроенное содержание =====

Содержание мультимедийных HTML включает в себя другие материалы, даже если они не всегда легко взаимодействуют.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:embed|<embed>]]| Вставляет расширенный контент в выбранное место документа. Этот контент может быть представлен от внешнего приложения или другого источника интерактивного контента, такого как плагин для браузера, например.|
|[[software:development:web:docs:web:html:element:iframe|<iframe>]]| Представляет вложенный контекст просмотра, встраивающий другую HTML-страницу в текущую.|
|[[software:development:web:docs:web:html:element:object|<object>]]| Представляет внешний ресурс, который можно рассматривать как изображение, вложенный контекст просмотра или ресурс, обрабатываемый подключаемым модулем.|
|[[software:development:web:docs:web:html:element:picture|<picture>]]| Служит контейнером для одного или более элементов [[software:development:web:docs:web:html:element:source|<source>]] и одного элемента [[software:development:web:docs:web:html:element:img|<img>]] для обеспечения оптимальной версии изображения для различных размеров экрана. Браузер рассмотрит каждый из дочерних элементов [[software:development:web:docs:web:html:element:source|<source>]] и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов [[software:development:web:docs:web:html:element:source|<source>]] найдено не будет, то будет выбран файл, указанный атрибутом src элемента [[software:development:web:docs:web:html:element:img|<>]] . Затем выбранное изображение отображается в пространстве, занятом элементом [[software:development:web:docs:web:html:element:img|<>]].|
|[[software:development:web:docs:web:html:element:portal|<portal>]]| Позволяет встроить другую HTML-страницу в текущую, чтобы обеспечить более плавную навигацию по новым страницам.|
|[[software:development:web:docs:web:html:element:source|<source>]]| Указывает несколько медиа-ресурсов для элементов [[software:development:web:docs:web:html:element:picture|<picture>]], [[software:development:web:docs:web:html:element:video|<video>]] и [[software:development:web:docs:web:html:element:audio|<audio>]]. Это пустой элемент. Он обычно используется для предоставления одного и того же медиа-контента в нескольких форматах файлов, чтобы обеспечить совместимость с широким спектром браузеров, учитывая различную поддержку форматов файлов [[software:development:web:docs:web:Media:Formats:Image_types|изображений]] и форматов [[software:development:web:docs:web:Media:Formats|медиа-файлов]].|

===== SVG and MathML =====

You can embed [[software:development:web:docs:web:SVG|SVG]] and [[software:development:web:docs:web:MathML|MathML]] content directly into HTML documents, using the [[software:development:web:docs:web:svg:element:svg|<svg>]] and [[software:development:web:docs:web:MathML:element:math|<math>]] elements.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:svg:element:svg|<svg>]]| Представляет собой контейнер, который определяет новую систему координат и область просмотра. Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML.|
|[[software:development:web:docs:web:MathML:element:math|<math>]]| Элементом верхнего уровня в MathML является тэг [[software:development:web:docs:web:MathML:element:math|<math>]]. Каждый допустимый экземпляр MathML должен быть внутри этого контейнера. Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.|

===== Скриптинг =====

Чтобы создавать динамический контент и веб-приложения, HTML поддерживает использование скриптовых языков, наиболее известным является JavaScript. Некоторые элементы поддерживают эту возможность.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:canvas|<canvas>]]| Элемент-контейнер, который можно использовать либо с [[software:development:web:docs:web:api:Canvas_API|API сценариев Canvas]], либо с [[software:development:web:docs:web:api:WebGL_API|API WebGL]] для рисования графики и анимации. Вы можете (и должны) дать альтернативное содержание внутри блока [[software:development:web:docs:web:html:element:canvas|<canvas>]]. Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.|
|[[software:development:web:docs:web:html:element:noscript|<noscript>]]| Определяет секцию HTML кода, которая будет вставлена, если в браузере пользователя нет, либо отключена поддержка JavaScript.|
|[[software:development:web:docs:web:html:element:script|<script>]]| Используется для встраивания или подключения исполняемого JavaScript кода. Элемент [[software:development:web:docs:web:html:element:script|<>]] также может использоваться с другими языками, такими как язык программирования шейдеров GLSL WebGL и [[software:development:web:docs:glossary:JSON|JSON]].|

===== Разграничительные правки =====

Эти элементы позволяют вам отметить определённые части текста.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:del|<del>]]| Представляет диапазон текста, который был удалён из документа. Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент [[software:development:web:docs:web:html:element:ins|<ins>]] можно использовать для противоположной цели: указание текста, который был добавлен в документ.|
|[[software:development:web:docs:web:html:element:ins|<ins>]]| Представляет диапазон текста, добавленного в документ. Вы можете использовать этот [[software:development:web:docs:web:html:element:del|<del>]] элемент для аналогичного представления диапазона текста, удаленного из документа.|

===== Содержание таблиц =====

Эти элементы используются для создания и обработки табличных данных.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:caption|<caption>]]| Определяет название (заголовок) таблицы. Если этот элемент используется, он всегда должен быть первым вложенным элементом тэга [[software:development:web:docs:web:html:element:table|<table>]]. Внешний вид и расположение заголовка по отношению к самой таблице может быть изменено с помощью стилей CSS caption-side  and text-align.|
|[[software:development:web:docs:web:html:element:col|<col>]]| Определяет столбец в таблице и используется для определения общей семантики для всех общих ячеек. Обычно он находится внутри элемента [[software:development:web:docs:web:html:element:colgroup|<colgroup>]].|
|[[software:development:web:docs:web:html:element:colgroup|<colgroup>]]| Определяет группу столбцов в таблице.|
|[[software:development:web:docs:web:html:element:table|<table>]]| Представляет табличные данные, то есть информацию, представленную в двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.|
|[[software:development:web:docs:web:html:element:tbody|<tbody>]]| Инкапсулирует набор строк таблицы ([[software:development:web:docs:web:html:element:tr|<tr>]] элементов), указывая, что они составляют тело таблицы ([[software:development:web:docs:web:html:element:table|<table>]] ).|
|[[software:development:web:docs:web:html:element:td|<td>]]| Определяет ячейку таблицы которая содержит данные. Участвует в табличной модели.|
|[[software:development:web:docs:web:html:element:tfoot|<tfoot>]]| Определяет набор строк суммирующих столбцы таблицы.|
|[[software:development:web:docs:web:html:element:th|<th>]]| Определяет ячейку как заголовок группы ячеек таблицы. Точная природа этой группы определяется атрибутами [[software:development:web:docs:web:html:attributes:scope|scope]] и [[software:development:web:docs:web:html:attributes:headers|headers]].|
|[[software:development:web:docs:web:html:element:thead|<thead>]]| Определяет набор строк, определяющих заголовки столбцов таблицы.|
|[[software:development:web:docs:web:html:element:tr|<tr>]]| Определяет строку ячеек в таблице. Затем ячейки строки можно создать, используя сочетание элементов [[software:development:web:docs:web:html:element:td|<td>]] (ячейка данных) и [[software:development:web:docs:web:html:element:th|<th>]] (ячейка заголовка).|

===== Формы =====

HTML содержит некоторое количество элементов, которые используются вместе для создания форм, которые пользователь может заполнить и отправить на сервер. Доступно множество информации по этой теме в [[software:development:web:docs:learn:forms|руководстве по HTML формам]].

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:button|<button>]]| Интерактивный элемент, активируемый пользователем с помощью мыши, клавиатуры, пальца, голосовой команды или другой вспомогательной технологии. После активации он выполняет действие, например отправку [[software:development:web:docs:learn:forms|формы]] или открытие диалогового окна. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.|
|[[software:development:web:docs:web:html:element:datalist|<datalist>]]| Содержит набор элементов ([[software:development:web:docs:web:html:element:option|<option>]]), доступных для выбора. Выбранное значение будет установлено для элемента [[software:development:web:docs:web:html:element:input|<input>]], с атрибутом [[software:development:web:docs:web:html:attributes:list|list]].|
|[[software:development:web:docs:web:html:element:fieldset|<fieldset>]]| Используется для группировки нескольких элементов управления, а также меток ([[software:development:web:docs:web:html:element:label|<label>]]) внутри веб-формы.|
|[[software:development:web:docs:web:html:element:form|<form>]]| Представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.|
|[[software:development:web:docs:web:html:element:input|<input>]]| Используется для создания интерактивных элементов управления для веб-форм для приема данных от пользователя; доступно большое разнообразие типов входных данных и виджетов управления, в зависимости от устройства и пользовательского агента. Этот [[software:development:web:docs:web:html:element:input|<input>]] элемент является одним из самых мощных и сложных во всем HTML из-за огромного количества комбинаций типов ввода и атрибутов.|
|[[software:development:web:docs:web:html:element:label|<label>]]| Представляет заголовок для элемента в пользовательском интерфейсе.|
|[[software:development:web:docs:web:html:element:legend|<legend>]]| Представляет собой заголовок содержания родительского элемента [[software:development:web:docs:web:html:element:fieldset|<fieldset>]].|
|[[software:development:web:docs:web:html:element:meter|<meter>]]| Представляет собой скалярное значение в пределах известного диапазона или дробного значения.|
|[[software:development:web:docs:web:html:element:optgroup|<optgroup>]]| Создает группу параметров внутри [[software:development:web:docs:web:html:element:select|<select>]] элемента.|
|[[software:development:web:docs:web:html:element:option|<option>]]| Используется для определения элемента, содержащегося в [[software:development:web:docs:web:html:element:select|<select>]], элемента [[software:development:web:docs:web:html:element:optgroup|<optgroup>]], или элемента [[software:development:web:docs:web:html:element:datalist|<datalist>]]. Элемент [[software:development:web:docs:web:html:element:option|<option>]] может представлять раздел меню всплывающих окон и других перечней или списков HTML документа.|
|[[software:development:web:docs:web:html:element:output|<output>]]| Является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя.|
|[[software:development:web:docs:web:html:element:progress|<progress>]]| Отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).|
|[[software:development:web:docs:web:html:element:select|<select>]]| Представляет элемент управления, предоставляющий меню параметров.|
|[[software:development:web:docs:web:html:element:textarea|<textarea>]]| Представляет собой многострочный элемент управления для редактирования обычного текста, полезный, когда вы хотите разрешить пользователям вводить значительный объем текста в произвольной форме, например комментарий к отзыву или форму обратной связи.|

===== Интерактивные элементы =====

HTML содержит в себе элементы, которые помогают создавать интерактивные объекты пользовательского интерфейса.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:details|<details>]]| Создает виджет раскрытия, в котором информация видна только тогда, когда виджет переключается в «открытое» состояние. С помощью элемента необходимо предоставить сводку или метку [[software:development:web:docs:web:html:element:summary|<summary>]].|
|[[software:development:web:docs:web:html:element:dialog|<dialog>]]| Определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы [[software:development:web:docs:web:html:element:form|<form>]] могут интегрироваться с диалогом с помощью указания атрибута [[software:development:web:docs:web:html:attributes:method|method]]="dialog". Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit.|
|[[software:development:web:docs:web:html:element:summary|<summary>]]| Задает сводку, заголовок или легенду для поля раскрытия элемента сведений. Щелчок по [[software:development:web:docs:web:html:element:summary|<summary>]] элементу переключает состояние родительского [[software:development:web:docs:web:html:element:details|<details>]] элемента открытым и закрытым.|

===== Веб-компоненты =====

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

Примечание: Эти элементы определены в World Wide Web Consortium (W3C) Web Components collection of specifications скорее, чем в HTML спецификации. К тому же, спецификация Веб-компонентов не завершена и является темой для обсуждений.

{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:slot|<slot>]]| Является частью набора технологии [[software:development:web:docs:web:api:Web_components|Web Components]], является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе.|
|[[software:development:web:docs:web:html:element:template|<template>]]| Представляет собой механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.|

===== Устаревшие и осуждаемые элементы =====

<WRAP center round box 100%>
{{:icons:16:hourglass-select.png?|Устаревший. Не для использования на новых web-сайтах.}} Предупреждение: Эти HTML-элементы являются устаревшими, и их использование не рекомендуется. Вы не должны использовать их для новых проектов, а также должны заменить их в старых проектах как можно быстрее. Они перечислены здесь только в информационных целях.
</WRAP>



{{tablelayout?colwidth="200px"}}
^ Элемент  ^ Описание  ^
|[[software:development:web:docs:web:html:element:acronym|<acronym>]]| Позволяет явно указать, что данная последовательность букв, являющуюся акронимом или аббревиатурой.|
|[[software:development:web:docs:web:html:element:applet|<applet>]]| Определяет включение апплета Java.|
|[[software:development:web:docs:web:html:element:bgsound|<bgsound>]]| Настраивает звуковой файл для воспроизведения в фоновом режиме во время использования страницы; вместо этого используйтеe [[software:development:web:docs:web:html:element:audio|<audio>]].|
|[[software:development:web:docs:web:html:element:big|<big>]]| Отображает вложенный текст с размером шрифта на один уровень больше, чем окружающий текст ( например, medium становится ). largeРазмер ограничен максимально допустимым размером шрифта браузера.|
|[[software:development:web:docs:web:html:element:blink|<blink>]]| Заставляет заключенный текст медленно мигать.|
|[[software:development:web:docs:web:html:element:center|<center>]]| Отображает его блочное или встроенное содержимое, центрированное по горизонтали внутри содержащего его элемента.|
|[[software:development:web:docs:web:html:element:content|<content>]]| Устаревшая часть набора технологий веб-компонентов — использовалась внутри Shadow DOM в качестве точки вставки и не предназначалась для использования в обычном HTML. Теперь он заменен элементом [[software:development:web:docs:web:html:element:slot|<slot>]], создающим точку в DOM, в которую можно вставить теневой DOM. Рассмотрите возможность использования [[software:development:web:docs:web:html:element:slot|<slot>]] вместо этого.|
|[[software:development:web:docs:web:html:element:dir|<dir>]]| Контейнер для каталога файлов и/или папок, потенциально со стилями и значками, применяемыми пользовательским агентом. Не используйте этот устаревший элемент; вместо этого вы должны использовать этот [[software:development:web:docs:web:html:element:ul|<ul>]] элемент для списков, включая списки файлов.|
|[[software:development:web:docs:web:html:element:font|<font>]]| Определяет размер шрифта, цвета и лицо для его содержимого.|
|[[software:development:web:docs:web:html:element:frame|<frame>]]| Определяет конкретную область, в которой может отображаться другой HTML-документ. Фрейм следует использовать в файле [[software:development:web:docs:web:html:element:frameset|<frameset>]] .|
|[[software:development:web:docs:web:html:element:frameset|<frameset>]]| Используется для содержания [[software:development:web:docs:web:html:element:frame|<frame>]] элементов.|
|[[software:development:web:docs:web:html:element:image|<image>]]| Примечание: Этот элемент был удалён из HTML5 (W3C) спецификации , но до сих пор остаётся в спецификации WHATWG. Он частично встроен в большинство браузеров, хотя бы поэтому вряд ли уйдёт. Поскольку схематический алгоритм не реализован ни в одном браузере, семантика тега [[software:development:web:docs:web:html:element:hgroup|<hgroup>]] на практике реализована только теоретически. Спецификация HTML5 (W3C) даёт совет как обозначать подзаголовки, альтернативные заголовки и слоганы. Элемент HTML [[software:development:web:docs:web:html:element:image|<image>]] был экспериментальным элементом, предназначенный для отображения изображений. Он никогда не был реализован, вместо него должен использоваться стандартный элемент [[software:development:web:docs:web:html:element:img|<img>]].|
|[[software:development:web:docs:web:html:element:marquee|<marquee>]]| Используется для вставки области прокрутки текста. Вы можете контролировать, что происходит, когда текст достигает краев области содержимого, используя его атрибуты.|
|[[software:development:web:docs:web:html:element:menuitem|<menuitem>]]| HTML-элемент [[software:development:web:docs:web:html:element:marquee|<marquee>]] используется для создания на странице прокручивающегося текста (бегущей строки).|
|[[software:development:web:docs:web:html:element:nobr|<nobr>]]| Предотвращает автоматический перенос содержащегося в нем текста на несколько строк, что потенциально может привести к тому, что пользователю придется прокручивать текст по горизонтали, чтобы увидеть всю ширину текста.|
|[[software:development:web:docs:web:html:element:noembed|<noembed>]]| Устаревший, нестандартный способ предоставления альтернативного или «запасного» контента для браузеров, которые не поддерживают элемент встраивания или не поддерживают тип [[software:development:web:docs:web:html:content_categories:content_categories#embedded_content|встроенного контента]], который желает использовать автор. Этот элемент устарел в HTML 4.01 и выше в пользу размещения резервного содержимого между открывающим и закрывающим тегами элемента [[software:development:web:docs:web:html:element:object|<object>]] .|
|[[software:development:web:docs:web:html:element:noframes|<noframes>]]| Предоставляет контент, который будет представлен в браузерах, которые не поддерживают (или отключили поддержку) этого [[software:development:web:docs:web:html:element:frame|<frame>]] элемента. Хотя большинство широко используемых браузеров поддерживают фреймы, существуют исключения, в том числе некоторые браузеры специального назначения, в том числе некоторые мобильные браузеры, а также браузеры с текстовым режимом.|
|[[software:development:web:docs:web:html:element:param|<param>]]| Определяет параметры элемента [[software:development:web:docs:web:html:element:object|<object>]].|
|[[software:development:web:docs:web:html:element:plaintext|<plaintext>]]| Отображает все, что следует за открывающим тегом, как необработанный текст, игнорируя любой следующий HTML. Закрывающего тега нет, так как все, что после него, считается необработанным текстом.|
|[[software:development:web:docs:web:html:element:rb|<rb>]]| Используется для разграничения базового текстового компонента аннотации Ruby, т. е. текста, который аннотируется. Один [[software:development:web:docs:web:html:element:rb|<rb>]] элемент должен обертывать каждый отдельный атомарный сегмент базового текста.|
|[[software:development:web:docs:web:html:element:rtc|<rtc>]]| Охватывает семантические аннотации символов, представленные в рубине [[software:development:web:docs:web:html:element:rb|<rb>]] элементов, используемых внутри [[software:development:web:docs:web:html:element:ruby|<ruby>]] элемента. [[software:development:web:docs:web:html:element:rb|<rb>]] элементы могут иметь как произношение ([[software:development:web:docs:web:html:element:rt|<rt>]] ) , так и семантические ([[software:development:web:docs:web:html:element:rtc|<rtc>]] ) аннотации.|
|[[software:development:web:docs:web:html:element:shadow|<shadow>]]| Устаревшая часть набора технологий [[software:development:web:docs:web:api:Web_components|Web Components]],предназначенная для использования в качестве точки вставки теневой модели DOM. Вы могли бы использовать его, если создали несколько теневых корней под теневым хостом. Рассмотрите возможность использования [[software:development:web:docs:web:html:element:slot|<slot>]] вместо этого.|
|[[software:development:web:docs:web:html:element:spacer|<spacer>]]| Позволяет вставлять пустые места на страницах. Он был разработан Netscape для достижения того же эффекта, что и однопиксельное изображение макета, которое веб-дизайнеры использовали для добавления пробелов на веб-страницы без фактического использования изображения. Однако [[software:development:web:docs:web:html:element:spacer|<spacer>]] больше не поддерживается ни одним крупным браузером, и тех же эффектов теперь можно добиться с помощью простого CSS.|
|[[software:development:web:docs:web:html:element:strike|<strike>]]| Помещает зачеркивание (горизонтальную линию) над текстом.|
|[[software:development:web:docs:web:html:element:tt|<tt>]]| Создает встроенный текст, который представлен с использованием моноширинного шрифта пользовательского агента по умолчанию. Этот элемент был создан для отображения текста в том виде, в котором он будет отображаться на дисплее фиксированной ширины, таком как телетайп, текстовый экран или линейный принтер.|
|[[software:development:web:docs:web:html:element:xmp|<xmp>]]| Отображает текст между начальным и конечным тегами без интерпретации HTML-кода между ними и с использованием моноширинного шрифта. Спецификация HTML2 рекомендовала, чтобы он отображался достаточно широко, чтобы в строке было 80 символов.|

==== Примечание ====
{{:icons:16:hourglass-select.png?|Устаревший. Не для использования на новых web-сайтах.}} - Устаревший. Не для использования на новых web-сайтах. \\  
{{:icons:16:flask.png?|Экспериментальный. Возможно изменение в будущем.}} - Экспериментальный. Возможно изменение в будущем. \\  
{{:icons:16:jar.png?|Нестандартный. Проверьте поддержку браузером.}} - Нестандартный. Проверьте поддержку браузером. \\