HTML5

HTML5
(HyperText Markup Language)
Розширення:	.HTML: .html, .htm; XHTML: .xhtml, .xht, .xml
MIME-тип:	HTML: text/html; XHTML: application/xhtml+xml, application/xml
Type code:	TEXT
Узагальнений ідентифікатор типу:	public.html
Розробник:	W3C HTML WG, WHATWG
Тип формату:	Мова розмітки даних
Стандарт(и):	WHATWG Editor's draft; W3C Editor's draft;

ними інтересами та досвідом.

Структура доjioliolklkjljlki,mjlj

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

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

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

Приклад розмітки веб-сторінки за допомогою HTML5

Приклад розмітки сторінки за допомогою HTML 5

<!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
 </footer>
      <a href="https:\\www.google.com", "Google">

    </body>
</html>

Підтримка тегів <video> та <audio>

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

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

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

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

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

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

У HTML5 включений елемент source для вказівки альтернативних відео і аудіо файлів, щоб браузер міг вибрати той, який підходить до підтримуваного медіа-типу або кодеків. Атрибут media визначає вибір медіа-запиту, що базується на обмеженнях пристроїв, а атрибут type — можливості медіа-типів і кодеків. Коли використовується атрибут 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, хоча вони насправді стосуються інших специфікацій

Процес стандартизації

Відповідно до плану розвитку стандарту HTML5, представленим у вересні консорціумом W3C^[1]^[2], фінальні специфікації HTML 5.0 будуть опубліковані в четвертому кварталі 2014 року, після чого почнеться робота над стандартом HTML 5.1, який планується випустити в кінці 2016 року.

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

Серед чорнових специфікацій, які розглядаються для включення в стандарт HTML5 (більшість з представлених специфікацій вже досить добре підтримуються сучасними браузерами і широко використовується на сайтах і у веб-застосунках):

Виноски

Посилання

[1] Plan 2014

[2] Консорциум W3C планирует выпустить стандарт HTML 5.0 в конце 2014 года

[1]

[2]