HTML5 — путеводитель по технологии

HTML5 –

путеводитель по технологии

Москва, 2023

К. Сухов

2-е издание, электронное

УДК 004.738.5:004.4HTML5
ББК 32.973.202-018.2
С89

С89
Сухов, Кирилл Константинович.

HTML5 — путеводитель по технологии / К. К. Сухов. — 2-е изд., эл. — 
1 файл pdf : 353 с. — Москва : ДМК Пресс, 2023. — Систем. требования: 
Adobe Reader XI либо Adobe Digital Editions 4.5 ; экран 10". — Текст : электронный.

ISBN 978-5-89818-532-9
Книга посвящена знакомству и незамедлительному началу использования на 
практике HTML5 — новому стандарту и флагману современных интернет-технологий. Все новые API (Canvas, Geolocation API, WebStorage, WebSockets, WebRTC, 
WebGL IndexedDB и многое, многое другое) рассмотрены на основе практических 
примеров, и большую часть из них можно использовать прямо здесь и сейчас. Книга адресована веб-программистам, веб-верстальщикам, ведущим веб-проектов и 
вообще всем, кто имеет отношение к интернет-разработке. 
Мы можем относиться к новому стандарту как угодно, это не важно — важно 
понимать: HTML5 — это уже не будущее, это настоящее. И не приняв его, мы рискуем застрять в ХХ веке. Это, может, и не самое плохое время, но если мы работаем с 
информационными технологиями — давайте жить и творить сегодня!
Для хорошего понимания материла желательны знания HTML/DHTML/
JavaScript и общее представление об устройстве Всемирной сети.

УДК 004.738.5:004.4HTML5 
ББК 32.973.202-018.2

Электронное издание на основе печатного издания: HTML5 — путеводитель по технологии 
/ К. К. Сухов. — Москва : ДМК Пресс, 2014. — 352 с. — ISBN 978-5-94074-997-4. — Текст : непосредственный.

Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было 
форме и какими бы то ни было средствами без  письменного разрешения владельцев авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но поскольку вероятность технических 
ошибок все равно существует, издательство не может гарантировать абсолютную точность и правильность 
приводимых сведений. В связи с этим издательство не несет ответственности за возможные ошибки, связанные с использованием книги.

В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами 
защиты авторских прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации.

ISBN 978-5-89818-532-9
©  Сухов К., 2014
© Оформление, ДМК Пресс, 2014

Содержание

Введение .......................................................................................... 7

Будущее www – какое оно? .......................................................... 8

История вопроса ............................................................................. 9
Актуальность стандарта .................................................................. 9
XHTML – стандарт для стандартизаторов ........................................ 9
За пределы разметки – ActiveX, Java, Flash .................................... 12
Рождение HTML5 ........................................................................... 14

RIA .................................................................................................... 16
Microsoft Silverlight ........................................................................ 17
Adobe Flex ..................................................................................... 19
JavaFX ........................................................................................... 21
Google Native Client ........................................................................ 23
RIA и HTML5 .................................................................................. 24

HTML5 сегодня  ............................................................................. 25
О браузерах .................................................................................. 26
Проверять возможности, а не версии ............................................ 26
Moz-, webkit- и прочие  vender-грабли ........................................... 27
Modernizr – бархатный путь в HTML5 ............................................. 29

HTML – это теги ............................................................................. 35
Структура страницы ...................................................................... 35
Воплощение концепции семантической разметки  ........................ 37
Всякие полезности ........................................................................ 42
Атрибуты и аксессуары ................................................................. 46
Атрибуты data-* ............................................................................. 50
Отречемся от старого мира (что выбросили, что изменили) .......... 51

HTML5-формы – о чем мы мечтали ......................................... 55
Новые поля ввода .......................................................................... 55
INPUT... а OUTPUT? ........................................................................ 62
Не только разметка – объект ValidityState и другие ........................ 64

HTML5 Accessibility – всего лишь доступность 
(ARIA, WCAG) .................................................................................. 68
WCAG – рекомендации, которые никто не слушал ......................... 68
WAI-ARIA – перманентно временное решение, которое работает .... 71
Проблемы доступности ............................................................ 72

Содержание

ARIA-роли ...................................................................................... 73
Абстрактные роли (Abstract Roles)  ........................................... 73
Роли – виджеты (Widget Roles) .................................................. 74
Роли структуры документа (Document Structure Roles) ............. 75
Роли разметки (Landmark Roles) ............................................... 76
Состояния и свойства объектов – ARIA-атрибуты .......................... 77
Атрибуты виджетов .................................................................. 77
Атрибуты для Live Region .......................................................... 77
Атрибуты перетаскивания (Drag-and-Drop) .............................. 78
Атрибуты отношений ................................................................ 78
Применение WAI-ARIA  ................................................................... 80

