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

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

>> Что такое HTML5

Что такое HTML5 и почему это становится модным?

Здравствуйте, дорогие читатели!

В последние годы пользователь Интернета далеко не ограничивается одним настольным компьютером. Почти у каждого есть смартфон или планшет.

И еще один уточняющий момент 2014 года: сегодня социальные сети уже не являются инструментом “для поиска потерянных в жизненном процессе друзей детства”. Сегодня мало кому придет в голову использовать ВКонтакте для поиска соседа по парте в первом классе. Сегодняшние социальные сети - это мощные мультифункциональные медиапорталы. Центры развлечения и бизнеса.

Современный компьютерный мир престал быть привязан к месту или времени. Облачные сервисы превратили весь мир в один глобальный компьютер. Где бы вы ни были, дома, на даче, за границей, на работе или в общественном транспорте, вы имеете возможность получить любые возможности, предоставляемые провайдерами из любой точки планеты Земля.

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

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

Новый язык HTML5 будет мультисистемным, кроссбраузерным. Сайты, созданные на технологии HTML5, будут одинаково хорошо читаться на десктопе, на планшете, на смартфоне. В любых популярных оперативках: Windows, iOS, Mac OS, Android, Windows Mobile, Linux и что там еще есть.

Чтобы на сайте, созданном на HTML5, смотреть видео, вам больше не понадобится устанавливать на свой компьютер Adobe Flash Player. Тем более, многие современные мобильные устройства вообще не работают с форматом Flash. Как же смотреть ролики? Для этого будет HTML5.

Технология Flash давно портит кровь оптимизаторам и владельцам сайтов. Флеш-сайты практически невозможно оптимизировать и продвигать методиками SEO. Чтобы раскручивать Flash проект, приходится прибегать к очень недешевой контекстной и баннерной рекламе. Многие ведущие мировые разработчики давно уже стремятся избавиться от флеш и всех проблем, с которыми связана данная технология. Таким образом, новый HTML5 будет разрабатываться таким образом, чтобы пользователю вообще больше не понадобились никакие дополнительные аппликации для качественного восприятия сайтов.

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

В HTML5 будет сочетаться обычный HTML, CSS, XHTML, DHTML, Ajax. Часть устаревших тегов устраняются, чтобы уменьшить вес страниц и ускорить скорость загрузки. Добавляется некоторое количество новых тегов, которых не было в предыдущих версиях HTML. Более обширно обещает быть представлена столь любимая поисковыми машинами семантическая разметка.

Поскольку интернет становится все более и более мобильным, HTML5 должен обеспечить полную совместимость с сенсорным управлением на планшетах и смартфонах.

На этот раз консорциум C3W решил разом разрубить все гордиевы узлы и решить все накопившиеся за годы существования интернета проблемы и несостыковки. К сожалению, задача разработки несколько затянулась. На начало 2014 года работа все еще продолжается и долгожданного объявления об окончательном запуске готового HTML5-продукта все еще нет.

На этом у меня все.

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

С уваженем, Виталий Шматов!

От автора: привет друзья! В данной статье я хочу немного рассказать вам про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…

Первое - это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.

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

Рассмотрим некоторые ключевые особенности html5:

Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

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

В нем есть своя интеграция с интерфейсами, которые могут понадобиться в современных приложениях. Как пример можно привести геолокацию, которая позволяет браузеру определить местоположение пользователю (его координаты). Ранее это можно было сделать только через GPS.

Что дает HTML5?

Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.

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

Цели HTML5

Кратко цели html5 можно назвать так:

Ликвидация плагинов, таких как Flash, для общих функций, которые необходимы каждому. Построить собственную поддержку для таких вещей, как аудио, видео и т.д.

Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.

Обеспечение согласованности между браузерами и устройствами.

Сделать все это настолько прозрачным, насколько это возможно.

Новые возможности HTML5

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

Новые элементы html5

Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:

и

для любых видов меню

для сайдбаров или связного контента

для статей

практически то же, что и div

и теги позволяют проигрывать видео без плагинов

для рисование на странице использую javascript

для вставки внешнего контента на страницу

