Содержание

Зачем нам нужен HTML5: пять простых ответов

Все вы наверняка хоть что-то слышали о HTML5 — новой версии языка разметки страниц в интернете. Она до сих пор считается находящейся в разработке, хотя со времени официального утверждения действующей версии HTML4 прошло более пятнадцати лет — фактически всё время активного развития Всемирной сети. В чём же заключаются преимущества 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 пока ещё не имеет статуса окончательного стандарта, его поддерживает подавляющее большинство современных браузеров и мобильных устройств. Потому не удивительно, что для веб-разработчиков уже существует обширная общедоступная документация — большая часть которой, естественно, опубликована на английском языке.

Прежде всего речь об официальной последней рабочей версии консорциума W3C, в рамках которого ведётся непосредственная разработка HTML5.

На сайте разработчиков Mozilla приводится справочник тэгов, причём элементы, которые были добавлены в HTML5, выделены особо.

Подробные описания подхода к интеграции видео в HTML5 можно найти здесь и здесь (тоже на английском языке).

На русском языке краткий справочник HTML5 с примерами применения новых элементов имеется на сайте Puzzleweb.ru.

Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например, «HTML5 для профессионалов», «Погружение в HTML5» или «Самоучитель HTML5».

Что нужно знать об HTML5

Почти 85% сайтов используют технологию HTML. Последняя версия — HTML5. На ней работает около 90% HTML-сайтов.

Рассказываем все, что нужно знать об HTML5. 

HTML5: что это и для чего нужно

HTML — язык разметки, который используют для создания веб-страниц. Один из его основных элементов — теги. Между начальным и конечным тегом находится текст, который показывает свое значение, функции, вид или размер. Например, <large> и </large> отображается с большим размером, чем основной текст.

Теги формируют текстовую структуру с помощью элементов, обозначенных символами «<» и «>».

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

разработчики также могут интегрировать аудио и видео.

HTML и HTML5: в чем разница

Одно из главных различий — размещение мультимедиа (аудио и видео на страницах). Раньше это было возможно только с помощью большого HTML-кода и дополнительных программ. В HTML5 для этого нужен только один тег. 

Также в HTML5 можно использовать Canvas, SVG и другую виртуальную векторную графику. Раньше для этого требовались дополнения — VML, Silverlight и Flash.

В старом HTML только кэши браузера могли использовать базы данных SQL. Последняя версия HTML позволяет всем страницам временно хранить данные в кэше приложения через онлайн-базу данных. Благодаря этому Javascript может работать в фоновом режиме браузера.

В новой структуре HTML5 также отсутствует стандартный обобщенный язык разметки (SGML). Это обеспечивает улучшенную совместимость. HTML5 избавился от устаревших элементов — noframes, acronym, font, big, strike, center и frame. Он вводит новые типы элементов — электронная почта, дата и время, диапазон, номер, URL-адрес, поиск. А также сводку основных тегов, аудио, метку, навигацию, источник, видео, дорожку, дату, время.

Преимущества HTML5 для разработчиков

  • Лучше поддерживаются функции веб-приложений

Раньше для использования веб-приложений нужны были расширения браузера и серверные технологии.

HTML5 объединяет все важные элементы (например, Flash и Javascript).

  • Стандартизированная обработка ошибок

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

  • Расширенная семантика элементов

В HTML5 появились заголовки, упорядоченные и неупорядоченные списки, абзацы, изображения, элементы формы и ссылки. Еще в этой версии ввели четыре секционных элемента: <article>, <aside>, <nav> и <section>. 

  • Персонализированные атрибуты данных

Разработчики и раньше могли добавлять собственные атрибуты, но часто они вызывали недействительные и неверные документы или останавливали работу страницы. Атрибут «data- *» в HTML5 решает эти проблемы. Его функция — хранить дополнительную информацию об элементах. Например, нужно определить тип блока DOM (section, footer) и присвоить ему идентификатор, чтобы позже добавить CSS-стили. Для этого в HTML 5 добавили атрибуты данных. 

  • Версия для смартфонов

Код HTML5 стал лучше поддерживаться смартфонами и планшетами.  

  • Веб-хранилище 

HTML5 использует веб-хранилище или локальное хранилище для замены файлов cookie, которые могут содержать лишь небольшой объем данных. 

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

С другой стороны, веб-хранилище позволяет держать данные на компьютере клиента постоянно (если пользователь не стирает их), оно также имеет больший объем данных (5 МБ вместо 4КБ).

Ключевые плюсы HTML5 для пользователей

  • Уменьшает количество сбоев мобильного браузера.
  • Делает мобильную версию сайта более удобной для пользователя.
  • Поддерживает исходные аудио- и видеоэлементы без дополнительных плагинов.
  • Некоторые данные можно держать на девайсе пользователя. Это позволяет приложениям работать офлайн.

Что такое HTML5 — все, что вам нужно знать от Ericom

HTML5 — это новейший стандарт языка разметки гипертекста, код, описывающий структуру и представление веб-страниц.
Состоит из трех кодов: HTML, сохраняющий структуру; CSS, влияющий на представление; и JavaScript, который создает интерактивные эффекты в веб-браузерах.

Упрощенный: HTML — это набор правил, которые сообщают веб-браузерам, как интерпретировать код для отображения веб-страниц. HTML5, 5-я версия этого набора, улучшает и обновляет возможности веб-сайтов и помогает разработчикам делать веб-контент, такой как веб-сайты и веб-приложения, более интерактивным и динамичным.