Web с нечеловеческим лицом (микроформаты 
и микроданные) ............................................................................ 81
Когда тегов не хватает ................................................................... 81
Микроформаты ............................................................................. 82
Технология RDFa ........................................................................... 85
Микроданные ................................................................................ 89
Microdata DOM API ......................................................................... 96

Canvas – холст для рисования на веб-странице ................... 97
Черный ректангл ........................................................................... 97
Использование примитивов .......................................................... 99
Начинаем рисовать ..................................................................... 103
Работа с изображениями ............................................................ 111
За каждый пиксель! ..................................................................... 117
Трансформации .......................................................................... 119
Интерактивность и анимация ...................................................... 122
Свой Paint .............................................................................. 122
Как нам организовать анимацию? .......................................... 124
Play the Game! ............................................................................. 127
Библиотеки для работы с Сanvas  ................................................ 130

SVG – векторная графика в www .............................................133
Рисуем тегами ............................................................................ 133
Кривая вывезет ........................................................................... 138
Группируй и властвуй .................................................................. 143
Усложняем жизнь – элементы symbol и image .............................. 145
SMIL – язык анимации SVG .......................................................... 147
Библиотеки для работы с SVG ..................................................... 150
Canvas vs SVG .............................................................................. 151

WebGL – врываемся в третье измерение ............................. 153
Браузеры и драйверы .................................................................. 153
Шейдеры .................................................................................... 159
Наконец-то 3D ............................................................................. 164

Содержание

Теперь в движении ...................................................................... 166
Объем ......................................................................................... 168
Текстура и освещение ................................................................. 171
Инструментарий для работы с WebGL ......................................... 179

Храним данные на клиенте  – 
WebStorage/WebSQL/WebNoSQL ............................................ 184
WebStorage – хранилище «ключ/значение» в браузере ................ 184
WebSQL – реляционная база данных на веб-странице ................. 185
IndexedDB – NoSQL в вебе ........................................................... 187

AppCache – управляем кэшированием вплоть 
до полного offline! ...................................................................... 193

File, FileSystem и полный drag’n’drop .................................... 196
File API – Ура! Свершилось! ......................................................... 196
FileSystem API .............................................................................. 200
Все это drag’n’drop! ..................................................................... 205

Сервер, я здесь ........................................................................... 215
Server-Sent Events – сервер тебя не оставит ................................ 216
Web Messaging – легальный XSS .................................................. 219
XMLHttpRequest 2 ........................................................................ 223

Звуки audio ................................................................................... 227
MediaElement – медиаплеер на HTML .......................................... 229
WebAudioAPI ................................................................................ 234

Video............................................................................................... 240

WebRTC – коммуникации через веб-страницу .................... 243

Geolocation API. Непростой вопрос собственного 
местонахождения ....................................................................... 250
Где это я? .................................................................................... 250
Позиционируем с помощью Google Maps .................................... 252
Откуда? ....................................................................................... 253
Вглубь Geolocaton API .................................................................. 254

WebWorkers – судьба сетевого пролетариата .................... 257
Параллельные вычисления 
на веб-странице  ......................................................................... 257
Sharedworker’ы – надо делиться  ................................................. 263

WebSockets – забудем про HTTP? .......................................... 267
Web Sockets – TCP для веба ......................................................... 267
WebSocket-серверы .................................................................... 269
Работаем с phpDaemon ............................................................... 270

Содержание

Web Intents – средство общения приложений .................... 278

Web Speech API – счастье, когда тебя понимают 
(распознавание речи на веб-странице) ................................ 282
Поговорим с веб-интерфейсом ................................................... 282
Ничего не получается! Ошибки .................................................... 288
Родная речь ................................................................................ 290
А поговорить? SpeechSynthesis ................................................... 291

MathML – история с математикой .......................................... 294
Введение в MathML ..................................................................... 294
Presentation MathML – разметка представления .......................... 298
Content MathML – «содержательная» разметка ............................ 305
А теперь все вместе! (Cмешанная разметка) ............................... 309

Прочие полезные вещи ............................................................. 312
События колесика мыши ............................................................. 312
Full-Screen API ............................................................................. 313
Состояние onLine ........................................................................ 314
Page VisibilityAPI .......................................................................... 314
History Api .................................................................................... 315
RequestAnimationFrame – решение проблем 
JavaScript-анимации ................................................................... 317
Prerendering – отрисовываем страницы заранее ......................... 318
Selectors API – простой синтаксис доступа к DOM-элементам  .... 319
Расширения DOM  ....................................................................... 320
Web Notifications API – настоящие pop-up’ы ................................. 320
Mouse Lock/Pointer Lock  API ........................................................ 323

