HTML5: Факты и Мифы

Вы никуда не денетесь - сейчас все говорят о HTML5. Наверно, это самая разрекламированная технология, после которой люди стали пихать закругленные углы и градиенты куда только можно. Фактически, многое из того, что люди называют HTML5, является старомодным DHTML или AJAX. Достоверная информация перемешана с выдумками, и, чтобы исправить положение, Реми Шарп (эксперт JavaScript) и Брюс Лоусон (евангелист Opera) рассмотрят некоторые мифы и отделят истину от распространенных заблуждений.

Немного Фактов для начала

Давным-давно жил-был прекрасный язык HTML, который был таким простым, что писать сайты с ним было очень легко и приятно. Так делали все, и постепенно Интернет перешёл от коллекции материалов по физике к тому, что мы знаем и любим сегодня.

Большинство страниц не соответствовало простым правилам языка (потому что их авторы больше думали о том, что написать, чем о том, какими средствами они это будут делать), а значит, браузеры должны были не замечать плохой код и отображать сайт именно так, как хотелось автору.

В 1999 W3C решил прекратить работу над HTML и открыть миру XHTML. Всё было хорошо, пока некоторые не заметили, что XHTML2, который разрабатывался в то время, был практически непригоден для Интернета. Будучи потомком XML, он требовал, чтобы браузер прекратил обработку страницы при встрече с ошибкой. Кроме того, из-за того что W3C писал новый язык, который должен быть лучше чем старый добрый HTML, он выступал против <img> и <a>.

Группа разработчиков в Opera и Mozilla не согласилась с этим подходом и сделала доклад на W3C в 2004, утверждая следующее: “Мы считаем, что веб-приложения - это важная область, которая не была расширена существующими технологиями… Есть риск того, что W3C попытается решить эту проблему, не прислушиваясь к мнению других сообществ.”

В докладе было предложено семь принципов разработки:

1. Обратная совместимость, и четкий миграционный путь.
2. Обработка ошибок по принципу CSS (то есть игнорировать неизвестный материал и двигаться дальше), а не как в XML с его "безжалостной" обработкой ошибок.
3. Пользователи не должны быть беззащитными перед ошибками авторской разработки.
4. Практическое применение: каждая функция, которая входит в спецификацию Web-applications, должна быть обоснованна случаями применения на практике. Но в то же время каждый новый вариант использования не гарантирует появление новой функции.
5. Скрипты остаются.
6. Избегайте профилирования для специфичных устройств.
7. Сделайте процесс работы открытым. (Преимущество Сети в том, что она разрабатывалась открыто. Списки рассылки, архивы и черновые спецификации всегда должны быть открыты общественности.)

Документ был отклонён W3C, тогда Opera и Mozilla (а в дальнейшем и Apple) создали список рассылки под названием Web Hypertext Application Technology Working Group (WHATWG), работающую над спецификацией. Спецификация расширяла формы HTML4, пока она не превратилась в спецификацию Web-applications 1.0 под продолжительной редакцией Йена Хиксона, который ушёл из Opera в Google.

В 2006 W3C осознал свою ошибку и решил возродить HTML, попросив WHATWG использовать их спецификацию как основание того, что теперь называют HTML5.

Это были Исторические Факты. Теперь давайте взглянем на Истеричные Мифы.

Мифы

“Я не могу использовать HTML5 до 2012 (или до 2022)”

Это недоразумение возникло из-за даты, когда HTML5 достигнет стадии, известной как Candidate Recommendation (REC). WHATWG wiki говорит следующее:

Чтобы спецификация стала REC, требуется две 100%-ых полных и полностью взаимодействующих реализации, каждая из которых должна пройти тысячи тестов (20 000 тестов для спецификации - оценка с запасом). Когда вы увидите, сколько времени занимает запись такого количества тестов и сколько времени занимает реализация каждой опции, вы поймёте, почему спецификация развивается так медленно.

Так, по определению, спецификация не будет закончена, пока вы не сможете использовать её целиком в двух браузерах.

