path: root/files/uk/web/html/index.html

---
title: HTML
slug: Web/HTML
tags:
  - HTML
  - HTML5
  - Landing
  - WWW
  - Гіпертекст
  - Довідка
translation_of: Web/HTML
---
<div>{{HTMLSidebar()}}</div>

<p><span class="seoSummary">Мова гіпертекстової розмітки (HyperText Markup Language </span>— HTML<span class="seoSummary">) використовується для створення і візуального відображення веб-сторінок.</span></p>

<p>Основу кожної веб-сторінки в мережі Інтернет становить HTML. Під терміном «гіпертекст» мається на увазі текст, сформований за допомогою мови розмітки і який містить гіперпосилання, якими зв'язані веб-сторінки одна з одною, роблячи Всесвітню павутину тим, чим вона є сьогодні. Створюючи і публікуючи веб-сторінки в мережі Інтернет, ви стаєте активними учасниками Всесвітньої павутини. HTML підтримує як візуальні зображення, так і інший медіаконтент. HTML є мовою, що описує структуру і семантику вмісту веб-документу. Контент веб-сторінки розмічений за допомогою тегів, що представляють HTML-елементи. Прикладами таких елементів є {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("picture")}}, і т.д. Ці елементи формують будівельні блоки для будь-якого веб-сайта.</p>

<p>Статті, представлені тут, містять довідкові матеріали з веб-розробки.</p>

<section class="cleared" id="sect1">
<ul class="card-grid">
 <li><span>HTML довідник</span>

  <p>У нашому <a href="/uk/docs/Web/HTML/Reference">докладному довіднику</a> ви знайдете всю необхідну інформацію до кожного з елементів і атрибутів HTML.</p>
 </li>
 <li><span>HTML посібник</span>
  <p>Для читання статтей, підручників і прикладів по HTML, зверніться до нашого <a href="/uk/docs/Web/Guide/HTML">посібника HTML розробника</a>.</p>
 </li>
 <li><span>Вступ до HTML</span>
  <p>Якщо ви новачок в Web-розробці, то прочитайте наш <a href="https://developer.mozilla.org/uk/docs/Web/Guide/HTML/Introduction">вступ</a> про те, що таке HTML і як ним користуватись.</p>
 </li>
</ul>

<div class="in-page-callout webdev">
<h3 id="Бажаєте_стати_веб-розробником_фронтенду">Бажаєте стати веб-розробником фронтенду?</h3>

<p>Ми уклали повний курс, що включає в себе всю необхідну інформацію задля досягнення вашої мети.</p>

<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Розпочати</a></p>
</div>

<h2 class="Documentation" id="Довідники">Довідники</h2>