Vibration API есть? А если найду?
HTML5 для мобильных устройств ........................................... 325
Battery Status – API, продиктованный жизнью .............................. 325
А как насчет ориентации? Device Orientation API .......................... 327
Ориентация экрана – объект Screen и его Orientation API ............. 332
«I'm pickin' up good vibrations» – Vibration API ................................ 334
Теплый ламповый API – Ambient Light Events ................................ 334
Proximity Events – они уже рядом ................................................. 335
Network Information API ................................................................ 336

Mozilla WebAPI – будущее наступило? .................................. 338

Приложение 1. Ресурсы для работы 
с HTML5-технологиями ............................................................. 342

Приложение 2. Спецификации W3C, имеющие 
отношение к HTML5-технологиям .......................................... 343

Предметный указатель ............................................................. 345

Введение

Писать о технологии, стандарты которой не утверждены, просто 
здорово. Можно дать волю своей трактовке концепций, можно порассуждать о перспективах и  еще не реализованных возможностях... 
Все это, наверное, заманчиво, может даже слишком заманчиво, судя по количеству  появившихся в  последнее время публикаций по 
HTML5, перспективы утверждения спецификаций которого лежат 
еще не в очень близком будущем.
Конечно, огромный интерес к новой технологии – это хорошо. 
Плохо другое – многие из вышедших за последнее время книг 
подробно рассказывают об истории языка разметки, затем более 
или менее подробно освещают два-три нововведения (обычно это 
canvas, семантическая разметка и, разумеется,   video) и... и все. Толку от этих, зачастую повторяющих друг друга публикаций для разработчика немного. Именно это обстоятельство и заставило меня 
попробовать создать такой материал, который мне самому (как вебразработчику) был бы максимально полезен.
Цель написания этой книги – в том, чтобы любой программист, 
работающий в области интернет-технологий, мог быстро ознакомиться с новым для себя API или технологией (WebStorage,  AppCache, WebRTC, Geolocation API, FileSystem API – в HTML5 их 
множество), разобрал примеры кода и немедленно приступил к работе, творя новый, прекрасный веб будущего!
HTML5 – это уже не язык разметки, это сумма технологий, предоставляемых современными браузерами, каждая из которых привносит в существующий веб что-то новое. В книге дается описание 
тех из них, которые уже доступны в настоящее время. На каждое 
решение, каждое API дается пример работающего кода.
По мере возможности рассматриваемые технологии тематически 
сгруппированы в рамках одного направления.
В приложении перечислены спецификации консорциума W3C, 
находящиеся в той или иной степени готовности, регламентирующие упомянутые технологии.

Будущее www – какое оно?

Июньским вечером 2004 года представители консорциума W3C покидали зал заседаний в г. Сан-Хосе (северная Калифорния) в хорошем настроении. У них было на это основание. Два дня прошли 
в жарких дебатах, но здоровый консерватизм и академизм победил – 
в результате анонимного голосования 14 голосами против восьми 
было признано нерациональным предложение представителей вебиндустрии о пересмотре спецификаций HTML и DOM в сторону 
расширения. На встрече присутствовали представители Microsoft, 
Mozilla Foundation и Opera Software, ведущих на тот момент производителей браузеров. Они пытались донести до собравшихся свое 
видение веба будущего, но проиграли.
Естественно, уважаемые представители W3C тогда не подозревали, что основным следствием их решения станет серьезный подрыв 
авторитета консорциума и что жизнь и реальные подробности вебобщественности уже очень скоро возьмут свое. Мы еще вернемся 
к продолжению этой истории, а пока давайте посмотрим, что же 
такого революционного предлагали производители браузеров.
Сам исторический вопрос звучал следующим образом: Should the 
W3C develop declarative extension to HTML and CSS and to address 
medium level Web Application requirements, as opposed to sophisticated, 
fully-fledged OS-level APIs? (Должен ли W3C развивать декларативное расширение HTML и CSS и обязательно дополнять DOM для 
решения требований среднего уровня веб-приложений, в отличие от 
сложных API уровня ОС?)
От чего же отказались уважаемые члены консорциума и каких 
именно изменений хотели «практики»? Все было довольно просто. 
В существующем виде HTML перестал удовлетворять запросам пользователей www, и производители браузеров знали, что делать, чтобы 
исправить ситуацию. Введение пары или пары десятков новых тегов 
тут положение не спаса ло. Веб нуждался в новой функциональности, 
новых возможностях, которые включали бы в себя простые способы 
отображения мультимедиа-контента и графики, возможности геолокации, средства для создания умных интерактивных приложений, 
расширенные средства коммуникации и многое, многое другое.
Самое обидное было то, что технические средства для решения многих из этих задач к тому момен ту уже были. Впрочем, для лучшего понимания вопроса нам придется разобраться в ситуации чуть подробней.