Конечно, что на самом деле важно, так это те крохи HTML5, которые уже поддерживаются в браузерах. В течение недели любой список устаревает, потому что создатели браузеров добавляют новые свойства очень быстро. Кроме того, большая часть новой функциональности может быть заменена JavaScript в браузерах, у которых нет поддержки новых свойств. Свойство <canvas> существует во всех современных браузерах и будет также в Internet Explorer 9, а в старых версиях IE могут заменяться с помощью библиотеки excanvas. В старых браузерах свойства <video> и <audio> могут заменяться Flash.

Таким образом, используя JavaScript и немного мозгов, можно сделать так, чтобы всё содержание сайта было доступно в старых браузерах.

“Мой браузер поддерживает HTML5, а Ваш - нет”

Существует миф, что HTML5 - это нечто монолитно-неделимое. Нет. HTML5 - это набор функций. Так, в ближайшей перспективе вы не сможете сказать, что какой-то браузер поддерживает спецификацию целиком.

Возможно, вы думаете: "Настоящий бардак! Почему не подождать завершения работы над спецификацией, и уже потом её применять?". Тогда вспомните, что CSS 2.1 - незавершённая спецификация, и тем не менее мы её используем. Мы используем CSS3, с удовольствием добавляя border-radius, который скоро будет везде поддерживаться, в то время как некоторые свойства CSS3 не поддерживаются ни одним браузером.

HTML5 поощряет Неаккуратный Код

HTML5 прощает намного больше, чем XHTML: вам не нужно закрывать теги подобные img, поэтому оба приведённых ниже варианта являются верными:

<img src="nice.jpg"/>
<img src="nice.jpg">

Вам не нужно заключать атрибуты в кавычки:

<img src="nice.jpg">
<img src=nice.jpg>

Вы можете использовать верхний или нижний регистр (или смешать их) как это показано ниже:

<IMG SRC=nice.jpg>
<img src=nice.jpg>
<iMg SrC=nice.jpg>

Ничем не отличается от HTML4, но может шокировать вас, если Вы привыкли к XHTML. На самом деле, если вы создавали ваши страницы в виде HTML, а не XML (а вы создавали HTML, потому что IE 8 и ниже не обрабатывал настоящий XHTML), тогда это не имело никакого значения: браузеру плевать и на закрывающие слэши и на то, будут атрибуты заключены в кавычки или нет.

В то время как синтаксис становится более свободным, фактический парсинг намного сложнее. Различие в том, что больше не будет неаккуратного кода; спецификация описывает, что сделать с недопустимой разметкой так, чтобы все браузеры производили один и тот же DOM. Если вы когда-либо писали JavaScript для обхода DOM, то вы знаете об ужасах, которые может принести непоследовательный DOM.

Конечно, коррекция ошибок - не причина производить ещё больше недопустимого кода. DOM, который создаст HTML5 из вашего кода, не всегда будет выглядеть так, как вы хотели. Также можно легко пропустить маленькую синтаксическую ошибку, которая будет мешать работе скрипта или изуродует ваш CSS код. Вот почему у нас есть HTML5 валидаторы.

HTML5 не заставляет писать код в рамках XML, при этом решая проблему с различным DOM. Круто.

“Мне нужно преобразовать мой сайт на XHTML в HTML5”

Разве не является факт терпимости HTML5 к упрощённому синтаксису похоронным звоном для XHTML? В конце концов, группа, работавшая над XHTML 2 была расформирована, так ведь?

Правда, группа XHTML 2 была расформирована в конце 2009; она работала над нереализованной спецификацией, которая конкурировала с HTML5. Но XHTML 1 был законченной спецификацией, которая широко поддерживается во всех браузерах, и она будет работать столько, сколько понадобится. Ваши сайты на XHTML вне опасности.

HTML5 Уничтожает XML

Нисколько. Если вам нужно использовать XML, а не HTML, попробуйте XHTML5, используя синтаксис XHTML (то есть заключенные в кавычки атрибуты, слэши для закрытия элементов типа input и img, названия тегов и атрибутов в нижнем регистре и т. п..)

