diff options
Diffstat (limited to 'files/uk/web/html/element')
| -rw-r--r-- | files/uk/web/html/element/header/index.html | 145 | ||||
| -rw-r--r-- | files/uk/web/html/element/html/index.html | 169 | ||||
| -rw-r--r-- | files/uk/web/html/element/iframe/index.html | 260 | ||||
| -rw-r--r-- | files/uk/web/html/element/index.html | 96 | ||||
| -rw-r--r-- | files/uk/web/html/element/link/index.html | 325 | ||||
| -rw-r--r-- | files/uk/web/html/element/nav/index.html | 99 | ||||
| -rw-r--r-- | files/uk/web/html/element/script/index.html | 243 | ||||
| -rw-r--r-- | files/uk/web/html/element/section/index.html | 173 | ||||
| -rw-r--r-- | files/uk/web/html/element/style/index.html | 201 | ||||
| -rw-r--r-- | files/uk/web/html/element/table/index.html | 371 | ||||
| -rw-r--r-- | files/uk/web/html/element/video/index.html | 420 |
11 files changed, 2502 insertions, 0 deletions
diff --git a/files/uk/web/html/element/header/index.html b/files/uk/web/html/element/header/index.html new file mode 100644 index 0000000000..9ed3c75dfa --- /dev/null +++ b/files/uk/web/html/element/header/index.html @@ -0,0 +1,145 @@ +--- +title: <header> +slug: Web/HTML/Елемент/Заголовок +tags: + - HTML + - HTML елементи +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><header></code> елемент</strong> представляє групу вступних або навігаційних елементів. Він може містити елементи заголовків, а також інші елементи, такі як логотип, форма пошуку та інше.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/uk/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/uk/docs/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/uk/docs/HTML/Content_categories#Flow_content">Flow content</a>, but with no <code><header></code> or {{HTMLElement("footer")}} descendant.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/uk/docs/HTML/Content_categories#Flow_content">flow content</a>. Note that a <code><header></code> element must not be a descendant of an {{HTMLElement("address")}}, {{HTMLElement("footer")}} or another {{HTMLElement("header")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Зауваження_до_використання">Зауваження до використання</h2> + +<p>The <code><header></code> element is not sectioning content and therefore does not introduce a new section in the <a href="/uk/docs/Sections_and_Outlines_of_an_HTML5_document">outline</a>. That said, a <code>header</code> element is intended to usually contain the surrounding <code>section</code>'s heading (an <code>h1</code>–<code>h6</code> element), but this is <strong>not</strong> required.</p> + +<h2 id="Атрибути">Атрибути</h2> + +<p>This element only includes the <a href="/uk/docs/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Приклад">Приклад</h2> + +<pre class="brush: html"><header> + <h1>Main Page Title</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header> +</pre> + +<h1 id="Main_Page_Title">Main Page Title</h1> + +<h2 id="sect1"><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></h2> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}.</li> + <li class="last"><a class="deki-ns current" href="/uk/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of a HTML5 document</a>.</li> +</ul> diff --git a/files/uk/web/html/element/html/index.html b/files/uk/web/html/element/html/index.html new file mode 100644 index 0000000000..22489d772f --- /dev/null +++ b/files/uk/web/html/element/html/index.html @@ -0,0 +1,169 @@ +--- +title: <html> +slug: Web/HTML/Елемент/html +tags: + - Корінь + - Структура +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p>HTML-елемент<strong> <code><html></code></strong> являє собою корінь HTML-документа. Решта елементів мають бути його нащадками.</p> + +<p>Оскільки <strong><code><html></code></strong> є першим (за винятком коментарів) елементом документа, він зветься <em>кореневим елементом</em>. І хоча цей тег може бути відсутнім для {{glossary("HTML")}}, в {{glossary("XHTML")}} він має бути відкритий і закритий явно.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/uk/docs/Web/Guide/HTML/Content_categories">Категорії вмісту</a></th> + <td>Відсутні.</td> + </tr> + <tr> + <th>Дозволений вміст</th> + <td>Один елемент {{HTMLElement("head")}} та один (наступний за ним) елемент {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th>Обов'язковість тегів</th> + <td> + <p>Початковий тег можна опустити, якщо перша річ всередині елементу <html> — не коментар. Кінцевий тег можна опустити тоді, коли одразу після елементу <html><code> немає коментаря</code>, і він містить елемент {{HTMLElement("body")}}, що має або вміст (непустий), або початковий тег.</p> + </td> + </tr> + <tr> + <th>Дозволені пращури</th> + <td>Як кореневий елемент документа, або як піддокумент складного документа там, де це дозволено.</td> + </tr> + <tr> + <th>Інтерфейс DOM</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибути">Атрибути</h2> + +<p><span style="line-height: 21px;">Цей елемент має </span><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальні атрибути</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Вказує URI manifest-файлу, що позначає ресурси, які підлягають локальному кешуванню. Детальніше див. <a href="/en-US/docs/Web/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Using the application cache</a>.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Вказує версію HTML {{glossary("DTD", "Document Type Definition")}} цього документа. Цей атрибут визнано застарілим, вживайте !DOCTYPE замість нього.</dd> + <dt>{{htmlattrdef("xmlns")}} </dt> + <dd>Вказує простір імен (XML) документа. Типове значення <code>"http://www.w3.org/1999/xhtml"</code>. Для XHTML то обов'язковий атрибут, а для HTML може бути відсутнім.</dd> +</dl> + +<h2 id="Приклад">Приклад</h2> + +<div class="note"> +<p>Використаний в прикладі {{glossary("DOCTYPE")}} вказує на {{glossary("HTML5")}}.</p> +</div> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Додано підтримку атрибута <code>manifest</code> (згодом визнаний застарілим).<br> + Атрибут <code>version</code> визнано застарілим.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Атрибут <code>version</code> визнано застарілим.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Підтримка браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Елемент MathML верхнього рівня: {{MathMLElement("math")}}</li> + <li>Елемент SVG верхнього рівня: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/uk/web/html/element/iframe/index.html b/files/uk/web/html/element/iframe/index.html new file mode 100644 index 0000000000..fc5b06a037 --- /dev/null +++ b/files/uk/web/html/element/iframe/index.html @@ -0,0 +1,260 @@ +--- +title: '<iframe>: The Inline Frame element' +slug: Web/HTML/Елемент/iframe +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Элемент <strong>встроенного фрейма HTML ( <code><iframe></code>)</strong> представляет собой вложенный {{Glossary("контекст просмотра")}}, встраивающий другую HTML-страницу в текущую.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> + +<div class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</div> + +<p>Каждый встроенный контекст просмотра имеет собственную <a href="/en-US/docs/Web/API/History">историю сеанса</a> и <a href="/en-US/docs/Web/API/Document">документ</a> . Контекст просмотра, в который встроены остальные, называется <em><dfn>родительским</dfn> контекстом просмотра</em> . Самый <em>верхний</em> контекст просмотра - тот, у которого нет родителя - обычно это окно браузера, представленное объектом {{domxref("Window")}}.</p> + +<div class="blockIndicator warning"> +<p>Поскольку каждый контекст просмотра представляет собой полную среду документа, каждый <code><iframe></code>элемент на странице требует увеличения памяти и других вычислительных ресурсов. Хотя теоретически вы можете использовать сколько <code><iframe></code>угодно s, проверьте, нет ли проблем с производительностью.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Контент потока</a> , <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a> , встроенный контент, интерактивный контент, осязаемый контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td>Никто.</td> + </tr> + <tr> + <th scope="row">Отсутствие тега</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любой элемент, который принимает встроенный контент.</td> + </tr> + <tr> + <th scope="row">Неявная роль ARIA</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLIFrameElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a> .</p> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd>Задает <a href="/en-US/docs/Web/HTTP/Feature_Policy">политику функций</a> для <code><iframe></code>. Политика определяет, какие функции доступны, в <code><iframe></code>зависимости от источника запроса (например, доступ к микрофону, камере, батарее, API общего доступа и т. Д.).<br> + <br> + Для получения дополнительной информации и примеров см .: <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Использование политики функций</a> > <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#The_iframe_allow_attribute">Атрибут разрешения iframe</a> .</dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>Установите значение, <code>true</code>если <code><iframe></code>можно активировать полноэкранный режим путем вызова метода {{domxref("Element.requestFullscreen", "requestFullscreen ()")}}.</dd> + <dd> + <div class="note">Этот атрибут считается устаревшим и переопределяется как <code>allow="fullscreen"</code>.</div> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>Установите, <code>true</code>если <code><iframe></code>необходимо разрешить перекрестному источнику вызывать <a href="/en-US/docs/Web/API/Payment_Request_API">API запроса платежа</a> .</dd> + <dd> + <div class="note">Этот атрибут считается устаревшим и переопределяется как <code>allow="payment"</code>.</div> + </dd> + <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> + <dd><a href="/en-US/docs/Web/HTTP/CSP">Содержание политики безопасности</a> применяются для внедренного ресурса. Подробнее см. {{Domxref("HTMLIFrameElement.csp")}}.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Высота фрейма в пикселях CSS. По умолчанию <code>150</code>.</dd> + <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt> + <dd>Указывает, как браузер должен загружать iframe: + <ul> + <li><code>eager</code>: Немедленно загрузить iframe, независимо от того, находится ли он за пределами видимого окна просмотра (это значение по умолчанию).</li> + <li><code>lazy</code>: Отложить загрузку iframe до тех пор, пока он не достигнет расчетного расстояния от области просмотра, как определено браузером.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Целевое имя для встроенного контекста просмотра. Его можно использовать в <code>target</code>атрибуте элементов {{HTMLElement("a")}}, {{HTMLElement("form")}} или {{HTMLElement("base")}}; <code>formtarget</code>атрибутом {{HTMLElement( "input")}} или {{HTMLElement("button")}} элементов; или <code>windowName</code>параметр в методе {{domxref("Window.open ()", "window.open ()")}}.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Указывает, какой <a href="/en-US/docs/Web/API/Document/referrer">реферер</a> отправлять при выборке ресурса кадра: + <ul> + <li><code>no-referrer</code>: Заголовок {{HTTPHeader("Referer")}} не будет отправлен.</li> + <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> + <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li> + <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> + <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li> + <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> + <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions: + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: Allows for downloads to occur without a gesture from the user.</li> + <li><code>allow-downloads</code>: Allows for downloads to occur with a gesture from the user.</li> + <li><code>allow-forms</code>: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.</li> + <li><code>allow-modals</code>: Lets the resource <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">open modal windows</a>.</li> + <li><code>allow-orientation-lock</code>: Lets the resource <a href="/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li> + <li><code>allow-pointer-lock</code>: Lets the resource use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> + <li><code>allow-popups</code>: Allows popups (such as <code>window.open()</code>, <code>target="_blank"</code>, or <code>showModalDialog()</code>). If this keyword is not used, the popup will silently fail to open.</li> + <li><code>allow-popups-to-escape-sandbox</code>: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.</li> + <li><code>allow-presentation</code>: Lets the resource start a <a href="/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li> + <li><code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the {{Glossary("same-origin policy")}}.</li> + <li><code>allow-scripts</code>: Lets the resource run scripts (but not create popup windows).</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Lets the resource request access to the parent's storage capabilities with the <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li> + <li><code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li> + <li><code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li> + </ul> + + <div class="note"><strong>Notes about sandboxing:</strong> + + <ul> + <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li> + <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li> + <li>The <code>sandbox</code> attribute is unsupported in Internet Explorer 9 and earlier.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the page to embed. Use a value of <code>about:blank</code> to embed an empty page that conforms to the <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">same-origin policy</a>. Also note that programatically removing an <code><iframe></code>'s src attribute (e.g. via {{domxref("Element.removeAttribute()")}}) causes <code>about:blank</code> to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.</dd> + <dt>{{htmlattrdef("srcdoc")}}</dt> + <dd>Inline HTML to embed, overriding the <code>src</code> attribute. If a browser does not support the <code>srcdoc</code> attribute, it will fall back to the URL in the <code>src</code> attribute.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>The width of the frame in CSS pixels. Default is <code>300</code>.</dd> +</dl> + +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<p>These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>The alignment of this element with respect to the surrounding context.</dd> + <dt>{{htmlattrdef("frameborder")}} {{deprecated_inline}}</dt> + <dd>The value <code>1</code> (the default) draws a border around this frame. The value <code>0</code> removes the border around this frame, but you should instead use the CSS property {{cssxref("border")}} to control <code><iframe></code> borders.</dd> + <dt>{{htmlattrdef("longdesc")}} {{deprecated_inline}}</dt> + <dd>A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.</dd> + <dt>{{htmlattrdef("marginheight")}} {{deprecated_inline}}</dt> + <dd>The amount of space in pixels between the frame's content and its top and bottom borders.</dd> + <dt>{{htmlattrdef("marginwidth")}} {{deprecated_inline}}</dt> + <dd>The amount of space in pixels between the frame's content and its left and right borders.</dd> + <dt>{{htmlattrdef("scrolling")}} {{deprecated_inline}}</dt> + <dd>Indicates when the browser should provide a scrollbar for the frame: + <ul> + <li><code>auto</code>: Only when the frame's content is larger than its dimensions.</li> + <li><code>yes</code>: Always show a scrollbar.</li> + <li><code>no</code>: Never show a scrollbar.</li> + </ul> + </dd> +</dl> + +<h3 id="Non-standard_attributes">Non-standard attributes</h3> + +<dl> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd> + <div class="note">See {{bug(1318532)}} for exposing this to WebExtensions in Firefox.</div> + Makes the <code><iframe></code> act like a top-level browser window. See <a href="/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> for details.<br> + <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> +</dl> + +<h2 id="Scripting">Scripting</h2> + +<p>Inline frames, like {{HTMLElement("frame")}} elements, are included in the {{domxref("window.frames")}} pseudo-array.</p> + +<p>With the DOM {{domxref("HTMLIFrameElement")}} object, scripts can access the {{domxref("window")}} object of the framed resource via the {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} property. The {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} property refers to the <code>document</code> inside the <code><iframe></code>, same as <code>contentWindow.document</code>.</p> + +<p>From the inside of a frame, a script can get a reference to its parent window with {{domxref("window.parent")}}.</p> + +<p>Script access to a frame's content is subject to the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using {{domxref("Window.postMessage()")}}.</p> + +<h2 id="Positioning_and_scaling">Positioning and scaling</h2> + +<p>As a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>, the position, alignment, and scaling of the embedded document within the <code><iframe></code> element's box, can be adjusted with the {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example1" name="Example1">A simple <iframe></h3> + +<p>An <code><iframe></code> in action. After creating the frame, when the user clicks a button, its title is displayed in an alert.</p> + +<h4 id="HTML">HTML</h4> + +<div id="htmlOutputWrapper"> +<pre class="brush: html notranslate"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" + title="iframe Example 1" width="400" height="300"> +</iframe></pre> +</div> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Example1', 640,400)}}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>People navigating with assistive technology such as a screen reader can use the <a href="/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code> attribute</a> on an <code><iframe></code> to label its content. The title's value should concisely describe the embedded content:</p> + +<div id="htmlOutputWrapper"> +<pre class="brush: html notranslate"><iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"></iframe></pre> +</div> + +<p>Without this title, they have to navigate into the <code><iframe></code> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <code><iframe></code>s and/or if embeds contain interactive content like video or audio.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Screen Orientation')}}</td> + <td>{{Spec2('Screen Orientation')}}</td> + <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.iframe", 3)}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/Privacy">Конфиденциальность, разрешения и информационная безопасность</a></li> +</ul> diff --git a/files/uk/web/html/element/index.html b/files/uk/web/html/element/index.html new file mode 100644 index 0000000000..47bdb3f0fb --- /dev/null +++ b/files/uk/web/html/element/index.html @@ -0,0 +1,96 @@ +--- +title: Опис HTML елементів +slug: Web/HTML/Елемент +translation_of: Web/HTML/Element +--- +<p>{{HTMLSidebar("Elements")}}</p> + +<p><span class="seoSummary">This page lists all the {{Glossary("HTML")}} {{Glossary("Element","elements")}}.</span> They are grouped by function to help you find what you have in mind easily. Although this guide is written for those who are newer to coding, we intend it to be useful for anyone.</p> + +<h2 id="Основні_елементи">Основні елементи</h2> + +<p>Основні елементи є основою будь-якого HTML-документа. You'll see these elements in the source code for all web pages, following the doctype declaration, which is on the first line of the page. The doctype specifies which version of (X)HTML that page is using. Elements comprising the contents of a Web page are placed between the opening {{HTMLElement("html")}} tag and the closing <code></html></code> tag. The {{HTMLElement("html")}} element is also known as the root element.</p> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Метадані_документу" style="line-height: 30px; font-size: 2.14285714285714rem;">Метадані документу</h2> + +<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Поділ_вмісту" style="line-height: 30px; font-size: 2.14285714285714rem;">Поділ вмісту</h2> + +<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. </p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Текстовий_вміст" style="line-height: 30px; font-size: 2.14285714285714rem;">Текстовий вміст</h2> + +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content. </p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Вбудована_семантика_тексту" style="line-height: 30px; font-size: 2.14285714285714rem;">Вбудована семантика тексту</h2> + +<p>Використовуйте вбудованний семантичний текст HTML, щоб визначити значення, структуру чи стиль слова, рядка чи будь-якого довільного фрагмента тексту.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Зображення_та_мультимедіа" style="line-height: 30px; font-size: 2.14285714285714rem;">Зображення та мультимедіа</h2> + +<p>HTML підтримує різні мультименійні ресурси, такі як зображення, аудіо та відео.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Вкладений_контент" style="line-height: 30px; font-size: 2.14285714285714rem;">Вкладений контент</h2> + +<p>Окрім звичайного мультимедійного контенту, HTML може включати в себе ще й інший вміст, навіть якщо з ним не завжди легко взаємодіяти.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Сценарій" style="line-height: 30px; font-size: 2.14285714285714rem;">Сценарій</h2> + +<p>Для створення динамічного контенту та веб-додатків,HML підтримує використання мов сценаріїв, найбільш чітко JavaScript. Деякі елементи підтримують цю можливість.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Розмежувальні_зміни" style="line-height: 30px; font-size: 2.14285714285714rem;">Розмежувальні зміни</h2> + +<p>Ці елементи дозволяють вказати, що конкретні частини тексту були змінені.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Зміст_таблиці" style="line-height: 30px; font-size: 2.14285714285714rem;">Зміст таблиці</h2> + +<p>Елементи які тут знаходяться, використовуються для створення та обробки табличних даних.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Форми" style="line-height: 30px; font-size: 2.14285714285714rem;">Форми</h2> + +<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> + +<p>{{HTMLRefTable("HTML forms")}}</p> + +<h2 id="Interactive_elements" style="line-height: 30px; font-size: 2.14285714285714rem;">Interactive elements</h2> + +<p>HTML offers a selection of elements which help to create interactive user interface objects.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components" style="line-height: 30px; font-size: 2.14285714285714rem;">Web Components</h2> + +<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can even create custom versions of standard HTML elements, as well.</p> + +<div class="note"><strong>Note: </strong>The elements for Web Components are are defined in the {{Glossary("W3C","World Wide Web Consortium")}} (W3C) <a href="http://www.w3.org/TR/components-intro/" title="http://www.w3.org/TR/components-intro/">Web Components collection of specifications</a> rather than the HTML specification. In addition, the Web Components specification has not been finalized and is subject to change.</div> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Obsolete_and_deprecated_elements" style="line-height: 30px; font-size: 2.14285714285714rem;">Obsolete and deprecated elements</h2> + +<div class="warning" style="font-size: 14px;"> +<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/uk/web/html/element/link/index.html b/files/uk/web/html/element/link/index.html new file mode 100644 index 0000000000..27f4e1b487 --- /dev/null +++ b/files/uk/web/html/element/link/index.html @@ -0,0 +1,325 @@ +--- +title: '<link>: The External Resource Link element' +slug: Web/HTML/Елемент/link +translation_of: Web/HTML/Element/link +--- +<div><font><font>{{HTMLRef}}</font></font></div> + +<p><font><font>Елемент </font></font><strong><font><font>посилання зовнішнього ресурсу HTML ( </font></font><code><link></code><font><font>)</font></font></strong><font><font> визначає відносини між поточним документом і зовнішнім ресурсом. </font><font>Цей елемент найчастіше використовується для посилання на {{Glossary ("CSS", "stylesheets")}}, але також використовується для встановлення значків сайтів (іконок стилів favicon і мобільного домашнього екрана / значків програм) .</font></font></p> + +<div><font><font>{{EmbedInteractiveExample ("сторінки / вкладки / link.html")}}</font></font></div> + +<div class="hidden"><font><font>Джерело для цього інтерактивного прикладу зберігається в сховищі GitHub. </font><font>Якщо ви хочете внести свій внесок до проекту інтерактивних прикладів, будь ласка, клонуйте </font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font> і надішліть нам запит pull.</font></font></div> + +<p><font><font>Щоб пов’язати зовнішню таблицю стилів, потрібно включити </font></font><code><link></code><font><font>елемент у {{HTMLElement ("head")}} так:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link href = "main.css" rel = "stylesheet"></font></font></pre> + +<p><font><font>Цей простий приклад надає шлях до таблиці стилів всередині </font></font><code>href</code><font><font>атрибута і </font></font><code>rel</code><font><font>атрибут зі значенням </font></font><code>stylesheet</code><font><font>. </font><font>Поняття </font></font><code>rel</code><font><font>"відносини", і, можливо, одна з ключових особливостей </font></font><code><link></code><font><font>елемента - значення позначає, як пов'язаний елемент пов'язаний з документом, що містить. </font><font>Як видно з </font></font><a href="/en-US/docs/Web/HTML/Link_types"><font><font>посилання на типи</font></font></a><font><font> посилань, існує багато різних типів відносин.</font></font></p> + +<p><font><font>Існує ряд інших поширених типів. </font><font>Наприклад, посилання на значок сайту:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link rel = "icon" href = "favicon.ico"></font></font></pre> + +<p><font><font>Існує ряд інших </font></font><code>rel</code><font><font>значень </font><font>значків </font><font>, які в основному використовуються для позначення спеціальних типів піктограм для використання на різних мобільних платформах, наприклад:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link rel = "розмір яблуко-значка-попередній" розмір = "114x114"</font></font><font><font> + href = "apple-icon-114.png" type = "image / png"></font></font></pre> + +<p><code>sizes</code><font><font>Атрибут вказує розмір значків, в </font><font>той час як </font></font><code>type</code><font><font>містить MIME - </font><font>тип ресурсу пов'язані між собою </font><font>. </font><font>Вони надають корисні поради, які дозволяють браузеру вибрати найбільш доступну піктограму.</font></font></p> + +<p><font><font>Ви також можете вказати тип або запит носія в </font></font><code>media</code><font><font>атрибуті; </font><font>цей ресурс буде завантажено лише в тому випадку, якщо умова носія є істинною. </font><font>Наприклад:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link href = "print.css" rel = "stylesheet" media = "print"></font></font><font><font> +<link href = "mobile.css" rel = "stylesheet" media = "екран і (max-width: 600px)</font></font></pre> + +<p><font><font>До </font></font><code><link></code><font><font>елемента також </font><font>додано кілька цікавих нових функцій продуктивності та безпеки </font><font>. </font><font>Візьміть цей приклад:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link rel = "preload" href = "myFont.woff2" як = "шрифт"</font></font><font><font> + type = "font / woff2" crossorigin = "anonymous"></font></font></pre> + +<p><code>rel</code><font><font>Значення </font></font><code>preload</code><font><font>вказує на те, </font><font>що браузер повинен попередньо завантажити цей ресурс (див </font></font><a href="/en-US/docs/Web/HTML/Preloading_content"><font><font>предзагрузкі зміст з отн = "переднавантаження»</font></font></a><font><font> для отримання </font><font>більш докладної інформації), з </font></font><code>as</code><font><font>атрибутом , </font><font>що вказує певний клас контенту, витягується. </font></font><code>crossorigin</code><font><font>Атрибут вказує , </font><font>чи повинен ресурс бути залучена з {{Глосарій ( «CORS»)}} запитом.</font></font></p> + +<p><font><font>Інші примітки щодо використання:</font></font></p> + +<ul> + <li><code><link></code><font><font>Елемент може відбуватися або в {{HTMLElement ( «голова»)}} або {HTMLElement} {( «тіло»)} елемента, в </font><font>залежності від того, </font><font>чи має він </font></font><a href="https://html.spec.whatwg.org/multipage/links.html#body-ok"><font><font>тип зв'язку</font></font></a><font><font> , який є </font></font><strong><font><font>тілом-ок</font></font></strong><font><font> . </font><font>Наприклад, </font></font><code>stylesheet</code><font><font>тип зв'язку - це тіло-ok, і тому </font></font><code><link rel="stylesheet"></code><font><font>дозволено в тілі. </font><font>Проте, це не хороша практика; </font><font>більше сенсу відокремлювати </font></font><code><link></code><font><font>елементи від вмісту тіла, розміщуючи їх у </font></font><code><head></code><font><font>.</font></font></li> + <li><font><font>При використанні </font></font><code><link></code><font><font>для створення значка Favicon для сайту, і ваш сайт використовує політику безпеки контенту (CSP) для підвищення своєї безпеки, політика застосовується до позначки. </font><font>Якщо у </font><font>вас виникли проблеми з Favicon не завантажується, переконайтеся , </font><font>що {{HTTPHeader ( «Content-Security-Policy»)}} заголовка по </font></font><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code><font><font>директиві</font></font></a><font><font> не запобігання доступу до нього.</font></font></li> + <li><font><font>Специфікації HTML і XHTML визначають обробники подій для </font></font><code><link></code><font><font>елемента, але незрозуміло, як вони будуть використовуватися.</font></font></li> + <li><font><font>Під XHTML 1.0, порожні елементи , </font><font>такі як </font></font><code><link></code><font><font>вимагають слеш: </font></font><code><link /></code><font><font>.</font></font></li> + <li><font><font>WebTV підтримує використання значення </font></font><code>next</code><font><font>для </font></font><code>rel</code><font><font>попереднього завантаження наступної сторінки в серії документів.</font></font></li> +</ul> + +<h2 id="Атрибути"><font><font>Атрибути</font></font></h2> + +<p><font><font>Цей елемент включає </font></font><a href="/en-US/docs/Web/HTML/Global_attributes"><font><font>глобальні атрибути</font></font></a><font><font> .</font></font></p> + +<dl> + <dt><font><font>{{HTMLAttrDef ("as")}}</font></font></dt> + <dd><font><font>Цей атрибут використовується тільки тоді, коли </font></font><code>rel="preload"</code><font><font>або </font></font><code>rel="prefetch"</code><font><font>було встановлено на </font></font><code><link></code><font><font>елементі. </font><font>Вона визначає тип завантажуваного контенту </font></font><code><link></code><font><font>, який необхідний для визначення пріоритетів вмісту, відповідності запиту, застосування правильної </font></font><a href="/en-US/docs/Web/HTTP/CSP"><font><font>політики безпеки контенту</font></font></a><font><font> та встановлення правильного заголовка запиту {{HTTPHeader ("Accept")}}.</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("crossorigin")}}</font></font></dt> + <dd><font><font>Цей перерахований атрибут вказує, чи слід використовувати {{Глосарій ("CORS")}} при отриманні ресурсу. </font></font><a href="/en-US/docs/Web/HTML/CORS_Enabled_Image"><font><font>Зображення з підтримкою CORS</font></font></a><font><font> можна повторно використовувати в елементі {{HTMLElement ("canvas")}}, не </font></font><em><font><font>засмучуючись</font></font></em><font><font> . </font><font>Дозволені значення:</font></font> + <dl> + <dt><code>anonymous</code></dt> + <dd><font><font>Запит на перехресне походження (тобто з HTTP-заголовком {{HTTPHeader ("Походження")}} виконується, але не надсилаються дані облікового запису (тобто, файли cookie, сертифікат X.509 або HTTP Basic). </font><font>Якщо сервер не надає облікових даних сайту (не встановлюючи заголовок HTTPHeader ("Access-Control-Allow-Origin")}} HTTPHeader, зображення буде заплямовано, а його використання обмежене.</font></font></dd> + <dt><code>use-credentials</code></dt> + <dd><font><font>Запит на перехресне походження (тобто з </font></font><code>Origin</code><font><font>заголовком HTTP) виконується разом із відправленими обліковими даними (тобто виконується cookie, сертифікат та / або HTTP Basic аутентифікація). </font><font>Якщо сервер не надає облікових даних сайту (через {{HTTPHeader ("Access-Control-Allow-Credentials")} HTTP-заголовок), ресурс буде </font></font><em><font><font>заплямовано</font></font></em><font><font> і його використання буде обмежене.</font></font></dd> + </dl> + <font><font>Якщо атрибут відсутній, ресурс вибирається без запиту {{Glossary ("CORS")}} (тобто без відправлення </font></font><code>Origin</code><font><font>заголовка HTTP), що запобігає його непрямому використанню. </font><font>Якщо він недійсний, він обробляється так, якби </font><font>було використано </font></font><strong><font><font>анонімне</font></font></strong><font><font> перераховане ключове слово </font><font>. </font><font>Див </font></font><a href="/en-US/docs/Web/HTML/CORS_settings_attributes"><font><font>настройки CORS атрибути</font></font></a><font><font> для отримання </font><font>додаткової інформації.</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("href")}}</font></font></dt> + <dd><font><font>Цей атрибут визначає {{глосарій ("URL")}} пов'язаного ресурсу. </font><font>URL-адреса може бути абсолютною або відносною.</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("hreflang")}}</font></font></dt> + <dd><font><font>Цей атрибут вказує мову пов'язаного ресурсу. </font><font>Це суто консультативний характер. </font><font>Дозволені значення визначаються </font></font><a href="https://www.ietf.org/rfc/bcp/bcp47.txt"><font><font>BCP47</font></font></a><font><font> . </font><font>Використовуйте цей атрибут, лише якщо присутній атрибут {{HTMLAttrxRef ("href", "a")}}.</font></font></dd> + <dt id="name-attribute"><font><font>{{HTMLAttrDef ("значення")}} {{Experimental_Inline}}</font></font></dt> + <dd><font><font>Вказує відносну важливість ресурсу. </font><font>Підказки щодо пріоритетів делегуються за допомогою значень:</font></font></dd> + <dd> + <p><strong><code>auto</code></strong><font><font>: Вказує на </font></font><strong><font><font>відсутність уподобань</font></font></strong><font><font> . </font><font>Для визначення пріоритету ресурсу браузер може використовувати власну евристику.</font></font></p> + + <p><strong><code>high</code></strong><font><font>: Вказує браузеру, що ресурс має </font></font><strong><font><font>високий</font></font></strong><font><font> пріоритет.</font></font></p> + + <p><strong><code>low</code></strong><font><font>: Вказує браузеру, що ресурс має </font></font><strong><font><font>низький</font></font></strong><font><font> пріоритет.</font></font></p> + + <div class="blockIndicator note"> + <p><strong><font><font>Примітка:</font></font></strong><code>importance</code><font><font> атрибут може бути використаний тільки для </font></font><code><link></code><font><font>елемента , </font><font>якщо </font></font><code>rel="preload"</code><font><font>або </font></font><code>rel="prefetch"</code><font><font>присутній.</font></font></p> + </div> + </dd> + <dt><font><font>{{HTMLAttrDef ("цілісність")}} {{Experimental_Inline}}</font></font></dt> + <dd><font><font>Містить вбудовані метадані - криптографічний хеш-код, зашифрований за допомогою base64, який повідомляє веб-переглядачу. </font><font>Цей веб-переглядач може використовувати це, щоб переконатися, що отриманий ресурс доставлений без несподіваних маніпуляцій. </font><font>Див </font></font><a href="/en-US/docs/Web/Security/Subresource_Integrity"><font><font>Subresource цілісності</font></font></a><font><font> .</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("медіа")}}</font></font></dt> + <dd><font><font>Цей атрибут визначає носій, до якого застосовується пов'язаний ресурс. </font><font>Його значення має бути тип </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>медіа</font></font></a><font><font> / </font><a href="/en-US/docs/Web/CSS/Media_queries"><font>медіа-запит</font></a><font> . </font><font>Цей атрибут є в основному корисним при підключенні до зовнішніх таблиць стилів - це дозволяє користувальницькому агенту підібрати найбільш адаптований для пристрою, на якому він працює.</font></font> + <div class="blockIndicator note"> + <p><strong><font><font>Примітки:</font></font></strong></p> + + <ul> + <li><font><font>В HTML 4, це може бути тільки простий білий список розділених пробілами опису медіа - </font><font>литералов, тобто </font></font><a href="/en-US/docs/Web/CSS/@media"><font><font>типів і груп</font></font></a><font><font> , в </font><font>яких визначені і дозволені в </font><font>якості значень для цього атрибута, наприклад </font></font><code>print</code><font><font>, </font></font><code>screen</code><font><font>, </font></font><code>aural</code><font><font>, </font></font><code>braille</code><font><font>. </font><font>HTML5 розширив це до будь-яких типів </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>медіа-запитів</font></font></a><font><font> , які є набором допустимих значень HTML 4.</font></font></li> + <li><font><font>Браузери, які не підтримують </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>CSS3 Media Queries</font></font></a><font><font> , не обов'язково розпізнають адекватне посилання; </font><font>не забувайте встановлювати резервні посилання, обмежений набір медіа-запитів, визначених у HTML 4.</font></font></li> + </ul> + </div> + </dd> + <dt><font><font>{{HTMLAttrDef ("referrerpolicy")}} {{Experimental_Inline}}</font></font></dt> + <dd><font><font>Рядок, який вказує, який референт використовувати для отримання ресурсу:</font></font> + <ul> + <li><code>no-referrer</code><font><font> означає, що заголовок {{HTTPHeader ("Referer")}} не буде надіслано.</font></font></li> + <li><code>no-referrer-when-downgrade</code><font><font>означає, що заголовок {{HTTPHeader ("Referer")}} не буде надіслано при переміщенні до джерела без TLS (HTTPS). </font><font>Це поведінка користувача агента за замовчуванням, якщо інша політика не вказана.</font></font></li> + <li><code>origin</code><font><font> означає, що реферер буде походженням сторінки, що є приблизно схемою, хостом і портом.</font></font></li> + <li><code>origin-when-cross-origin</code><font><font> означає, що навігація до інших джерел буде обмежена схемою, хостом і портом, під час навігації за тим же походженням буде включено шлях реферера.</font></font></li> + <li><code>unsafe-url</code><font><font>означає, що реферер буде включати походження та шлях (але не фрагмент, пароль або ім'я користувача). </font><font>Цей випадок є небезпечним, оскільки може витікати джерела та шляхи від ресурсів, захищених TLS, до небезпечного походження.</font></font></li> + </ul> + </dd> + <dt><font><font>{{HTMLAttrDef ("rel")}}</font></font></dt> + <dd><font><font>Цей атрибут іменує відношення пов'язаного документа до поточного документа. </font><font>Атрибут повинен бути розділеним пробілами списком </font></font><a href="/en-US/docs/Web/HTML/Link_types"><font><font>значень типів посилань</font></font></a><font><font> .</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("розміри")}}</font></font></dt> + <dd><font><font>Цей атрибут визначає розміри піктограм для візуальних медіа, що містяться в ресурсі. </font><font>Він повинен бути присутнім, лише якщо {{HTMLAttrxRef ("rel", "link")}} містить значення </font></font><code>icon</code><font><font>або нестандартний тип, наприклад, Apple </font></font><code>apple-touch-icon</code><font><font>. </font><font>Він може мати такі значення:</font></font> + <ul> + <li><code>any</code><font><font>, що означає, що іконку можна масштабувати до будь-якого розміру, як у векторному форматі, наприклад </font></font><code>image/svg+xml</code><font><font>.</font></font></li> + <li><font><font>список розмірів, розділений білим простором, кожен у форматі </font><font>або </font><font>. </font><font>Кожен з цих розмірів повинен міститися в ресурсі.</font></font><code><em><width in pixels></em>x<em><height in pixels></em></code><code><em><width in pixels></em>X<em><height in pixels></em></code></li> + </ul> + + <div class="blockIndicator note"> + <p><strong><font><font>Примітка.</font></font></strong><font><font> Більшість форматів піктограм можуть зберігати лише одну піктограму; </font><font>тому більшу частину часу {{HTMLAttrxRef ("розміри")}} містить тільки один запис. </font><font>Формат ICO MS, як і ICNS від Apple. </font><font>ICO є більш повсюдним; </font><font>Ви обов'язково повинні використовувати його.</font></font></p> + </div> + </dd> + <dt><font><font>{{HTMLAttrDef ("назва")}}</font></font></dt> + <dd><code>title</code><font><font>Атрибут має спеціальну семантику на </font></font><code><link></code><font><font>елементі. </font><font>При використанні на ньому </font></font><code><link rel="stylesheet"></code><font><font>він визначає </font></font><a href="/en-US/docs/Web/CSS/Alternative_style_sheets"><font><font>бажану або альтернативну таблицю стилів</font></font></a><font><font> . </font><font>Неправильне використання може </font></font><a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets"><font><font>призвести до ігнорування таблиці стилів</font></font></a><font><font> .</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("type")}}</font></font></dt> + <dd><font><font>Цей атрибут використовується для визначення типу змісту, з яким пов'язаний. </font><font>Значення атрибута має бути типом MIME, таким як </font></font><strong><font><font>text / html</font></font></strong><font><font> , </font></font><strong><font><font>text / css</font></font></strong><font><font> і так далі. </font><font>Загальним використанням цього атрибуту є визначення типу стильової таблиці, на яку посилаються (наприклад, </font></font><strong><font><font>текст / css</font></font></strong><font><font> ), але враховуючи, що CSS є єдиною мовою таблиць стилів, що використовується в Інтернеті, не тільки можна опустити </font></font><code>type</code><font><font>атрибут, але й насправді тепер рекомендується практика. </font><font>Він також використовується для </font></font><code>rel="preload"</code><font><font>типів посилань, щоб переконатися, що браузер завантажує лише типи файлів, які він підтримує.</font></font></dd> +</dl> + +<h3 id="Нестандартні_атрибути"><font><font>Нестандартні атрибути</font></font></h3> + +<dl> + <dt><font><font>{{HTMLAttrDef ("вимкнено")}} {{Нестандартний_Інтернет}}</font></font></dt> + <dd>This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships. + <div class="blockIndicator note"> + <p><strong>Note: </strong>While there is no <code>disabled</code> attribute in the HTML standard, there <strong>is</strong> a <code>disabled</code> attribute on the <code>HTMLLinkElement</code> DOM object.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> +</dl> + +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>. + <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p> + + <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.</p> + </div> + </dd> +</dl> + +<h2 id="Styling_with_CSS">Styling with CSS</h2> + +<p>The <code><link></code> element has no visual presence on a web document, therefore it has no styling considerations to worry about.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Including_a_stylesheet">Including a stylesheet</h3> + +<p>To include a stylesheet in a page, use the following syntax:</p> + +<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Providing_alternative_stylesheets">Providing alternative stylesheets</h3> + +<p>You can also specify <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p> + +<p>The user can choose which style sheet to use by choosing it from the View > Page Style menu. This provides a way for users to see multiple versions of a page.</p> + +<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="Providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3> + +<p>You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p> + +<pre class="brush: html no-line-numbers"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- basic favicon --> +<link rel="icon" href="favicon32.png"></pre> + +<h3 id="Conditionally_loading_resources_with_media_queries">Conditionally loading resources with media queries</h3> + +<p>You can provide a media type or query inside a <code>media</code> attribute; this resource will then only be loaded if the media condition is true. For example:</p> + +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="all"> +<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> +<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> +</pre> + +<h3 id="Stylesheet_load_events">Stylesheet load events</h3> + +<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p> + +<pre class="brush: html"><script> +var myStylesheet = document.querySelector('#my-stylesheet'); + +myStylesheet.onload = function() { + // Do something interesting; the sheet has been loaded +} + +myStylesheet.onerror = function() { + console.log("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</p> +</div> + +<h3 id="Preload_examples">Preload examples</h3> + +<p>You can find a number of <link rel="preload"> examples in <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a>.</p> + +<h2 id="Technical_summary">Technical summary</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Metadata content. If <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> and <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th>Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Tag omission</th> + <td>As it is a void element, the start tag must be present and the end tag must not be present</td> + </tr> + <tr> + <th>Permitted parents</th> + <td>Any element that accepts metadata elements. If <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> is present: any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td>Defines <code><link rel="preload"></code>, and the <code>as</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td>Added the <code>integrity</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No changes from latest snapshot</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Added <code>crossorigin</code> and <code>sizes</code> attributes; extended values of <code>media</code> to any media queries; added numerous new values for <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code>, and <code>prerender</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"><font><font>Таблиця сумісності на цій сторінці генерується зі структурованих даних. </font><font>Якщо ви хочете внести свій внесок до даних, зверніться до </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> та надішліть нам запит pull.</font></font></div> + +<p><font><font>{{Compat ("html.elements.link", 3)}}</font></font></p> + +<h2 id="Дивіться_також"><font><font>Дивіться також</font></font></h2> + +<ul> + <li><font><font>Заголовок HTTPHeader ("Link")}} HTTP</font></font></li> + <li><a href="https://pie.gd/test/script-link-events/"><font><font><script> і <link> графік сумісності подій у Ryan Grove</font></font></a></li> +</ul> diff --git a/files/uk/web/html/element/nav/index.html b/files/uk/web/html/element/nav/index.html new file mode 100644 index 0000000000..4cda3e63f2 --- /dev/null +++ b/files/uk/web/html/element/nav/index.html @@ -0,0 +1,99 @@ +--- +title: <nav> +slug: Web/HTML/Елемент/nav +tags: + - HTML секції + - Веб + - Елемент + - Навігація + - Посилання +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-елемент <code><nav></code></strong> (<em>HTML елемент навігації</em>) являє собою секцію сторінки, котра має посилання на інші сторінки або блоки в межах поточної сторінки.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Категорії контенту</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Потоковий контент</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content" title="HTML/Content categories#Sectioning_content">секційний контент</a>, тактильний контент.</td> + </tr> + <tr> + <th scope="row">Дозволений контент</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Потоковий контент</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск закриваючого тега</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Дозволені батьківські елементи</th> + <td>Будь-який елемент, що приймає <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">потоковий контент</a>.</td> + </tr> + <tr> + <th scope="row">DOM інтерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибути">Атрибути</h2> + +<p><span style="line-height: 21px;">Цей елемент може містити лише </span><a href="/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальні атрибути</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Зауваження_щодо_використання">Зауваження щодо використання</h2> + +<ul> + <li>Не всі посилання документа мають бути в елементі <code><nav></code>, бо він призначений для головних блоків навігаційних посилань. Наприклад, елемент {{HTMLElement("footer")}} зазвичай містить перелік посилань, які не потрібно розміщувати у елементі {{HTMLElement("nav")}};</li> + <li>Документ може містити кілька елементів {{HTMLElement("nav")}} (наприклад, один для навігації по сайту, а інший — для навігції в межах сторінки);</li> + <li>Деякі програмні засоби для людей з вадами зору, часто можуть використовувати цей елемент щоб визначити, чи слід пропускати початкове відтворення даного вмісту.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: html"><nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contact</a></li> + </ul> +</nav> +</pre> + +<h2 id="Specifications" name="Specifications">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Жодних змін після останнього W3C Snapshot.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Первинне визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("html.elements.nav")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Інші секційні елементи: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/uk/web/html/element/script/index.html b/files/uk/web/html/element/script/index.html new file mode 100644 index 0000000000..10b6e5096d --- /dev/null +++ b/files/uk/web/html/element/script/index.html @@ -0,0 +1,243 @@ +--- +title: '<script>: Елементи тега Script' +slug: Web/HTML/Елемент/script +translation_of: Web/HTML/Element/script +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><script></code> </strong>елемент використовується для вбудовування або посилання виконавчого коду; зазвичай використовується для вбудовування або посилання на код JavaScript.</span> Тег <code><script> може</code> бути використаний для других мов програмування, такі як <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>'s GLSL та мов для створення шейдерів.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Категорія вмісту</th> + <td><a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">Мета дата</a>, <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Плаваючий контент</a>, <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Зміст фразування</a>.</td> + </tr> + <tr> + <th scope="row">Дозволений вміст</th> + <td>Динамічний сценарій, такий як text/javascript.</td> + </tr> + <tr> + <th scope="row">Опущення тегів</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Дозволені батьки</th> + <td>Будь-який елемент, який приймає вміст <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">метаданих</a>, або будь-який елемент, який приймає <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">вміст фраз</a>.</td> + </tr> + <tr> + <th scope="row">Дозволені ролі ARIA</th> + <td>Немае</td> + </tr> + <tr> + <th scope="row">DOM-інтерфейс</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>Цей елемент включає <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</p> + +<dl> + <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt> + <dd> + <p>This is a Boolean attribute indicating that the browser should, if possible, load the script asynchronously and then execute it as soon as it’s downloaded.</p> + + <div class="warning"> + <p>This attribute must not be used if the <code>src</code> attribute is absent (i.e. for inline scripts). If it is included in this case it will have no effect.</p> + </div> + + <p>Browsers usually assume the worst case scenario and load scripts synchronously, (i.e. <code>async="false"</code>) during HTML parsing.</p> + + <p>Dynamically inserted scripts (using {{domxref("document.createElement()")}}) load asynchronously by default, so to turn on synchronous loading (i.e. scripts load in the order they were inserted) set <code>async="false"</code>.</p> + + <p>This attribute allows the elimination of <strong>render-blocking JavaScript</strong> where the page would have to load and execute scripts before finishing to render the page. <code>defer</code> has a similar effect in this case.</p> + + <p>See {{anch("Browser compatibility")}} for notes on browser support. See also <a href="/en-US/docs/Games/Techniques/Async_scripts">Async scripts for asm.js</a>.</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Normal <code>script</code> elements pass minimal information to the {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} for scripts which do not pass the standard {{Glossary("CORS")}} checks. To allow error logging for sites which use a separate domain for static media, use this attribute. See <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> for a more descriptive explanation of its valid arguments.</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd> + <p>This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing {{event("DOMContentLoaded")}}.</p> + + <p>Scripts with the <code>defer</code> attribute will prevent the <code>DOMContentLoaded</code> event from firing until the script has loaded and finished evaluating.</p> + + <div class="warning"> + <p>This attribute must not be used if the <code>src</code> attribute is absent (i.e. for inline scripts), in this case it would have no effect.</p> + </div> + + <p>To achieve a similar effect for dynamically inserted scripts use <code>async="false"</code> instead. Scripts with the <code>defer</code> attribute will execute in the order in which they appear in the document.</p> + + <p>This attribute allows the elimination of <strong>render-blocking JavaScript</strong> where the page would have to load and execute scripts before finishing to render the page. <code>async</code> has a similar effect in this case.</p> + </dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd>This Boolean attribute is set to indicate that the script should not be executed in browsers that support<a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/"> ES2015 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Indicates which <a href="/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the script, or resources fetched by the script: + <ul> + <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> + <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li> + <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> + <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li> + <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure destination (e.g. HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, but only send the origin when the protocol security level stays the same (e.g.HTTPS→HTTPS), and send no header to a less secure destination (e.g. HTTPS→HTTP).</li> + <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>Note</strong>: An empty string value (<code>""</code>) is both the default value, and a fallback value if <code>referrerpolicy</code> is not supported. If <code>referrerpolicy</code> is not explicitly specified on the <code><script></code> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to <code>no-referrer-when-downgrade</code>.</p> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd> + <p>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document.</p> + + <div class="warning"> + <p>If a <code>script</code> element has a <code>src</code> attribute specified, it should not have a script embedded inside its tags since it can lead to unexpected behavior. The unexpected behavior is because it is only the JavaScript in the file referenced in the <code>src</code> attribute that will be added to the HTML page.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>This attribute indicates the type of script represented. The value of this attribute will be in one of the following categories:</p> + + <ul> + <li><strong>Omitted or a JavaScript MIME type:</strong> This indicates the script is JavaScript. The HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code. JavaScript MIME types are <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">listed in the specification</a>.</li> + <li><strong><code>module</code>:</strong> Causes the code to be treated as a JavaScript module. The processing of the script contents is not affected by the <code>charset</code> and <code>defer</code> attributes. For information on using <code>module</code>, see our <a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide.</li> + <li><strong>Any other value:</strong> The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The <code>src</code> attribute will be ignored.</li> + </ul> + + <div class="note"> + <p><strong>Note: </strong>in Firefox you could specify the version of JavaScript contained in a <code><script></code> element by including a non-standard <code>version</code> parameter inside the <code>type</code> attribute — for example <code>type="text/javascript;version=1.8"</code>. This has been removed in Firefox 59 (see {{bug(1428745)}}).</p> + </div> + </dd> +</dl> + +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". It’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<p>Scripts without {{HTMLAttrxRef("async", "script")}} , {{HTMLAttrxRef("defer", "script")}} or <code>type="module"</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p> + +<p>The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>); a video type (<code>video/*</code>); an audio (<code>audio/*</code>) type; or <code>text/csv</code>. If the script is blocked, an {{event("error")}} is sent to the element, if not a {{event("load")}} event is sent.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_usage">Basic usage</h3> + +<p>These examples show how to import (an external) script using the <code><script></code> element in both HTML4 and HTML5:</p> + +<pre class="brush: html"><!-- HTML4 --> +<script type="text/javascript" src="javascript.js"></script> + +<!-- HTML5 --> +<script src="javascript.js"></script> +</pre> + +<p>And the following examples show how to put (an inline) script inside the <code><script></code> element in both HTML4 and HTML5:</p> + +<pre class="brush: html"><!-- HTML4 --> +<script type="text/javascript"> + alert("Hello World!"); +</script> + +<!-- HTML5 --> +<script> + alert("Hello World!"); +</script></pre> + +<h3 id="Module_fallback">Module fallback</h3> + +<p>Browsers that support the <code>module</code> value for the <code>type</code> attribute ignore any script with a <code>nomodule</code> attribute. That enables you to use module scripts while also providing <code>nomodule</code>-marked fallback scripts for non-supporting browsers.</p> + +<pre class="brush: html"><script type="module" src="main.js"></script> +<script nomodule src="fallback.js"></script></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Adds the <code>module</code> {{HTMLAttrxRef("type", "script")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "<script>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "<script>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td>Adds the {{HTMLAttrxRef("integrity", "script")}} attribute.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<div>{{Compat("html.elements.script", 2)}}</div> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p> + +<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>async="false"</code> on the scripts you want to maintain order.</p> + +<div class="warning"> +<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> + <li><a href="https://flaviocopes.com/javascript-async-defer/">Flavio Copes' article on loading JavaScript efficiently and explaining the differences between <code>async</code> and <code>defer</code></a></li> + <li><code><a href="https://bytutorial.com/tutorials/javascript">Javascript tips and tricks</a>.</code></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</li> +</ul> diff --git a/files/uk/web/html/element/section/index.html b/files/uk/web/html/element/section/index.html new file mode 100644 index 0000000000..5b01234161 --- /dev/null +++ b/files/uk/web/html/element/section/index.html @@ -0,0 +1,173 @@ +--- +title: <section> +slug: Web/HTML/Елемент/section +tags: + - HTML + - HTML секції + - Ве + - Елемент + - Посилання +translation_of: Web/HTML/Element/section +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML елемент <code><section></code></strong> являє собою узагальнену секцію документу, яка допомагає категоризувати контент, зазвичай, заголовком. Кожний елемент <code><section></code> повинен бути ідентифікований, зазвичай, використанням заголовків ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} element) в якості дочірнього елементу <code><section></code>.</p> + +<div class="note"> +<p><em>Зауваження щодо використання :</em></p> + +<ul> + <li>Якщо є доцільним розбивати на категорії контент у елементі {{HTMLElement("section")}} , то використовуйте замість нього елемент {{HTMLElement("article")}}.</li> + <li>Не використовуйте елемент {{HTMLElement("section")}} як загальний контейнер; цю функцію виконує елемент {{HTMLElement("div")}}, особливо тоді, коли секціонування призначено для стилізації. Емпіричне правило використання цього елементу полягає у тому, що розділ повинен логічно відображатись у контурі документу</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/uk/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/uk/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/uk/docs/Web/HTML/Content_categories#Sectioning_content">Sectioning content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/uk/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/uk/docs/Web/HTML/Content_categories#Flow_content">flow content</a>. Note that a {{HTMLElement("section")}} element must not be a descendant of an {{HTMLElement("address")}} element.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибути">Атрибути</h2> + +<p>Цей елемент може включати в себе лише глобальні атрибути.</p> + +<h2 id="Приклад_1">Приклад 1</h2> + +<h3 id="До">До</h3> + +<pre><div> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</div></pre> + +<h3 id="Після">Після</h3> + +<pre class="brush: html"><section> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</section> +</pre> + +<h2 id="Приклад_2">Приклад 2</h2> + +<h3 id="До_2">До</h3> + +<pre class="brush: html"><div> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</div> +</pre> + +<h3 id="Після_2">Після</h3> + +<pre class="brush: html"><section> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</section> +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/uk/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/uk/web/html/element/style/index.html b/files/uk/web/html/element/style/index.html new file mode 100644 index 0000000000..5bfe7ab621 --- /dev/null +++ b/files/uk/web/html/element/style/index.html @@ -0,0 +1,201 @@ +--- +title: <style> +slug: Web/HTML/Елемент/style +tags: + - Інкапсуляція стилів + - Елемент + - Метадані + - Стилі +translation_of: Web/HTML/Element/style +--- +<p id="Summary">{{HTMLRef}}</p> + +<p>HTML-елемент<strong> <code><style></code> </strong>містить стилі для документа чи його частини. За відсутності атрибута {{htmlattrdef("type")}}, мовою інструкцій всередині цього елемента вважається <a href="/en-US/docs/Web/CSS">CSS</a>.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/uk/docs/Web/Guide/HTML/Content_categories">Категорії вмісту</a></th> + <td><a href="/uk/docs/Web/Guide/HTML/Content_categories#Вміст_метаданих">Метадані</a> та, в разі наявності атрибута <code>scoped,</code><a href="/uk/docs/Web/Guide/HTML/Content_categories#Потоковий_вміст">потоковий вміст</a>.</td> + </tr> + <tr> + <th>Дозволений вміст</th> + <td>Текстовий вміст, що відповідає атрибутові <code>type</code>, зазвичай <code>text/css</code>.</td> + </tr> + <tr> + <th>Обов'язковість тегів</th> + <td>Обидва обов'язкові.</td> + </tr> + <tr> + <th>Дозволені пращури</th> + <td>Будь-який елемент, що може містити <a href="/uk/docs/Web/Guide/HTML/Content_categories#Вміст_метаданих">метадані</a>.</td> + </tr> + <tr> + <th scope="row">Дозволені ARIA-ролі</th> + <td>ВІдсутні</td> + </tr> + <tr> + <th>Інтерфейс DOM</th> + <td>{{domxref("HTMLStyleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибути">Атрибути</h2> + +<p>Цей елемент має <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Цей атрибут вказує MIME-тип (без частини, що вказує кодування символів), який відповідає задіяній мові стилів. Він є необов'язковим та за умовчанням має значення <code>text/css</code>.</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>Цей атрибут вказує <a href="/en-US/docs/Web/Guide/CSS/Media_queries">медіазапит</a> для обмеження застосування стилів. Стилі застосовуються без обмежень (те саме, що і значення <code>all)</code>, якщо атрибут відсутній.</dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>Позначає назву <a href="/uk/docs/Web/CSS/Альтернативні_таблиці_стилів">альтернативної множини стилів</a>.</dd> + <dt>{{htmlattrdef("scoped")}} {{experimental_inline}}</dt> + <dd>Якщо цей атрибут присутній, таблиця стилів застосовуються лише до нащадків батьківського (для <strong><code><style></code></strong>) елемента.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Найпростіша_таблиця_стилів">Найпростіша таблиця стилів</h3> + +<pre class="brush:html"><style type="text/css"> + body { + color: red; + } +</style> +</pre> + +<h3 id="Застосування_атрибута_scoped">Застосування атрибута <code>scoped</code></h3> + +<pre class="brush: html"><html> + <head> + <style type="text/css"> + span { + color: red; + } + </style> + </head> + + <body> + <div> + <style type="text/css" scoped> + span { + color: orange; + } + </style> + <span>Помаранчевий текст!</span> + </div> + + <span>Червоний текст!</span> + </body> +</html></pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Жодних змін відносно {{ SpecName('HTML4.01') }}.</td> + </tr> + <tr> + <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + <tr> + <td>Атрибут scoped</td> + <td>20<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>21</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>9.0<sup>[2]</sup></td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Атрибут scoped</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>50</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Підтримується версіями Chrome з 20 по 34 включно за наявності встановленого прапорця «<strong>Enable <style scoped></strong>» чи «<strong>Experimental WebKit features</strong>» у chrome://flags.<br> + [2] Mobile Internet Explorer (попередня назва IE Phone — версій менших за 8) також підтримує.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Елемент {{HTMLElement("link")}} дозволяє використовувати зовнішні таблиці стилів.</li> +</ul> diff --git a/files/uk/web/html/element/table/index.html b/files/uk/web/html/element/table/index.html new file mode 100644 index 0000000000..ca069eee9e --- /dev/null +++ b/files/uk/web/html/element/table/index.html @@ -0,0 +1,371 @@ +--- +title: '<table>: The Table element' +slug: Web/HTML/Елемент/table +tags: + - Посилання + - дані + - таблиця +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Тег <strong><code><table></code></strong> являє собою табличні дані себто інформацію представлену у вигляді двовимірної таблиці, що складається з рядків, шпальт та комірок, що містять власне дані.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div> + +<p class="hidden">Вихідний код цього прикладу зберігається на GitHub. Якщо маєте бажання зробити свій внесок, будь ласка склонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> і надішліть нам запит (pull request).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Тип вмісту</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковий</a></td> + </tr> + <tr> + <th scope="row">Дозволений вміст</th> + <td> + <div class="content-models"> + <div id="table-mdls">В наступному порядку: + <ol> + <li>можливий елемент {{HTMLElement("caption")}},</li> + <li>можливо 0 або більше елементів {{HTMLElement("colgroup")}},</li> + <li>можливий елемент {{HTMLElement("thead")}},</li> + <li>одне з наступного: + <ul> + <li>0 або більше {{HTMLElement("tbody")}}</li> + <li>1 або більше {{HTMLElement("tr")}}</li> + </ul> + </li> + <li>можливий елемент {{HTMLElement("tfoot")}}</li> + </ol> + </div> + </div> + </td> + </tr> + <tr> + <th scope="row">Пропуск теґів</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Дозволені батьківські елементи</th> + <td>Будь який елемент що приймає потоковий вміст</td> + </tr> + <tr> + <th scope="row">Явна роль ARIA</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code></td> + </tr> + <tr> + <th scope="row">Дозволені ролі ARIA </th> + <td>Будь які</td> + </tr> + <tr> + <th scope="row">Інтерфейс DOM</th> + <td>{{domxref("HTMLTableElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибути">Атрибути</h2> + +<p>Цей елемент містить <a href="/en-US/docs/HTML/Global_attributes">глобальні атрибути</a>.</p> + +<h3 id="Застарілі_атрибути">Застарілі атрибути</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd> + <p>Цей нумерований атрибут вказує на розміщення таблиці в документі. Може мати наступні значення:</p> + + <ul> + <li><code>left</code>: Таблиця розміщується в лівій стороні документа;</li> + <li><code>center</code>: Таблиця розміщується по центру документа;</li> + <li><code>right</code>: Таблиця розміщується в правій стороні документа.</li> + </ul> + + <p>Встановіть {{cssxref("margin-left")}} та {{cssxref("margin-right")}} у значення <code>auto</code> або {{cssxref("margin")}} в <code>0 auto</code> для того щоб досягти подібного розміщення.</p> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>Колір тла таблиці в <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">шестизначному шістнадцятирічному форматі RGB</a> з префіксом '<code>#</code>'. Також замість RGB можна використати <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">ключові слова кольорів</a>.</p> + + <p>Щоб досягти подібного ефекту використовуйте CSS-властивість {{cssxref("background-color")}} .</p> + </dd> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd> + <p>Цілочислений атрибут визначає розмір рамки, що оточує таблицю, в пікселях. Якщо 0, то атрибут {{htmlattrxref("frame", "table")}} порожній.</p> + + <p>Щоб досягти подібного ефекту скористайтеся складаною CSS-властивістю {{cssxref("border")}}.</p> + </dd> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd> + <p>Цей атрибут визначає відстань між вмістом комірки та її межою, чи показувати її чи ні. Якщо цей відступ визначено в пікселях, цей відступ прикладається до всіх чотирьох сторін. Якщо відступ визначено у відсотках вміст комірки буде центровано, а значення відступу буде прикладено тільки до відступу по вертикалі (зверху та знизу від вмісту).</p> + + <p>Щоб досягти подібного ефекту, застосуйте властивість {{cssxref("border-collapse")}} до <code><table></code>, зі значенням collapse, та {{cssxref("padding")}} до елементів {{HTMLElement("td")}}.</p> + </dd> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p> + + <p>To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <code><table></code> element. <code>border-spacing</code> does not have any effect if {{cssxref("border-collapse")}} is set to collapse.</p> + </dd> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd> + <p>This enumerated attribute defines which side of the frame surrounding the table must be displayed.</p> + + <p>To achieve a similar effect, use the {{cssxref("border-style")}} and {{cssxref("border-width")}} properties.</p> + </dd> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd> + <p>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:</p> + + <ul> + <li><code>none</code>, which indicates that no rules will be displayed; it is the default value;</li> + <li><code>groups</code>, which will cause the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li> + <li><code>rows</code>, which will cause the rules to be displayed between rows;</li> + <li><code>columns</code>, which will cause the rules to be displayed between columns;</li> + <li><code>all</code>, which will cause the rules to be displayed between rows and columns.</li> + </ul> + + <p>To achieve a similar effect, apply the {{cssxref("border")}} property to the appropriate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, or {{HTMLElement("colgroup")}} elements.</p> + </dd> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines an alternative text that summarizes the content of the table. Use the {{htmlelement("caption")}} element instead.</dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the width of the table. Use the CSS {{cssxref("width")}} property instead.</p> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_Table">Simple Table</h3> + +<pre class="brush: html notranslate"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<p>{{EmbedLiveSample('Simple_Table', '100%', '100', '', 'Web/HTML/Element/table')}}</p> + +<h3 id="More_Examples">More Examples</h3> + +<pre class="brush: html notranslate"><p>Simple table with header</p> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Table with thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> +</table> + +<p>Table with colgroup</p> +<table> + <colgroup span="4"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington, D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<p>Table with colgroup and col</p> +<table> + <colgroup> + <col style="background-color: #0f0"> + <col span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>Simple table with caption</p> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{EmbedLiveSample('More_Examples', '100%', '700', '', 'Web/HTML/Element/table')}}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Captions">Captions</h3> + +<p>By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.</p> + +<p>This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_<caption>">MDN Adding a caption to your table with <caption></a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h3 id="Scoping_rows_and_columns">Scoping rows and columns</h3> + +<p>The {{htmlattrxref("scope", "th")}} attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified so as to provide necessary information about the cells related to a header.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html notranslate"><table> + <caption>Color names and values</caption> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">HEX</th> + <th scope="col">HSLa</th> + <th scope="col">RGBa</th> + </tr> + <tr> + <th scope="row">Teal</th> + <td><code>#51F6F6</code></td> + <td><code>hsla(180, 90%, 64%, 1)</code></td> + <td><code>rgba(81, 246, 246, 1)</code></td> + </tr> + <tr> + <th scope="row">Goldenrod</th> + <td><code>#F6BC57</code></td> + <td><code>hsla(38, 90%, 65%, 1)</code></td> + <td><code>rgba(246, 188, 87, 1)</code></td> + </tr> + </tbody> +</table> +</pre> + +<p>Providing a declaration of <code>scope="col"</code> on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of <code>scope="row"</code> on a {{HTMLElement("th")}} element will help describe that the cell is the first in a row.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="Complicated_tables">Complicated tables</h3> + +<p>Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the {{htmlattrxref("colspan", "td")}} and {{htmlattrxref("rowspan", "td")}} attributes.</p> + +<p>Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the <code>colspan</code> and <code>rowspan</code> attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.</p> + +<p>If the table cannot be broken apart, use a combination of the {{htmlattrxref("id")}} and {{htmlattrxref("headers", "td")}} attributes to programmatically associate each table cell with the header(s) the cell is associated with.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.table")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS properties that may be especially useful to style the <code><table></code> element: + + <ul> + <li>{{cssxref("width")}} to control the width of the table;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li> + <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li> + <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define the alignment of text and cell content.</li> + </ul> + </li> +</ul> diff --git a/files/uk/web/html/element/video/index.html b/files/uk/web/html/element/video/index.html new file mode 100644 index 0000000000..832ed6d1bb --- /dev/null +++ b/files/uk/web/html/element/video/index.html @@ -0,0 +1,420 @@ +--- +title: '<video>: Вбудований елемент Відео' +slug: Web/HTML/Елемент/video +translation_of: Web/HTML/Element/video +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML Елемент Video</strong> (<strong><code><video></code></strong>) вбудовує медіа плеєр, який підтримує відтворення відео в документі.</span> Ви можете використовувати тег <code><video></code> також для аудіо, однак елемент {{HTMLElement("audio")}} може надати кращий користувацький досвід.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div> + +<p class="hidden">Код цих інтерактивних прикладів доступний на репозиторії GitHub. Якщо ви хочете долучитися до розробки інтерактивних прикладів, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>та надішліть нам запит на додавання.</p> + +<p>Наступні приклади показують просте використання елементу <code><video></code>. In a similar manner to the {{htmlelement("img")}} element, we include a path to the media we want to display inside the <code>src</code> attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.</p> + +<p>The content inside the opening and closing <code><video></video></code> tags is shown as a fallback in browsers that don't support the element.</p> + +<p>Browsers don't all support the same <a href="/en-US/docs/Web/HTML/Supported_media_formats">video formats</a>; you can provide multiple sources inside nested {{htmlelement("source")}} elements, and the browser will then use the first one it understands:</p> + +<pre class="brush: html"><video controls> + <source src="myVideo.mp4" type="video/mp4"> + <source src="myVideo.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is + a <a href="myVideo.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>Other usage notes:</p> + +<ul> + <li>If you don't specify the <code>controls</code> attribute, the video won't include the browser's default controls; you can create your own custom controls using JavaScript and the {{domxref("HTMLMediaElement")}} API. See <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a> for more details.</li> + <li>To allow precise control over your video (and audio) content, <code>HTMLMediaElement</code>s fire many different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>.</li> + <li>You can use the {{cssxref("object-position")}} property to adjust the positioning of the video within the element's frame, and the {{cssxref("object-fit")}} property to control how the video's size is adjusted to fit within the frame.</li> + <li>To show subtitles/captions along with your video, you can use some JavaScript along with the {{htmlelement("track")}} element and the <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> format. See <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> for more information.</li> +</ul> + +<p>A good general source of information on using HTML <code><video></code> is the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> beginner's tutorial.</p> + +<h2 id="Attributes">Attributes</h2> + +<p>Like all other HTML elements, this element supports the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.</dd> + <dd> + <p class="note"><strong>Note</strong>: Sites that automatically play audio (or video with an audio track) can be an unpleasant experience for users, so it should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control.</p> + + <p class="note">To disable video autoplay, <code>autoplay="false"</code> will not work; the video will autoplay if the attribute is there in the <code><video></code> tag at all. To remove autoplay the attribute needs to be removed altogether.</p> + + <p class="note">In some browsers (e.g. Chrome 70.0) autoplay is not working if no <code>muted</code> attribute is present.</p> + </dd> +</dl> + +<dl> + <dt><code><a href="https://wicg.github.io/picture-in-picture/#auto-pip">autoPictureInPicture</a></code> {{experimental_inline}}</dt> + <dd>Allows for automatic Picture-in-Picture behavior when the user switches back and forth between the web app and other applications/tab.</dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>An attribute you can read to determine the time ranges of the buffered media. This attribute contains a {{domxref("TimeRanges")}} object.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</dd> + <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt> + <dd>The <code><a href="https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist">controlslist</a></code> attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the <code>controls</code> attribute is specified).</dd> + <dd>The allowed values are <code>nodownload</code>, <code>nofullscreen</code> and <code>noremoteplayback</code>.</dd> + <dd class="note">Use the <code>disablePictureInPicture</code> attribute if you want to disable the Picture-In-Picture mode (and the control).</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>This enumerated attribute indicates whether to use CORS to fetch the related image. <a href="/en-US/docs/CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are: + <dl> + <dt><code>anonymous</code></dt> + <dd>Sends a cross-origin request without a credential. In other words, it sends the <code>Origin:</code> HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em>, and its usage restricted.</dd> + <dt><code>use-credentials</code></dt> + <dd>Sends a cross-origin request with a credential. In other words, it sends the <code>Origin:</code> HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + </dl> + When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <code>anonymous</code> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for additional information.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The height of the video's display area, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a> (absolute values only; <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">no percentages</a>.)</dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> + <dd>This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is <code>false</code>, meaning that the audio will be played when the video is played.</dd> + <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt> + <dd>Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.</dd> + <dt>{{htmlattrdef("playsinline")}}</dt> + <dd>A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute <em>does not</em> imply that the video will always be played in fullscreen.</dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. It may have one of the following values: + <ul> + <li><code>none</code>: Indicates that the video should not be preloaded.</li> + <li><code>metadata</code>: Indicates that only video metadata (e.g. length) is fetched.</li> + <li><code>auto</code>: Indicates that the whole video file can be downloaded, even if the user is not expected to use it.</li> + <li><em>empty string</em>: Synonym of the <code>auto</code> value.</li> + </ul> + + <p>The default value is different for each browser. The spec advises it to be set to <code>metadata</code>.</p> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the video for playback.</li> + <li>The specification does not force the browser to follow the value of this attribute; it is a mere hint.</li> + </ul> + </div> + </dd> + <dt></dt> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the video to embed. This is optional; you may instead use the {{HTMLElement("source")}} element within the video block to specify the video to embed.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>The width of the video's display area, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a> (absolute values only; <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">no percentages</a>).</dd> + <dt></dt> +</dl> + +<h2 id="Events">Events</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</td> + <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td>The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td> + </tr> + <tr> + <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td> + <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.progress_event", 'progress')}}</td> + <td>Fired periodically as the browser loads a resource.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> + <td>Playback has stopped because of a temporary lack of data</td> + </tr> + </tbody> +</table> + +<h2 id="Usage_notes">Usage notes</h2> + +<h3 id="Styling_with_CSS">Styling with CSS</h3> + +<p>The <code><video></code> element is a replaced element — its {{cssxref("display")}} value is <code>inline</code> by default, but its default width and height in the viewport is defined by the video being embedded.</p> + +<p>There are no special considerations for styling <code><video></code>; a common strategy is to give it a <code>display</code> value of <code>block</code> to make it easier to position, size, etc., and then provide styling and layout information as required. <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a> provides some useful styling techniques.</p> + +<h3 id="Detecting_track_addition_and_removal">Detecting track addition and removal</h3> + +<p>You can detect when tracks are added to and removed from a <code><video></code> element using the {{event("addtrack")}} and {{event("removetrack")}} events. However, these events aren't sent directly to the <code><video></code> element itself. Instead, they're sent to the track list object within the <code><video></code> element's {{domxref("HTMLMediaElement")}} that corresponds to the type of track that was added to the element:</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>An {{domxref("AudioTrackList")}} containing all of the media element's audio tracks. You can add a listener for <code>addtrack</code> to this object to be alerted when new audio tracks are added to the element.</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> + <dd>Add an <code>addtrack</code> listener to this {{domxref("VideoTrackList")}} object to be informed when video tracks are added to the element.</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt> + <dd>Add an <code>addtrack</code> event listener to this {{domxref("TextTrackList")}} to be notified when new text tracks are added to the element.</dd> +</dl> + +<p>For example, to detect when audio tracks are added to or removed from a <code><video></code> element, you can use code like this:</p> + +<pre class="brush: js">var elem = document.querySelector("video"); + +elem.audioTrackList.onaddtrack = function(event) { + trackEditor.addTrack(event.track); +}; + +elem.audioTrackList.onremovetrack = function(event) { + trackEditor.removeTrack(event.track); +}; +</pre> + +<p>This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.</p> + +<p>You can also use {{domxref("EventTarget.addEventListener", "addEventListener()")}} to listen for the {{event("addtrack")}} and {{event("removetrack")}} events.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_video_example">Simple video example</h3> + +<p>This example plays a video when activated, providing the user with the browser's default video controls to control playback.</p> + +<pre class="brush: html"><!-- Simple video example --> +<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org --> +<!-- Poster from peach.blender.org --> +<video controls + src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" + poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" + width="620"> + +Sorry, your browser doesn't support embedded videos, +but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download it</a> +and watch it with your favorite video player! + +</video></pre> + +<p>{{EmbedLiveSample('Simple_video_example', '640', '370', '', 'Web/HTML/Element/video')}}</p> + +<p>Until the video starts playing, the image provided in the <code>poster</code> attribute is displayed in its place. If the browser doesn't support video playback, the fallback text is displayed.</p> + +<h3 id="Multiple_sources_example">Multiple sources example</h3> + +<p>This example builds on the last one, offering three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser.</p> + +<pre class="brush: html"><!-- Using multiple sources as fallbacks for a video tag --> +<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org --> +<!-- Poster hosted by Wikimedia --> +<video width="620" controls + poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" > + <source + src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" + type="video/mp4"> + <source + src="https://archive.org/download/ElephantsDream/ed_hd.ogv" + type="video/ogg"> + <source + src="https://archive.org/download/ElephantsDream/ed_hd.avi" + type="video/avi"> + Your browser doesn't support HTML5 video tag. +</video></pre> + +<p>{{EmbedLiveSample('Multiple_sources_example', '640', '370', '', 'Web/HTML/Element/video')}}</p> + +<p>First WebM is tried. If that can't be played, then MP4 is tried. Finally, OGG is tried. A fallback message is displayed if the video tag isn't supported, but not if all sources fail.</p> + +<h3 id="Server_support_for_video">Server support for video</h3> + +<p>If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).</p> + +<p>If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. The most common video file type extensions are ".ogm", ".ogv", or ".ogg". To do this, edit the "mime.types" file in "/etc/apache" or use the <code>"AddType"</code> configuration directive in <code>httpd.conf</code>.</p> + +<pre class="eval">AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in <code>httpd.conf</code>.</p> + +<pre class="eval">AddType video/webm .webm +</pre> + +<p>Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Videos should provide both captions and transcripts that accurately describe its content (see <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> for more information on how to implement these). Captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfortable for them.</p> + +<p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video.</p> + +<p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:</p> + +<pre class="eval">14 +00:03:14 --> 00:03:18 +[Dramatic rock music] + +15 +00:03:19 --> 00:03:21 +[whispering] What's that off in the distance? + +16 +00:03:22 --> 00:03:24 +It's… it's a… + +16 00:03:25 --> 00:03:32 +[Loud thumping] +[Dishes clattering] +</pre> + +<p>Captions should not obstruct the main subject of the video. They can be positioned using <a href="/en-US/docs/Web/API/WebVTT_API#Cue_settings">the <code>align</code> VTT cue setting</a>.</p> + +<ul> + <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li> + <li><a href="/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Technical_summary">Technical summary</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content. If it has a {{htmlattrxref("controls", "video")}} attribute: interactive content and palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td> + <p>If the element has a {{htmlattrxref("src", "video")}} attribute: zero or more {{HTMLElement("track")}} elements, followed by transparent content that contains no media elements–that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}</p> + + <p>Else: zero or more {{HTMLElement("source")}} elements, followed by zero or more {{HTMLElement("track")}} elements, followed by transparent content that contains no media elements–that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</p> + </td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts embedded content.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLVideoElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Feedback</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-video-element', '<video>')}}</td> + <td><a href="https://github.com/whatwg/html/issues">WHATWG HTML GitHub issues</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.video")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements</a></li> + <li>Positioning and sizing the picture within its frame: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas">Manipulating video using canvas</a></li> + <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a></li> +</ul> |