Наряду с тем, что появились новые теги часть существующих тегов в HTML5 приобретает новое значение. Так, если раньше выбор между i и em (аналогично b и strong) был чаще в пользу более короткого написания, то сегодня это теги с различной смысловой нагрузкой, даже если по умолчанию они имеют одинаковое представление курсивом или жирным начертанием.

Другая часть нововведений касается непосредственно вопросов доступности: здесь, прежде всего, речь идет об aria- и role-атрибутах, позволяющих разметить предназначение и роли контента. Эта информация впоследствии, к примеру, может использоваться программами для чтения с экрана (screen reader).

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

Еще одним преимуществом html5 является наличие в нем продвинутых функций, включая интеграцию API. Это упрощает написание кроссбраузерного кода на javascript для сложных приложений. Вот некоторые из них:

Audio and video позволяет проигрывать видео в браузере без плагинов.

Geolocation: определяет положение посетителя.

Drag and drop: например, для загрузки файла перетаскиванием его в браузер.

Application cache: обеспечивает поддержку открытия сайтов offline.

Web workers: запускает JavaScript в фоновом режиме

Server sent events: позволяет серверам обновлять веб-страницы в браузере после того, как они уже были загружены, проще и эффективнее, чем AJAX и JavaScript.

Offline data storage: позволяет хранить данные локально в браузере, независимо от cookies

Примеры использования html5

Давайте посмотрим на html5 в действии! HTML5 позволяет создавать новую, более простую и чистую разметку для страниц. Код становится более контентоориентированным и его проще читать и понимать. Вот пример простой веб-страницы на html5:

Page Title

Nav Link 1

Nav Link 2

Nav Link 3

Article Header

Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.

Article Subhead

Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.

Sidebar Content

Copyright Your Name Here 2014. All Rights Reserved.

< ! doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > < / title > < meta name = "author" content = "" / > < meta name = "description" content = "" / > < link rel = "stylesheet" href = "assets/css/style.css" / > < ! -- [ if lt IE 9 ] > < ! [ endif ] -- > < / head > < body > < header > < h1 > < a href = "/" > Page Title < / a > < / h1 > < nav > < ol > < li > < a href = "" > Nav Link 1 < / a > < / li > < li > < a href = "" > Nav Link 2 < / a > < / li > < li > < a href = "" > Nav Link 3 < / a > < / li > < / ol > < / nav > < / header > < article > < h1 > Article Header < / h1 > < p > Etiam pretium odio eu mi convallis vitae varius neque pharetra . Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas . < / p > < h2 > Article Subhead < / h2 > < p > Vestibulum lacus erat , volutpat vel dignissim at , fringilla ut felis . < / p >

В последние несколько лет ведется активная разработка HTML5. Инновационный язык разметки гипертекста должен разом решить все проблемы и вопросы, связанные с проектированием и разработкой веб-сайтов.

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

HTML1 и HTML2

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

HTML3.0

Третья версия уже приобрела некий единообразный формат и позволяла делать сайты приличного качества. Однако были и серьезнейшие проблемы. Например, в HTML3 все форматирование и выравнивание делалось в рамках самого кода станицы.

На странице размещалась и графика и скрипты. Это сильно увеличивало вес веб-страниц и серьезно замедляло загрузку сайта. Постепенно представление о качественном сайте существенно расширилось. Потребовалась гораздо большая интерактивность и медийные возможности. Пользователи интернета стали гораздо более взыскательными к возможностям веб-проекта.

HTML4.1

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

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

XHTML и DHTML

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

Истоки появления HTML5

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

Поэтому от нового кода требовались современные условия.

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

Сайт должен быть одинаково хорошо читаем в десктопах, смартфонах и планшетах любых производителей.

Приспособленность к сенсорному управлению для мобильных компьютеров.

Способность воспроизводить видео без помощи Flash–плейера. Многие планшеты вообще не поддерживают эту технологию.

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

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

Сделать сайты динамичными и интерактивными. Современный пользователь желает общаться с интернет-ресурсом почти как с человеком.

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

Насколько успешно идут работы по созданию самого совершенного и стандартного языка гипертекста? Такие сайты действительно многое могут. Если у вас нет Flash-плейера, сайт сам это понимает и предлагает просматривать видео и слушать музыку с помощью своих возможностей.

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

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

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