Перегляд вихідного коду сторінки HTML5

{{Infobox file format
|name = HTML5<br />({{small|{{nowrap|HyperText Markup Language}}}})
|logo = [[Файл:HTML5-logo.svg|128px]]
|extension = HTML: .html, .htm<br />XHTML: .xhtml, .xht, .xml
|mime = HTML: text/html<br />XHTML: application/xhtml+xml, application/xml
|type code = TEXT
|uniform type = public.html
|owner = W3C HTML WG, [[WHATWG]]
|genre = [[Мова розмітки даних]]
|container for =
|contained by =
|extended from =
|extended to =
|standard =<nowiki />
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/ WHATWG Editor's draft]
* [http://dev.w3.org/html5/spec/spec.html W3C Editor's draft]
}}
{{HTML}}
<!-- The correct spelling is «HTML5», not «HTML 5». «HTML 5» is only used in outdated documents, such as the August 2009 Working Draft. All recent documents use «HTML5», e.g.: <http://dev.w3.org/html5/spec/Overview.html> (note date). -->
'''HTML5'''&nbsp;— наступна версія мови [[HTML]]. До складу робочої групи з HTML5 увійшли [[AOL]], [[Apple]], [[Google]], [[IBM]], [[Microsoft]], [[Mozilla]], [[Nokia]], [[Opera]] та кілька сотень інших виробників.

Існує деяка плутанина щодо версійності, оскільки існують дві незалежні групи [[розробник]]ів&nbsp;— [[WHATWG]] та [[W3C]].

WHATWG відмовились від принципу «версійності» на користь «вічної розробки» при прийнятті специфікації HTML.<ref>[http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-December/024477.html WHATWG відмовились від принципу «версійності»] {{Webarchive|url=https://web.archive.org/web/20120325122540/http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-December/024477.html |date=2012-03-25 }}{{ref-en}}</ref> Таке рішення було спричинено намаганням пришвидшити втілення стандарту в життя, тобто розробникам веббраузерів не потрібно чекати допоки вийде офіційна затверджена версія специфікації (специфікація перейде в стан recomendation), вони можуть втілювати певні частини специфікації вже зараз. Тому за версією WHATWG існує тільки одна специфікація, яка постійно розвивається&nbsp;— HTML.

Ці дві групи працювали в тандемі: WHATWG писав специфікації в режимі «живого стандарту», а W3C брав ці специфікації як «знімки», й впроваджував їх у чіткі версії своєї специфікації. W3C працював значно повільніше, бо повинен забезпечувати вимоги більшого спектра користувачів, а не тільки [[веббраузер]]ів.<ref>[http://www.webmonkey.com/glossary/the-difference-between-the-whatwg-and-the-htmlwg/ Різниця між WHATWG та HTMLWG] {{Webarchive|url=https://web.archive.org/web/20120114135626/http://www.webmonkey.com/glossary/the-difference-between-the-whatwg-and-the-htmlwg/ |date=14 січня 2012 }}{{ref-en}}</ref>

28 жовтня 2014 консорціум W3C оголосив про надання набору специфікацій HTML5 статусу рекомендованого стандарту.<ref>{{Cite web |url=http://www.w3.org/blog/news/archives/4167 |title=HTML5 IS A W3C RECOMMENDATION |accessdate=30 жовтня 2014 |archive-date=28 жовтня 2014 |archive-url=https://web.archive.org/web/20141028180019/http://www.w3.org/blog/news/archives/4167 }}</ref> Цікаво, що у цьому вигляді специфікації HTML 5.0 були сформовані ще два роки до того, після чого робота була зосереджена на проведенні тестування та оцінки сумісності доступних реалізацій. На час стандартизації HTML5 вже давно став стандартом [[де-факто]] і активно використовується у [[вебзастосунок|вебзастосунках]]. Фактичне затвердження стандарту лише формально поставило крапку в просуванні HTML5 і підтвердило повсюдність і коректність його реалізації.

Специфікації HTML5 не обмежуються тільки розміткою і включають в себе низку вебтехнологій, котрі у сукупності формують відкриту вебплатформу&nbsp;— програмне оточення для роботи крос-платформових застосунків, здатних взаємодіяти з обладнанням, і які підтримують засоби для роботи з відео, графікою і анімацією, що надає розширені мережеві можливості.<ref>{{Cite web |url=http://www.opennet.ru/opennews/art.shtml?num=40954 |title=Консорциум W3C утвердил стандарт HTML5 |accessdate=30 жовтня 2014 |archive-date=30 жовтня 2014 |archive-url=https://web.archive.org/web/20141030200512/http://www.opennet.ru/opennews/art.shtml?num=40954 }}</ref>

== Історія ==

Робота над HTML5 почалася в кінці [[2003]] року як доказ концепції, що можна розширити форми HTML4 багатьма можливостями з [[XForms]] 1.0, не вимагаючи змін несумісних з існуючими вебсторінками. На цій ранній стадії, хоча проект уже був доступний для громадськості й приймав критичні зауваження, специфікація була захищена авторськими правами [[Opera]].

На початку 2004 року доробок був представлений спільно [[Mozilla]] та [[Opera]] на розгляд [[W3C]] на робочому обговоренні майбутнього [[вебзастосунок|вебзастосунків]]. Пропозицію було відхилено через суперечності з раніше обраним W3C напрямом еволюції Інтернету&nbsp;— [[XHTML]].

Невдовзі після цього Apple, Mozilla та Opera оголосили про свій намір спільно продовжити роботу. Було створено відкритий список розсилки й проект було перенесено на сайт [[WHATWG]]. В авторське право була внесена поправка, що робота буде спільно належати всім трьом постачальникам і допускатиме повторне використання специфікацій.

У 2006 році W3C висловило зацікавленість у специфікації, а також створила робочу групу для роботи разом із WHATWG над розробленням специфікації HTML5. Робоча група відкрита в [[2007]] році. Apple, Mozilla та Opera дозволили W3C опублікувати специфікацію під ліцензією W3C, зберігаючи при цьому версію з менш обмежувальною ліцензію на сайті WHATWG. З того часу обидві групи працюють разом.

[[22 січня]] [[2008]] представлена чернетка чергової, п'ятої версії мови гіпертекстової розмітки HTML.

Робота над HTML5, що почалася у 2004 році, зараз доводиться до кінця спільними зусиллями W3С HTML WG і WHATWG. У розробленні також беруть участь багато ключових фігур, включаючи представників найбільших розробників браузерів: [[Apple]], [[Google]], [[Microsoft]], [[Mozilla]] та [[Opera]]; також інші організації й користувачі з різними інтересами та досвідом.

== Структура документації (WHATWG) ==
Робоча група WHATWG пропонує наступну структуру документації:
# Загальні положення.
# Семантика, структура, та [[API]] HTML-документу.
# Елементи HTML
# [[Мікродані (HTML)|Microdata]]
# Завантаження вебсторінок
# API для веб застосувань
# Взаємодія з користувачем
# Відеоконференції та взаємодія peer-to-peer
# Повідомлення
# синтаксис HTML
# синтаксис XHTML
# Застарілі функції

== Нові можливості ==

=== Введено нові теги, а деякі прибрано ===

У загальному з нової версії мови розмітки пропонується прибрати близько 15 тегів.

При прийнятті рішення про введення нових тегів було розглянуто більшість популярних сайтів і виділено основні елементи, які були спільними для всіх [[вебсторінка|вебсторінок]].

Розмічаючи області на сторінці за допомогою певних елементів, ця технологія може допомогти полегшити користувачеві навігацію. Наприклад, він може легко пропустити розділ навігації або швидко переходити від однієї статті до іншої без необхідності для авторів робити відповідні посилання. Автори також отримують вигоду в результаті заміни великої кількості div-ів одним з декількох відповідних елементів, що також приводить до чистого і легкого для автора початкового коду.

Елементами header є заголовки розділів. Вони можуть складатися з декількох частин&nbsp;— наприклад, було б виправдано розділяти блок заголовка на підзаголовки, історію версій або вказання авторства.
Елемент footer визначає нижню частину розділу, до якого він відноситься. Зазвичай він містить інформацію про розділ&nbsp;— наприклад, ім'я автора, посилання на схожі документи, копірайт і тому подібне.
Блок nav містить список посилань для навігації. Підходить, наприклад, для навігації по сайту, або для змісту.
Елемент aside підходить для розміщення вмісту яким-небудь чином спорідненого основному контенту. У звичайному випадку буде корисний для розмітки бічної колонки.
Тег section представляє загальний розділ документа або додатку, наприклад, такий як розділ.
Тег article відзначає незалежний розділ документа, сторінки або сайту. Застосуємо для такого вмісту як новини, запису блога, повідомлення у форумі або коментарі користувачів.

=== Приклад розмітки вебсторінки за допомогою HTML5 ===
[[Файл:Html-5.png|thumb|300px|Приклад розмітки сторінки за допомогою HTML 5]]
<syntaxhighlight lang="html4strict">
<!DOCTYPE html>
<html>

    <head>
        <meta charset=utf-8>
        <title>Simple HTML5</title>
    </head>

    <body>

        <header> header </header>
        <nav> navigation </nav>

        <section>
            <article>
                <h2> Article header </h2>
                Article
            </article>
        
            <article>
                <h2> Article header </h2>
                Article
            </article>
        </section>

        <aside> sidebar content </aside>
        <footer>
            copyright
            <a href="https://example.com/author's_page">Author Name</a>
        </footer>
    </body>
</html>
</syntaxhighlight>

=== Підтримка тегів <video> та <audio> ===
В HTML5 для того, щоб підключити до сторінки відео або аудіодоріжку, достатньо скористатись відповідними тегами.

Такі сайти як [[Youtube]], [[Viddler]], [[Revver]], [[Myspace]] та десятки інших дозволяють будь-кому опублікувати своє відео або аудіо. Багато сайтів удаються до [[Flash]], щоб забезпечити потрібну функціональність, оскільки [[HTML]] 4.1 не вистачає засобів для вбудовування та управління мультимедіа. І, хоча такі можливості надають різноманітні [[плагін]]и ([[Quicktime]], [[Windows Media]] тощо), в наш час{{коли}} Flash&nbsp;— це єдиний широко поширений плагін, який надає крос-браузерне рішення з відповідним [[API]] для розробників.

Як доведено великою кількістю медіа-програвачів на основі Flash, автори зацікавлені в наданні інтерфейсу з їхнім власним дизайном, який, як правило, дозволяє користувачам включати, ставити на паузу, зупиняти, перемотувати і управляти гучністю. Стоїть завдання надати таку функціональність за допомогою додавання можливості вбудовувати відео і аудіо засобами браузера, а також надати [[DOM]] API для доступу скриптів.

Елементи video і audio легко дозволяють це зробити. Більшість API&nbsp;— загальні між цими елементами, з відмінностями лише відносно до visual- і не-visual-медіа. Всі сучасні браузери (окрім [[Internet Explorer]]) вже реалізували підтримку даних елементів. Найпростіший спосіб вбудувати відео&nbsp;— це використовувати тег video і дозволити браузеру відобразити інтерфейс за умовчанням. Булевий атрибут controls визначає чи включати за умовчанням цей користувацький інтерфейс.

Необов'язковий атрибут poster може використовуватися для вказання зображення, яке буде відображатися до того як відео почне програватися. Хоча є формати відео, що підтримують власний попередній перегляд (такі як Mpeg-4), цей спосіб&nbsp;— рішення, що дозволяє бути незалежним від відео-формату.

Також просто підключити і аудіо&nbsp;— використовуючи елемент audio. Хоча з очевидних причин у тегу audio немає атрибутів height, width і poster, між video і audio більшість атрибутів спільні.

У HTML5 включений елемент source для вказівки альтернативних відео і аудіо файлів, щоб браузер міг вибрати той, який підходить до підтримуваного медіа-типу або [[кодек]]ів. Атрибут media визначає вибір медіа-запиту, що базується на обмеженнях пристроїв, а атрибут type&nbsp;— можливості медіа-типів і кодеків. Коли використовується атрибут source, слід опускати src в елементах video (audio), інакше source буде проігнорований.

Є багато інших атрибутів і API для відео- і аудіоелементів, не описаних тут. Докладніше можна дізнатися в поточній версії специфікації.

=== Векторна графіка ===

==== <canvas> ====
За допомогою нового елементу <canvas> розробники зможуть створювати двомірні зображення та анімацію засобами [[JavaScript]].

Варто зазначити що елементи, з яких складаються двомірні зображення та анімація в контейнері <canvas> не входять в DOM (Document Object Model)-Об'єктна модель документу оглядача вебсторінок.

==== SVG ====
Можна вставляти графіку [[SVG]] прямо в тіло HTML-документу. Елементи такої графіки входять в DOM.

=== Збереження даних на стороні клієнта ===

Крім того, HTML5 дозволяє розробникам зберігати дані на стороні клієнта. Це значно зменшить обсяг інформації, що передається між веббраузером та сервером при використанні web-2.0 застосувань.
Зараз триває робота над такими специфікаціями, що охоплюють даний розділ:
* Session Storage
* Local Storage
* IndexedDB

=== Редагування вмісту елементу ===
Вміст будь-якого елементу на сторінці можна легко поміняти за допомогою властивості contentEditable. Цей метод широко використовується при створенні [[WYSIWYG]] застосувань.

== Технології, які не входять до HTML5 ==
Існує набір технологій, які дуже часто помилково відносять до HTML5, хоча вони насправді стосуються інших специфікацій
* [[WebGL]]
* [[FileReader]]
* [[XMLHttpRequest]]
* querySelector(All)
* [[Geolocation]]
* [[ECMAScript5]]
* [[CSS3]]
* [[XBL2]]
* [[Web Workers]]
* [[Web Sockets]]
* [[Faster JavaScript]]

== Процес стандартизації ==
Відповідно до плану розвитку стандарту HTML5, представленим у вересні консорціумом [[W3C]]<ref>{{Cite web |url=http://dev.w3.org/html5/decision-policy/html5-2014-plan.html |title=Plan 2014 |accessdate=21 вересня 2012 |archive-date=25 грудня 2016 |archive-url=https://web.archive.org/web/20161225190623/https://dev.w3.org/html5/decision-policy/html5-2014-plan.html }}</ref><ref>{{Cite web |url=http://www.opennet.ru/opennews/art.shtml?num=34906 |title=Консорциум W3C планирует выпустить стандарт HTML 5.0 в конце 2014 года |accessdate=21 вересня 2012 |archive-date=25 вересня 2012 |archive-url=https://web.archive.org/web/20120925050612/http://www.opennet.ru/opennews/art.shtml?num=34906 }}</ref>, фінальні специфікації HTML 5.0 будуть опубліковані в четвертому кварталі 2014 року, після чого почнеться робота над стандартом HTML 5.1, який планується випустити в кінці 2016 року. 

Стандарт HTML5 планується сформувати в два етапи і оформити його за модульним принципом, що означає наявність набору самодостатніх специфікацій, що розвиваються різними робочими групами.  У HTML 5.0 будуть включені специфікації які будуть стабілізовані і погоджені до 2014 року, інші специфікації, з яких у процесі підготовки HTML 5.0 залишаться невирішені проблеми, будуть відкладені і включені до складу стандарту HTML 5.1.  Таким чином в стандарт HTML5 поступово, у міру готовності, будуть включатися нові специфікації та розширення. 

Серед чорнових специфікацій, які розглядаються для включення в стандарт HTML5 (більшість з представлених специфікацій вже досить добре підтримуються сучасними [[браузер]]ами і широко використовується на [[сайт]]ах і у [[вебзастосунок|вебзастосунках]]):
* [https://web.archive.org/web/20120923083030/http://dev.w3.org/html5/md/ HTML Microdata]
* [https://web.archive.org/web/20120922232251/http://dev.w3.org/html5/2dcontext/ HTML Canvas 2D Context]
* [http://www.w3.org/TR/webmessaging/ HTML5 Web Messaging] {{Webarchive|url=https://web.archive.org/web/20120909023749/http://www.w3.org/TR/webmessaging/ |date=9 вересня 2012 }}
* [http://www.w3.org/TR/workers/ Web Workers] {{Webarchive|url=https://web.archive.org/web/20120909022500/http://www.w3.org/TR/workers/ |date=9 вересня 2012 }}
* [http://www.w3.org/TR/webstorage/ Web Storage] {{Webarchive|url=https://web.archive.org/web/20210421231805/https://www.w3.org/TR/webstorage/ |date=21 квітня 2021 }}
* [http://www.w3.org/TR/websockets/ The WebSocket API] {{Webarchive|url=https://web.archive.org/web/20170426100102/http://www.w3.org/TR/websockets/ |date=26 квітня 2017 }}
* [http://tools.ietf.org/html/rfc6455 The WebSocket Protocol] {{Webarchive|url=https://web.archive.org/web/20120108124035/http://tools.ietf.org/html/rfc6455 |date=8 січня 2012 }}
* [http://www.w3.org/TR/eventsource/ Server-Sent Events] {{Webarchive|url=https://web.archive.org/web/20210202104705/http://www.w3.org/TR/eventsource/ |date=2 лютого 2021 }}
* [http://www.w3.org/TR/webrtc/ WebRTC] {{Webarchive|url=https://web.archive.org/web/20120905093824/http://www.w3.org/TR/webrtc/ |date=5 вересня 2012 }}
* [http://dev.w3.org/html5/webvtt/ WebVTT] {{Webarchive|url=https://web.archive.org/web/20151006080243/http://dev.w3.org/html5/webvtt/ |date=6 жовтня 2015 }}
* [http://dev.w3.org/html5/rdfa/ HTML+RDFa] {{Webarchive|url=https://web.archive.org/web/20120916032436/http://dev.w3.org/html5/rdfa/ |date=16 вересня 2012 }}
* [http://html5.org/specs/dom-parsing.html DOM Parsing and Serialization] {{Webarchive|url=https://web.archive.org/web/20120910062232/http://html5.org/specs/dom-parsing.html |date=10 вересня 2012 }}
* [http://www.w3.org/TR/2012/WD-shadow-dom-20120522/ Shadow DOM] {{Webarchive|url=https://web.archive.org/web/20120925175025/http://www.w3.org/TR/2012/WD-shadow-dom-20120522/ |date=25 вересня 2012 }}
* [http://dvcs.w3.org/hg/web-intents/raw-file/tip/spec/Overview.html Web Intents] {{Webarchive|url=https://web.archive.org/web/20130216082254/https://dvcs.w3.org/hg/web-intents/raw-file/tip/spec/Overview.html |date=16 лютого 2013 }}
* [http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html Polyglot Markup: HTML-Compatible XHTML Documents] {{Webarchive|url=https://web.archive.org/web/20121002041508/http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html |date=2 жовтня 2012 }}
* [http://dev.w3.org/html5/alt-techniques/ HTML5: Techniques for providing useful text alternatives] {{Webarchive|url=https://web.archive.org/web/20120916060822/http://dev.w3.org/html5/alt-techniques/ |date=16 вересня 2012 }}
* [https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html HTML Editing APIs] {{Webarchive|url=https://web.archive.org/web/20120720115500/http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html |date=20 липня 2012 }}
* [http://www.w3.org/TR/html-media-capture/ HTML Media Capture] {{Webarchive|url=https://web.archive.org/web/20120916042448/http://www.w3.org/TR/html-media-capture/ |date=16 вересня 2012 }}
* [http://www.w3.org/TR/mediacapture-streams/ Media Capture and Streams] {{Webarchive|url=https://web.archive.org/web/20120901055506/http://www.w3.org/TR/mediacapture-streams/ |date=1 вересня 2012 }}
* [http://www.w3.org/TR/media-frags/ Media Fragments URI] {{Webarchive|url=https://web.archive.org/web/20120920005324/http://www.w3.org/TR/media-frags/ |date=20 вересня 2012 }}
* [http://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html Encrypted Media Extensions] {{Webarchive|url=https://web.archive.org/web/20130310161620/https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html |date=10 березня 2013 }}
* [http://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html Media Source Extensions] {{Webarchive|url=https://web.archive.org/web/20130310154709/https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html |date=10 березня 2013 }}
* [http://www.w3.org/TR/SVG11/ SVG] {{Webarchive|url=https://web.archive.org/web/20120916044214/http://www.w3.org/TR/SVG11/ |date=16 вересня 2012 }}
* [http://www.w3.org/TR/MathML3/ MathML] {{Webarchive|url=https://web.archive.org/web/20120909061512/http://www.w3.org/TR/MathML3/ |date=9 вересня 2012 }}
* [http://www.w3.org/TR/wai-aria/ WAI-ARIA] {{Webarchive|url=https://web.archive.org/web/20210212073712/http://www.w3.org/TR/wai-aria/ |date=12 лютого 2021 }}

== Виноски ==
{{reflist}}

== Посилання ==
{{Commonscat|HTML5}}
* [http://www.whatwg.org/specs/web-apps/current-work/ WHATWG Current draft] {{Webarchive|url=https://www.webcitation.org/6G2tLSqvy?url=http://www.whatwg.org/specs/web-apps/current-work/ |date=21 квітня 2013 }}
* [http://www.w3.org/html/wg/ W3C HTML Working Group] {{Webarchive|url=https://web.archive.org/web/20110228215152/http://www.w3.org/html/wg/ |date=28 лютого 2011 }}
* [http://www.w3.org/html/wg/html5/ W3C Editor's draft] {{Webarchive|url=https://web.archive.org/web/20080610090704/http://www.w3.org/html/wg/html5/ |date=10 червня 2008 }}
* [http://www.w3.org/html/wg/html5/diff/ Differences from HTML 4] {{Webarchive|url=https://web.archive.org/web/20081105175450/http://www.w3.org/html/wg/html5/diff/ |date=5 листопада 2008 }}
* [https://developer.mozilla.org/en/HTML/HTML5 Mozilla Development Network&nbsp;— HTML5 ] {{Webarchive|url=https://web.archive.org/web/20110426104838/https://developer.mozilla.org/en/HTML/HTML5 |date=26 квітня 2011 }}
* [http://md-eksperiment.org/etv_page.php?page_id=856&album_id=9&category=novosti_kulturi 94% розробників ставлять на перемогу HTML 5] {{Webarchive|url=https://web.archive.org/web/20160311035723/http://md-eksperiment.org/etv_page.php?album_id=9&category=novosti_kulturi&page_id=856 |date=11 березня 2016 }}
* [http://easy-code.com.ua/2011/04/majbutnye-html-chastina-1-whatwg/ Майбутнє HTML: Частина 1. WHATWG] {{Webarchive|url=https://web.archive.org/web/20160307050151/http://easy-code.com.ua/2011/04/majbutnye-html-chastina-1-whatwg/ |date=7 березня 2016 }}

{{Вебоглядачі|fsp}}

[[Категорія:HTML]]
[[Категорія:Вебтехнології]]
[[Категорія:Стандарти на основі XML]]
[[Категорія:Статті з прикладами коду мовою HTML]]