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

---
title: HTML5
slug: Web/Guide/HTML/HTML5
translation_of: Web/Guide/HTML/HTML5
---
<p><span class="seoSummary"><strong>HTML5</strong> є найновішим стандартом,що описує <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Цей термін представляє дві різні концепції:</p>

<ul>
 <li><span class="seoSummary">Це нова версія <em>мови </em>HTML, з новими елементами, атрибутами і поведінкою</span></li>
 <li><span class="seoSummary">Це великий стек <strong>технологій, </strong>котрі надають більшого<strong> </strong>різноманіття та потужності Веб-сайтам та додаткам. </span>Цей набір інколи називають <em>HTML5 &amp; friends, </em>але часто скорочують до <em>HTML5</em>.</li>
</ul>

<p>Спроектована, для використання всіма розробниками Відкритого Вебу (Open Web), ця сторінка надає посилання до численних ресурсів про HTML5 технологї, розсортованні в декілька груп, в залежності від їх функцій.</p>

<ul>
 <li><em>Семантика</em>:  дозволяє описати якомога точніше з чого складається ваш контент.</li>
 <li><em>Зв'язок</em>:  дозволяє вам взаємодіяти з сервером новим та інноваційним шляхом.</li>
 <li><em>Оффлайн та сховище</em>:  надає можливість веб-сторінкам зберігати дані на стороні клієнта локально та оперувати оффлайном ефективніше.</li>
 <li><em>Мультимедіа</em>: робить відео та аудіо першокласними мешканцями Відкритого Вебу.</li>
 <li><em>2D/3D графіка та ефекти</em>: дозволяє безліч презентаційних варіантів.</li>
 <li><em>Ефективність та інтеграція</em>:  надає більшу оптимізацію швидкості та кращого використання заліза (hardware) комп'ютера. </li>
 <li><em>Доступ до пристрою</em>: дозволяє використання різноманітних пристроїв вводу/виводу</li>
 <li><em>Стилі</em>: Дозволяє авторам створювати більш складні і витончені теми.</li>
</ul>

<div class="cleared row topicpage-table">
<div class="section">
<h2 id="сЕМАНТиКА" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">сЕМАНТиКА</h2>

<dl>
 <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt>
 <dd>Огляд нових елементів HTML5 для структуризації контенту: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Використання відео та аудіо в HTML5</a></dt>
 <dd>Елементи {{HTMLElement("audio")}} та {{HTMLElement("video")}}  вбудовують та дозволяють керування новим мультимедійним контентом.</dd>
 <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Форми в HTML5</a></dt>
 <dd>Огляд <span class="gt-baf-term-text"><span class="gt-baf-cell gt-baf-word-clickable">вдосконален</span></span>ь для веб-форм в HTML5: перевірка обмежень API, декілька нових атрибутів, нові значення для атрибуту {{HTMLElement("input")}}  {{htmlattrxref("type", "input")}} а також новий елемент {{HTMLElement("output")}} .</dd>
 <dt>Нові семантичні елементи</dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Поруч із розділами, носіями(медіа) та елементами форм</span></span>, в HTML5 є численні нові елементи: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, або {{HTMLElement("meter")}} та {{HTMLElement("main")}}, що збільшують кількість <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">чинних елементів HTML5</a>.</dd>
 <dt><span class="gt-baf-term-text"><span class="gt-baf-cell gt-baf-word-clickable">Вдосконалення в</span></span> {{HTMLElement("iframe")}}</dt>
 <dd>Використовуючи атрибути {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, та {{htmlattrxref("srcdoc", "iframe")}}, автори зараз можуть бути певними щодо рівня безпеки та бажаної візуалізації елементу {{HTMLElement("iframe")}}.</dd>
 <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
 <dd>Дозволяє безпосередньо вставлені математичні формули.</dd>
 <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Знайомство з HTML5</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі показано, як вказати браузеру, що ви використовуєте HTML5 у своєму веб-дизайні чи веб-програмі.</span></span></dd>
 <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-сумісний парсер</a></dt>
 <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd>
</dl>

<h2 id="Звязок" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Зв'язок</h2>

<dl>
 <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
 <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd>
 <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt>
 <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
</dl>

<h2 id="Оффлайн_та_сховище" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Оффлайн та сховище</h2>

<dl>
 <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: The application cache</a></dt>
 <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
 <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd>
 <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM storage)</a></dt>
 <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd>
 <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
 <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd>
 <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt>
 <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
</dl>

<h2 id="Мультимедіа" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Мультимедіа</h2>

<dl>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt>
 <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
 <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd>
 <dt>Track and WebVTT</dt>
 <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd>
</dl>

<h2 id="3D_Графіка_та_ефекти" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D Графіка та ефекти </h2>

<dl>
 <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas tutorial</a></dt>
 <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd>
 <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text API for <code>&lt;canvas&gt;</code> elements</a></dt>
 <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd>
 <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
 <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd>
 <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
 <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd>
</dl>
</div>

<div class="section">
<h2 id="Ефективність_та_Інтеграція" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Ефективність та Інтеграція</h2>

<dl>
 <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
 <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd>
 <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt>
 <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
 <dt>JIT-compiling JavaScript engines</dt>
 <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
 <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd>
 <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable Attribute: Transform your website to a wiki!</a></dt>
 <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd>
 <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
 <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd>
 <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt>
 <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
 <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
 <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
 <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt>
 <dd>Allows control of animations rendering to obtain optimal performance.</dd>
 <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
 <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
 <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd>
</dl>

<h2 id="Доступ_до_пристрою" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Доступ до пристрою</h2>

<dl>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
 <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd>
 <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt>
 <dd>Handlers to react to events created by a user pressing touch screens.</dd>
 <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt>
 <dd>Let browsers locate the position of the user using geolocation.</dd>
 <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt>
 <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd>
</dl>

<h2 id="Стилі" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Стилі</h2>

<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p>

<dl>
 <dt>New background styling features</dt>
 <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd>
 <dt>More fancy borders</dt>
 <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd>
 <dt>Animating your style</dt>
 <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd>
 <dt>Typography improvement</dt>
 <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd>
 <dt>New presentational layouts</dt>
 <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> and <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
</dl>
</div>
</div>