История вопроса

Я честно не хотел писать какой-либо исторический очерк и ковыряться в перипетиях развития стандарта, но после некоторых колебаний понял, что знание истории поможет лучше понять подходы и 
концепции HTML5. Правда, я совершенно не готов (главным образом не на уровне эрудиции, а морально) начинать с Тима БернерсаЛи и NCSA Mosaic. Лучше начнем с HTML 4, спецификация которого была утверждена в декабре 1997 года. 

Актуальность стандарта

Да-да, если не считать некоторых изменений, внесенных два года 
спустя, мы все еще живем и делаем сайты по стандартам, утвержденным в середине 90-х. За это время произошло просто колоссальное 
количество событий. Я не имею ввиду кризис в Югославии, отставку Ельцина, войну в Ираке и прочие мелочи. У нас, в веб-индустрии, 
прошла целая эпоха – закончилась и снова началась война браузеров, серверы заполонила архитектура LAMP, php стал самой популярной и самой презираемой технологией в веб, пришел ajax, а с ним 
и web 2.0 (который, правда, уже понемногу забывают), появился 
этот кошмар под общим названием социальные сети, higload, REST, 
COMET,  NoSQL... Наконец, веб проник на мобильные устройства, 
причем на такие, которые в 90-х можно было увидеть разве что в сериале Star Track. И вот при всем при этом мы все еще живем при 
 HTML 4.0. Ну, хорошо, на самом деле на 4.01, но кто-нибудь с ходу 
вспомнит разницу?

 XHTML – стандарт 
для стандартизаторов

Впрочем, нельзя сказать, что все это время люди, отвечающие 
за стандарты, сидели сложа руки. Строго говоря, HTML является 
одной из реализаций  SGML (стандартного обобщенного языка разметки – стандарт ISO 8879), причем реализацией добровольно примитивной – одно только описание стандарта SGML представляет 
собой 40-мегабайтный PDF-документ. И первое, что пришло в голову разработчикам консорциума W3C, – представить язык разметки 

веб-страниц в более упорядоченном и структурированном виде, приведя его к другому производному от SGML стандарту, получившему к тому времени широкое распространение расширяемому языку 
разметки  XML. В результате на свет появился стандарт XHTML 
(Extensible Hypertext Markup Language – расширяемый язык разметки гипертекста). Основные отличия его от HTML можно перечислить в нескольких пунктах:
 
все теги (основные элементы HTML/XHTML) должны быть 
закрыты. Даже не имеющие закрывающего тега изначально. 
В XHTML, например, элемент <img> станет таким: <img />;
 
все имена тегов и атрибутов должны быть записаны строчными буквами (никаких <BODY><HEAD></HEAD>, только так: <body>); 
 
все атрибуты обязательно заключаются в кавычки;
 
булевы атрибуты записываются в развернутой форме. Например:

<input type ="checkbox" checked="checked" />;

 
все служебные символы, не относящиеся к разметке, должны 
быть заменены HTML-сущностями. Например: < на &lt; а & 
на &amp. 
Кроме того, XHTML-документ должен подчиняться правилам валидации обычного XML: допустимо существование только одного 
корневого элемента, не принимается нарушение вложенности тегов 
(например, конструкции вида <a><i>Text</a></i>, вполне позволительные в HTML).
Впрочем, самое главное отличие заключалось не в синтаксисе 
а в отображении XHTML-документа браузером. При встрече браузером значения поля content-type в заголовке http паркета, равного 
application/xhtml+xml, документ обрабатывается xhtml-парсером, 
аналогично обработке XML-документа. При этом ошибки в документе не исправляются. Согласно рекомендациям W3C, браузеры, 
встретив ошибку в XHTML, должны прекратить обрабатывать документ, выдав соответствующее сообщение.
Спецификация XHTML 1.0 была одобрена в качестве рекомендации консорциума Всемирной паутины в январе 2000 года. В августе 2002 года была опубликована вторая редакция спецификации –  XHTML 1.1. Параллельно полным ходом началась разработка 
XHTML 2.0, призванного стать новым уровнем представления документов во Всемирной сети. Разработчики пошли на довольно смелый шаг – нарушение обратной совместимости, но нововведения, 

История вопроса