<dl>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">Блокові елементи</a></dt>
 <dd class="landingPageList">В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають блокові або <a href="/uk/docs/Web/HTML/Inline_elements">рядкові</a>. Блокові елементи займають всю ширину батьківського елемента (контейнера), таким чином утворюючи блок. У цій статті пояснюється, як це працює. </dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/CORS_enabled_image">CORS: включені зображення</a></dt>
 <dd class="landingPageList">Специфікації HTML вводять атрибут <code><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, що разом з відповідним заголовком <a class="glossaryLink" href="https://developer.mozilla.org/uk/docs/Glossary/CORS" title="CORS: It is insecure to allow a webpage to request any resources from any other domains without limitation. CORS (Cross-Origin Resource Sharing) is a system that determines whether to block or fulfill these requests.">CORS</a> дозволяють використовувати зображення через елемент <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img" title="The HTML Image Element (&lt;img>) represents an image of the document."><code>&lt;img&gt;</code></a> і завантаженому з інших джерел зображенням бути використаним в canvas так, як наче вони завантажуються з поточного джерела.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/CORS_settings_attributes">CORS: налаштування атрибутів</a></dt>
 <dd class="landingPageList">В HTML5, деякі HTML-елементи, що підтримують <a href="https://developer.mozilla.org/uk/docs/HTTP/Access_control_CORS">CORS</a>, такі як <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img" title="The HTML Image Element (&lt;img>) represents an image of the document."><code>&lt;img&gt;</code></a> або <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/video" title="The HTML &lt;video> element is used to embed video content. It may contain several video sources, represented using the src attribute or the &lt;source> element; the browser will choose the most suitable one."><code>&lt;video&gt;</code></a>, мають <code>crossorigin</code> атрибут (<code>crossOrigin</code> властивості), який дозволяє налаштувати запити CORS для отриманих даних елемента.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Controlling_spell_checking_in_HTML_formsControlling_spell_checking_in_HTML_forms">Контроль правопису в формах HTML</a></dt>
 <dd class="landingPageList">Firefox 2 вводить підтримку перевірки правопису в текстових полях та полях веб-форм. Користувач може вказати використання інтерфейсу about:config незалежно від того, чи ввімкнено перевірку правопису, і чи потрібно перевіряти обидва текстові поля, чи лише текстові області.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Адаптивний потік для HTML 5 відео</a></dt>
 <dd class="landingPageList">Dynamic Adaptive Streaming over HTTP (DASH) - це адаптивний потоковий (трансляційний) протокол. Це означає, що він дозволяє потоку відеозв'язку (трансляції) переключатися між швидкістю передачі даних (бітрейтом) на основі пропускної здатності мережі, щоб продовжувати відтворення відео.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Focus_management_in_HTML">Управління фокусом в HTML</a></dt>
 <dd class="landingPageList">В робочому проекті HTML5 <code><a href="https://developer.mozilla.org/en/DOM/document.activeElement" title="en/DOM/document.activeElement">activeElement</a></code> DOM атрибут та <code><a href="https://developer.mozilla.org/en/DOM/document.hasFocus" title="en/DOM/document.hasFocus">hasFocus()</a></code> DOM метод дають програмісту можливість кращого контролю інтерактивності сторінки в результаті дій користувача. Наприклад, обидва вони можуть бути використані для складання статистики, відстеження кількості кліків на певних посиланнях сторінки, вимірювання часу, протягом якого активний елемент тощо. Крім того, у поєднанні з технологією AJAX, вони допомагають мінімізувати кількість запитів на сервер в залежності від активності користувача та розмітки сторінки.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Global_attributes">Глобальні атрибути</a></dt>
 <dd class="landingPageList"><span id="result_box" lang="uk"><span>Глобальні атрибути можуть бути вказані на всіх елементах HTML, навіть тих, які не вказані в стандарті</span></span> . <span id="result_box" lang="uk"><span>Це означає, що будь-які нестандартні елементи, як і раніше, повинні дозволити ці атрибути, навіть якщо використання цих елементів означає, що документ більше не відповідає стандарту HTML5.</span></span> <span id="result_box" lang="uk"><span>Наприклад, HTML5-сумісні браузери приховують вміст, позначений як</span></span> <code>&lt;foo hidden&gt;...&lt;foo&gt;</code><code>, </code>хоча <code>&lt;foo&gt;</code> не є дійсним елементом HTML.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Attributes">Довідка по HTML атрибутам</a></dt>
 <dd class="landingPageList">Елементи в HTML мають <strong>атрибути</strong>; <span id="result_box" lang="uk"><span>це додаткові значення, які налаштовують елементи або регулюють їх поведінку різними способами для задоволення критеріїв, які хочуть користувачі</span></span>.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element">Довідка по HTML елементам</a></dt>
 <dd class="landingPageList">Ця сторінка містить усі <a class="glossaryLink" href="https://developer.mozilla.org/uk/docs/Glossary/HTML" title="HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.">HTML елементи</a>.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Reference">Довідка по HTML</a></dt>
 <dd class="landingPageList"><span id="result_box" lang="uk"><span>HTML - це мова, яка описує структуру та семантичний вміст веб-документа;</span> <span>він складається з <strong>елементів</strong>, кожен з яких може бути змінений деякою кількістю <strong>атрибутів</strong></span></span>.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Inline_elemente">Рядкові елементи</a></dt>
 <dd class="landingPageList">В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">блокові</a> або рядкові. Рядковий елемент займає стільки місця в рядку, скільки вимагає розмір самого елемента, і його вплив обмежується тегами, які цей елемент визначають. Приклади у цій статті пояснюють, як працюють рядкові елементи.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Link_types">Типи посилань</a></dt>
 <dd class="landingPageList"><span id="result_box" lang="uk"><span>У HTML наступні типи посилань вказують на зв'язок між двома документами, в яких одне посилання на інше використовується за допомогою елемента</span></span> <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/a" title="The HTML &lt;a> Element (or the HTML Anchor Element) defines a hyperlink, the named target destination for a hyperlink, or both."><code>&lt;a&gt;</code></a>, <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/area" title="The HTML &lt;area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a &lt;map> element."><code>&lt;area&gt;</code></a>, або <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/link" title="The HTML Link Element (&lt;link>) specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets."><code>&lt;link&gt;</code></a>.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Supported_media_formats">Медіа формати, що підтримуються аудіо та відео елементами HTML</a></dt>
 <dd class="landingPageList">Елементи <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/audio" title="The HTML &lt;audio> element is used to embed sound content in documents. It may contain several audio sources, represented using the src attribute or the &lt;source> element; the browser will choose the most suitable one."><code>&lt;audio&gt;</code></a> та <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/video" title="The HTML &lt;video> element is used to embed video content. It may contain several video sources, represented using the src attribute or the &lt;source> element; the browser will choose the most suitable one."><code>&lt;video&gt;</code></a> надають підтримку для відтворення аудіо та відео матеріалів, не вимагаючи плагінів.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/microformats">Мікроформати</a></dt>
 <dd class="landingPageList"><span class="p-summary"><a class="external external-icon" href="http://microformats.org"><dfn>Мікроформати</dfn></a> (іноді використовується абревіатура <strong>μF</strong>) </span> <span id="result_box" lang="uk"><span>- це невеликі шаблони HTML для позначення таких об'єктів, як люди, організації, події, місця розташування, публікації в блозі, продукти, огляди, резюме, рецепти тощо</span></span><span class="p-summary">.</span><br>
 Вони є простими для вставки семантики в HTML і швидко надають API, <span id="result_box" lang="uk"><span>який буде використовуватися пошуковими системами, агрегаторами та іншими інструментами</span></span>.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing">Оптимізація ваших сторінок для спекулятивного парсингу (аналізу)</a></dt>
 <dd class="landingPageList">Традиційно в браузерах HTML-парсер (аналізатор) працює на головній гілці і блокується після тега <code>&lt;/script&gt;</code> доки сценарій не буде завантажено з мережі і не виконано. HTML парсер в Firefox 4 і новіших підтримує спекулятивний синтаксичний аналіз поза головної гілки. Він продовжує парсити, доки скрипти завантажуються і виконуються. Як і в Firefox 3.5 та 3.6, HTML парсер починає спекулятивні завантаження скриптів, стилів і зображень, коли він знаходить їх у початку потоку. <span id="result_box" lang="uk"><span>Проте в Firefox 4 і новіше HTML-парсер також спекулятивно виконує алгоритм побудови дерева HTML</span></span> . Та коли спекуляція (відстежування) вдається, немає необхідності переробляти частину вхідного файлу, який вже був сканований на скрипти, стилі та зображення. Недоліком є те, що більше роботи втрачається, коли спекуляція (відстежування) зазнала невдачі.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Using_the_application_cache">Використання кешу додатків</a></dt>
 <dd class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> <span id="result_box" lang="uk"><span>забезпечує механізм <em>кешування додатків</em>, який дозволяє веб-додаткам працювати в автономному режимі.</span></span> Розробники можуть використовувати інтерфейс <strong>Application Cache</strong> (<em>AppCache</em>) <span id="result_box" lang="uk"><span>щоб вказати ресурси, які браузер повинен кешувати та зробити доступними для офлайн-користувачів</span></span>. Додатки, які кешують завантаження, працюють коректно, навіть якщо користувачі клікають кнопку оновлення, коли вони знаходяться офлайн.</dd>
</dl>

<p><span class="alllinks"><a href="/uk/docs/tag/HTML" title="Article tagged: HTML">Переглянути все...</a></span></p>

<div class="section">
<h2 class="Tools" id="Tools" name="Tools">Інструкції та посібники</h2>

<dl>
 <dt><a href="/uk/docs/Web/Guide/HTML">Інструкція з HTML для розробників</a></dt>
 <dd><span id="result_box" lang="uk"><span>Статті MDN, що демонструють конкретні методи, які ви можете використовувати при створенні веб-контенту за допомогою HTML, а також навчальні посібники та інші матеріали, які можуть бути вам корисними.</span> <span>Довідник може містити редакційні уроки, поради та інформацію щодо розробки HTML.</span></span></dd>
</dl>
</div>
</section>