Новые API-интерфейсы HTML5 (интерфейсы прикладного программирования)

Геолокация HTML
Этот API используется для определения местоположения пользователя.
Учитывая, что это может поставить под угрозу конфиденциальность, конкретное местоположение будет доступно только в том случае, если пользователь одобрит его. Геолокация полезна, поскольку она предоставляет удобную информацию о конкретном местоположении или практическую информацию о маршруте. Сегодня многие приложения основаны на геолокации.
Перетаскивание HTML
Этот API позволяет вам «поймать» элемент и перетащить его в другое место. HTML Drag and Drop позволяет приложениям перетаскивать элементы в разные браузеры. В отличие от более ранних версий HTML, в HTML5 можно перетаскивать любой элемент!
Локальное хранилище HTML
Благодаря локальному хранилищу приложения могут хранить большие объемы данных локально в браузере пользователя. Этот механизм аналогичен сеансовым файлам cookie, но более безопасен и оказывает меньшее влияние на работу веб-сайта. Кроме того, данные в локальном хранилище не имеют срока действия и сохраняются даже после закрытия браузера, в отличие от отдельных сеансов просмотра.
Кэш приложения HTML
Кэш веб-приложений поддерживает автономный просмотр. Это позволяет использовать веб-приложения, даже если у пользователя нет подключения к Интернету. Дополнительные преимущества включают быструю загрузку веб-ресурсов и снижение нагрузки на сервер, поскольку браузерам не нужно загружать все данные, а только измененные элементы.
Веб-работники HTML
Web Worker — это JavaScript, который работает независимо в фоновом режиме на HTML-странице. Этот механизм предотвращает замедление работы веб-страницы или ее зависание до тех пор, пока сценарий не будет завершен.
HTML SSE (события, отправленные сервером)
Обновления сервера могут автоматически передаваться с сервера на клиент, при этом веб-странице не нужно запрашивать доступные обновления (как это было в прошлом). Новости в режиме реального времени и живой чат — примеры возможных применений SSE.

Эти достижения в технологии HTML привели к появлению нового поколения кроссплатформенных веб-приложений, полностью написанных на чистом HTML5. Поскольку эти приложения используют только код HTML5, они могут работать в браузере на любом устройстве без дополнительного программного обеспечения или подключаемых модулей, таких как Flash, Java, ActiveX или Silverlight.

С Ericom вы можете получить доступ даже к стандартному приложению Windows, не устанавливая ничего на клиентское устройство, используя доступ на основе браузера HTML5. Он прост в использовании и имеет простую настройку!

Мы надеемся, что вы нашли эту информацию полезной. Если вы хотите узнать больше об HTML, посетите w3schools.com.




Руководство для начинающих по HTML5

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

В этом посте мы расскажем все, что вам нужно знать о HTML5, в том числе:

  • что это такое
  • в чем разница между HTML и HTML5
  • что нового в HTML5
  • как использовать HTML5
  • когда вышел HTML5
  • какие браузеры поддерживают HTML5

Что такое HTML5?

HTML5 — новейшая версия HTML. Термин относится к двум вещам. Одним из них является сам обновленный язык HTML с новыми элементами и атрибутами. Во-вторых, это более широкий набор технологий, которые работают с этой новой версией HTML, например новый формат видео, и позволяют создавать более сложные и мощные веб-сайты и приложения.

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

HTML против HTML5

HTML — это основной язык разметки World Wide Web. Первоначально предназначенный для семантического описания научных документов, с тех пор он эволюционировал, чтобы описывать гораздо больше.

Большинство страниц в Интернете сегодня были созданы с использованием HTML4. Несмотря на то, что со времени написания первой версии HTML в 1993 году он значительно улучшился, HTML4 по-прежнему имел свои ограничения. Самым большим было, если веб-разработчики или дизайнеры хотели добавить на свой сайт контент или функции, которые не поддерживались в HTML. В этом случае им пришлось бы использовать нестандартные проприетарные технологии, такие как Adobe Flash, которые требовали от пользователей установки плагинов для браузера. Даже в этом случае некоторые пользователи не смогут получить доступ к этому контенту или функции. Например, пользователи iPhone и iPad не смогут этого сделать, поскольку эти устройства не поддерживают Flash.

Сигнал, HTML5. HTML5 был разработан, чтобы исключить необходимость в этих нестандартных проприетарных технологиях. С помощью этой новой версии HTML вы можете создавать веб-приложения, которые работают в автономном режиме, поддерживают видео и анимацию высокой четкости и знают, где вы находитесь.

Чтобы понять, как HTML5 может все это делать, давайте посмотрим, что нового в этой последней версии HTML.

Что нового в HTML5?

HTML5 был разработан с основными целями, в том числе:

  • Упрощение чтения кода для пользователей и программ чтения с экрана
  • Уменьшение перекрытия между HTML, CSS и JavaScript
  • Повышение гибкости и согласованности дизайна в браузерах
  • Поддержка мультимедиа без использования Flash или других подключаемых модулей

Каждая из этих целей повлияла на изменения в этой новой версии HTML. Давайте сосредоточимся на семи из этих изменений ниже.

Новые семантические элементы

HTML5 представил несколько новых семантически значимых тегов. К ним относятся

,
,