На самом деле, вы не сможете использовать все чудеса HTML5 в XHTML5: <noscript> не будет работать. Но кто его сейчас использует?

HTML5 Уничтожает Flash и Плагины

Тег <canvas> разрешает заданные скриптом изображения и анимации, которые взаимодействуют с клавиатурой, следовательно, он может конкурировать с простейшим использованием Adobe Flash. У HTML5 есть своя возможность для проигрывания видео и аудио.

Как и раньше, когда CSS шрифты практически не поддерживались и Flash использовался в sIFR, сейчас Flash спасает положение, обеспечивая обратную совместимость с HTML5. Для встраивания видео Flash необходимо использовать забытые <object> или <embed> теги. Впервые об этом написал Крок Камен в своей статье “Video for Everybody!” (см. скриншот ниже).



Но во Flash ещё остались области, которые не захвачены HTML5. Нет никакого способа управлять цифровыми правами в HTML5; браузеры, такие как Opera, Firefox и Chrome позволяют посетителям сохранять видео на компьютере щелчком по контекстному меню. Если вы не хотите, чтобы кто-то сохранил ваше видео, вам придётся применить плагины. Работа со звуком от микрофона или веб-камерой сейчас возможна только на Flash, поэтому, если вы хотите написать убийцу Chatroulette, HTML5 не для вас.

Новшества HTML5 не подходят для людей с ограниченными способностями

HTML5 добавляет свои способы управления такие как ползунки (<input type=range>, который поддерживают Opera и Webkit) и средство выбора даты (<input type=date>, пока только в Opera, смотрите Работу с формами в HTML5 от Брюса), а раньше мы должны были заменять их изображениями с JavaScript и самостоятельно добавлять поддержку клавиатуры.

С тегом <canvas> другая история. Это - изобретение Apple, которое было скопировано другими браузерами и затем добавлено к HTML5. Если вы используете <canvas> лишь для того, чтобы сделать привлекательную картинку, это замечательно, но проследите, чтобы эта картинка на всякий случай дублировалась текстом.

Текст в <canvas> становится пикселями (так же и как текст в простых изображениях), и не распознаётся вспомогательными технологиями и средствами чтения с экрана. Рассмотрите вариант использования графической технологии от W3C Scalable Vector Graphics (SVG) специально для вещей вроде динамических графиков и анимации текста. SVG поддерживается во всех основных браузерах, включая IE9 (в IE8 или ниже SVG не поддерживается, хотя библиотека SVGweb может эмулировать SVG с Flash).

Ситуация с <video> и <audio> подаёт надежды. Ещё не целиком определенный (и ещё не реализованный ни в одном браузере) новый элемент <track> был включен в спецификацию HTML5. Он позволяет связать транскрипты (или слова песни, или субтитры для глухих, или переводы для носителей иностранного языка) с мультимедиа. Этот элемент можно эмулировать в JavaScript. В качестве альтернативы (что будет лучше для поисковых систем), вы можете вставить транскрипты непосредственно на странице ниже видео и использовать JavaScript, чтобы наложить субтитры, синхронизируемые с видео.

Ссылки на будущее

HTML5 - огромная тема. Вот несколько вручную отобранных ссылок. Маленькое разоблачение: к кое-каким материалам авторы приложили свои руки.

• W3C Specification: HTML5 (Edition for Web Authors)
  Материал только для тех, кто пишет сайты (в противоположность тем, кто пишет браузеры).
  
  
• HTML5 Demos and Examples
  Демонстрационные примеры HTML5, которые уже реализованы в браузерах.
  
  
• HTML5 Doctor
  Короткие и чёткие статьи, которые “помогут вам применять HTML5 сегодня.”
  
  
• html5-shims
  Скрипты, эмулирующие функциональность HTML5 в более старых браузерах.
  
  

Данная статья - перевод статьи Реми Шарпа и Брюса Лоусона HTML5: The Facts And The Myths.

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты