Html5 зачем он нужен. Что такое HTML5? Правда ли, что HTML5 предназначен для мобильных устройств

1. Настраиваемые атрибуты данных :

Добавление пользовательских атрибутов было возможно и до появления HTML5, но оно было связано с определенным риском, к примеру, в HTML4 пользовательские атрибуты могли приводить к остановке рендера страницы или что еще хуже, могли стать причиной неправильной работы документа. Атрибут data-* в HTML5 поставил точку в решении этой часто встречающейся проблемы. Этот атрибут имеет несколько предназначений, но основной целью его введения было хранение дополнительной информации о разных элементах. Теперь, благодаря этому атрибуту могут быть включены пользовательские данные, что дает разработчикам больше возможностей сделать привлекательные и эффективные страницы, без лишних запросов на сервер или вызовов Ajax.

1. (Возможное) прощание с Cookies:

Поддержка локального хранилища стала важным дополнением к HTML5. До появления HTML5, если разработчики хотели хранить что-либо на стороне пользователя, им приходилось использовать файлы cookie. Однако файлы cookie могут содержать лишь небольшой объем данных (не говоря уже о том, что все их ненавидят), это прибавило добавлению объекта localStorage в HTML5 еще больше преимуществ. Объект localStorage является частью глобального пространства имен и при использовании скриптов может быть доступен из любого места.

Шпаргалка HTML5

Если вы еще не знаете что такое HTML5 и с чем его едят, шпаргалка может быть отличным подспорьем при его изучении. Используйте приведенную ниже таблицу стилей HTML, для более продуктивного начала работы с HTML. Эта шпаргалка показывает наиболее часто используемые теги HTML.

Преимущества HTML5 для обычного пользователя

HTML5 привел к сдвигу устоявшейся модели программирования как для разработчиков, так и для обычных пользователей. Приведем примеры нескольких преимуществ для обычных пользователей:

1. Мобильные браузеры теперь работают более стабильно, чем стандартные приложения. До появления HTML5 ситуация была иная.
2. Сегодня ставка на адаптивные сайты (дружелюбные к мобильным устройствам) очень высока, так как почти 30 процентов пользователей мобильных устройств не хотят загружать специальные приложения. Это стало еще одним преимуществом HTML5, к примеру, если пользователь хочет использовать услуги компании, но не хочет загружать специальное приложение, он может просто зайти на сайт компании, чтобы сделать это.
3. Искоренение необходимости использования Adobe Flash позволяет разработчикам обеспечить более эстетичный пользовательский интерфейс. Использование JavaScript и MPEG4 в сочетании с HTML5 сделало жизнь пользователей намного лучше.
4. Возможность поддержки собственных аудио и видео элементов означает, что пользователям не придется загружать дополнительные плагины для просмотра мультимедиа на вашем сайте. Поддержка мультимедиа, предоставляемая HTML5, является одной из самых значимых причин, по которой он используется намного чаще чем HTML.

Заключение

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

Несмотря на то, что волна изменений уже настигла многих разработчиков по всему миру, ожидается, что в ближайшие годы HTML5 еще более расширит свое влияние. Очень важно адаптироваться и узнать что такое HTML5 сейчас, чтобы максимально использовать возможности современных браузеров.
Если вы хотите оптимизировать ваш HTML код, вы можете посетить .

Все вы наверняка хоть что-то слышали о HTML5 – новой версии языка разметки страниц в интернете. Она до сих пор считается находящейся в разработке, хотя со времени официального утверждения действующей версии HTML 4 прошло более пятнадцати лет – фактически всё время активного развития Всемирной сети. В чём же заключаются преимущества HTML5 и принципиальные его отличия от HTML4?

1. HTML5 – новый подход к разметке: мультимедиа внутри

В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.

Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.

Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это – «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.

Эта система до сих пор вполне работоспособна, однако отсутствие общепринятых стандартов приводит к тому, что на разных сайтах используются разные технологии, для просмотра их медиаконтента требуются разные плагины и, самое главное, поскольку такие плагины не входят непосредственно в составе браузера, необходима их отдельная установка.

В стандарте HTML5, представляющем собой сочетание собственно HTML, а также CSS и JavaScript, изначально реализуется принципиально иной подход, в котором медиаконтент представляет собой неотъемлемую часть кода страницы. HTML5 обеспечивает единый стандартный способ описания (синтаксис) встраиваемого в страницы аудиовизуального контента.

Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.

Разумеется, у HTML5 есть и множество других нововведений, но это самое главное из них – изменение идеологического подхода.

2. Проблема обратной совместимости: сначала HTML, потом плагины

К сожалению, в мире остаётся значительная часть пользователей, у которых установлены устаревшие браузеры, вполне их устраивающие, но не поддерживающие все возможности HTML5. Прежде всего, речь идёт об Internet Explorer версии 8, до сих пор самой популярной для этого браузера. Последующие версии – IE 9 и 10 – уже практически полностью поддерживают HTML5. Что касается Chrome, Opera и Safari, то они уже в течение нескольких лет способны обрабатывать теги «video» и «audio».

Тем не менее для обеспечения обратной совместимость в HTML5 сохраняется поддержка использования плагинов (тега «object»), но по схеме «сначала HTML, а потом уже плагины». Это означает, что браузер должен сначала осуществлять рендеринг страницы с использованием тегов «video» и «audio» – и лишь при невозможности сделать это применять код плагинов.

Для обеспечения правильного функционирования такого подхода можно использовать одну из множества доступных библиотек JavaScript, часть из которых предоставляет полностью интегрированный программный интерфейс (API) для управления как HTML-контентом, так и встроенными объектами. Среди них, в частности, можно назвать Projekktor или программный видеоплеер Video.js , обеспечивающие полную совместимость как с HTML5, так и со старыми браузерами, в которых применяются плагины.

3. Единый подход к десктопным и мобильным платформам

Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств. Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.

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

4. Поддержка разных форматов видео и звука

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

Самые популярные контейнеры для интернет-видео – это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 – MP4, Theora – OGG, VP8 – WebV.

Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом – более качественное видео.

Хотя H.264 – коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.

Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.

Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.

Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.

5. Существует обширная общедоступная документация

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

Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например,

Откуда взялся HTML5?
Я не буду вдаваться глубоко в историю HTML и HTML5 - это тема для отдельного большого рассказа, но суть вопроса вот в чем.
Сама история HTML имеет весьма давние корни, начиная с языка GML (Generalized Markup Language), родившегося в недрах IBM в конце 60х годов, продолжая стандартизированным в первой половине 80х языком SGML (Standard Generalized Markup Language) и переходя непосредственно к работам в начале 90х, которые и вылились в первые наброски HyperText и HTML и первую официальную стандартную версию HTML 2.0 в 1995 г.

Примерно тогда же началась активная работа над следующей версией HTML, ярко выразившая себя целой плеядой новых документов и предложений, добавляющих в стандарт все новые и новые возможности:

В конце-концов уже в течение года эта активность дала дорогу HTML 3.2, довольно быстро перешедшему в состояние официальной рекомендации W3C.
Появлялись новые идеи, стандарт продолжал усложняться и в 1997 г. был выработан и утвержден HTML 4.0, спустя 2 года обновившийся до ревизии HTML 4.01.
Это последняя полностью утвержденная версия HTML, которой мы продолжаем активно пользоваться и на базе которой построены практически все страницы современного интернета. Это был 1999 год и это было более 11 лет назад.

Волнующий многих вопрос: а что же дальше? А дальше нужно вернуться на несколько лет назад - в 1996 г., когда появился первый черновик нового языка разметки - знакомый сегодня всем разработчикам язык XML (eXtensible Markup Language), довольно быстро (по сегодняшним меркам) стандартизированный и нашедший огромное применение во множестве сфер благодаря своей универсальности и формализму, крайне удобному при машинной обработки данных.
Не оказался неподвластным влиянию XML и наш любимый HTML, что, как вы уже догадались, вылилось в XML-версию HTML, известную как XHTML. В новом статусе язык обретает новые возможности, получает модульность и… развитие самого языка разметки практически прекращается.
Не менее интересен и браузерный фон происходящих событий - наступает царство IE5.5 и далее IE6, рынок практически остается без серьезной конкуренции, традиционно являющейся ключевым элементом устойчивого развития.
Фокус W3C тем временем смещается в новые области, особенно завязанные на развитие и использование XML - от языков разметки специализированных данных до языков обработки XML.

С возвратом конкуренции в середине 2000х и накоплением довольно большого опыта в работе с XML в W3C появляется новый проект - XHTML 2.0, на практике явивший собой несовместимую со старыми версию языка для разметки веб-страниц - хотя и со множеством новых идей, но преимущественно в силу обозначенного недостатка, не принятый активно в сообществе.
В конечном счете в 2009 работа над XHTML 2.0 была заморожена, а в конце 2010 перестала работать и соответствующая рабочая группа.
Параллельно со всем этим процессом шла активная работа по разработке новой версии HTML, совместимой с HTML 4.01. Начиная с новой версии веб-форм WebForms 2.0, разрабатываемой Яном Хиксоном (Ian Hickson) и внесенной в 2005 г. на рассмотрение в W3C, годом позже формально принятой в качестве черновика, - и переходя к новым возможностям для создания веб-приложений Web Applications 1.0. Вместе оба документа вылились в черновик стандарта HTML5, в начале 2008 г. внесенный на рассмотрение в W3C.
(Надо отметить, что работа над стандартом изначально велась в рамках рабочей группы WHATWG и впоследствии проходила и сегодня проходит в параллельном режиме в W3C и WHATWG. Группы имеют несколько разные подходы к работе, но обе версии стандарта синхронизируются между собой и у них также общий редактор - Ян Хиксон.)

На сегодня HTML5 находится в стадии Last Call Working Draft и в целом уже устоялся и находит активную поддержку как среди производителей браузеров, так и в сообществе разработчиков.
Спецификация HTML5 значительна по объему - она в три раза больше описания HTML 4.01. Но пусть вас не смущает размер: значительная часть спецификации адресована разработчикам браузеров и нацелена на обеспечение совместимости реализаций HTML5, выполненных различными производителями.

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

Ну хорошо, сегодня у нас есть HTML5, что с того? Зачем он взялся и зачем он нужен?
Что происходило, пока HTML спал?
Если кратко, то весь фоновый (хотя какой он фоновый? он как раз самый что ни на есть активный!) мной уже описан в одном из предыдущих постов с вот этой картинкой:

Фактически, пока спал HTML и спали или подремывали сопутствующие технологии (главным образом, CSS и javascript), интернет продолжал активно развиваться, требовал новых возможностей и находил способы их воплощения.

Подумайте, в рамках стандартного четвертого HTML и тогда еще не окончательно принятого CSS 2.1 и предыдущего стандарта javascript - ECMAScript 3, вооруженные мощностью плагинов (прежде всего, Flash и позднее Silverlight), веб-разработчики совершили целую революцию в интернете:

• Насыщенные интернет-приложения (RIA) и вообще веб-приложения, работающие целиком в браузере
• Асинхронное взаимодействие (AJAX - хотя технология XMLHTTPRequest, лежащая в его основе появилась еще в IE 5.5, но только с 2004 этот подход начал активное шествие по вебу)
• Web 2.0, социальные сети
• Онлайновое видео и аудио в браузере, живой стриминг
• Общение через веб-камеру и микрофон прямо в браузере
• Расцвет мобильного веба и специфических возможностей вроде геолокации
• Драматическое ускорение javascript (за последние несколько лет это увеличение на порядок)

И многое чего еще - и не забываем, что компьютерная техника также сильно обновилась, включая появление возможности аппаратного ускорения за счет ресурсов видео-карты и приход многоядерных процессов даже в небольших нетбуках.
Веб изменился. А HTML все спал и спал:) Тут самое время сказать: дождались!

Давайте уже к сути?
Почему HTML5 - это мега-мега-круто?
(Это тонкий момент, на котором я не буду останавливаться подробно в этой статье, но будьте уверены - расширения браузеров в виде плагинов еще рано списывать со счетов и во многих сценариях их возможности на несколько лет впереди того, что сегодня может предложить семейство HTML5.)
HTML5, на мой взгляд, дает три основных преимущества на концептуальном уровне, которые важно понимать прежде, чем мы перейдем к деталям:
1. Нативная поддержка. Браузеры, поддерживающие HTML5 (а на сегодня это современные версии всех популярных браузеров), делают это нативно, из коробки, то есть без необходимости устанавливать дополнительные плагины. Функционал из коробки - это всегда хорошо, если он работает не хуже того, что в принципе можно доставить сверху. За надежность и интеграцию встроеного функционала отвечает производитель браузера, он же следит за обеспечением безопасности и приватности. Для встроенного функционала проще обеспечить доступ к системным ресурсам - будь то данные или вычислительные мощности.
2. Полноправные элементы. В отличие от плагинов, работающих как черный ящик, вставленный на страницу и в лучшем случае взаимодействующий с ней через специальные интерфейсы на javascript, встроенный в браузер функционал полноправно интегрируется во всю экосистему технологий и поддерживаемых стандартов. Например, это означает, что видео-элементы HTML5 можно стилизовать через CSS, к ним можно напрямую обращаться через DOM и javascript. Это единая хорошо связанная экосистема.
3. Открытые технологии. Открытость - штука двоякая и есть палка о двух концах. Открытые стандарты, доступные любому для изучения, использования и реализации, - с одной стороны, и необходимость в стандартизации и стремлении к совместимости разных реализаций - с другой. И вместе с этим относительно легкий доступ к коду (благо в каждом уважающем себя браузере сегодня есть встроенные средства разработки, ну или популярный плагин:)). Открытость, да! Да, с побочными эффектами.

Так что там нового?
Как я уже писал выше, спецификация HTML5 несет в себе множество изменений разного уровня и разной важности. Принципиально, ключевые изменения можно разделить на 5 блоков:

• Семантика. В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц. Это включает как блочные теги вроде header, footer, article, так и теги для разметки текста, например, mark, ruby, details. Ряд существующих тегов HTML4 признан устаревшим, отдельные теги поменяли свое значение, определенные изменения претерпели атрибуты.
• Мультимедиа. HTML5 добавляет нативную поддержку мультимедийного контента (аудио и видео) прямо в HMTL-разметке - с соответствующим API для управления воспроизведением (и некоторыми заморочками с кодеками).
• Графика. Работать с графикой на стороне клиента стало заметно проще. В HTML5 добавлен элемент canvas и специальный API на javascript для работы с ним. Canvas представляет собой динамическую «поверхность», поверх которой можно программного рисовать. Также в HTML5 официально включен тег svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом (SVG, Scalable Vector Graphics).
• Веб-формы. Новые элементы веб-формы: как типы, так и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами без использования дополнительных библиотек - от подсказок в поле ввода (placeholder) и проверки вводимых значений до специальных элементов для ввода дат и цвета.
• javascript APIs. Как обозначенные выше API для работы с графикой и мульмедиа, так новые возможности по перемещению объектов (Drag & Drop) и работе с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.

HTML5 - это спецификация. HTML5 - это и зонтичный термин, объядиняющий в себе целое семейство спецификаций, или даже, как правильнее будет сказать, новое поколение веб-стандартов.
Вы это наверняка слышали и, наверняка, еще много раз услышите - “HTML5” - это и про верстку, и про новые стили CSS, и про множество новых API, и даже про новую версию javascript - ECMAScript5.

И в этом контексте, абсолютно все равно, будете ли вы называть левую и правую части соответственно HTML5 и все остальное, или смотреть на них как стандарт HTML5 и большой маркетинговый “HTML5”, или вполне справедливо полагать первое просто HTML5, а второе каким-нибудь “HTML5 Extended” или “HTML5+” или “HTML5*” или как вам больше нравится.