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

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

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

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

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

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

Пять вещей, которые надо знать об HTML5

Оригинал: http://diveintohtml5.info/introduction.html

Перевод: Влад Мержевич

1. Это не одна большая вещь

Вы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег <video>, он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега <video>.

2. Вам не надо откидывать имеющееся

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

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type=»email», поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

3. Легко начать

«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

<!DOCTYPE html>

Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде <article>, <section>, <header> и <footer>.

4. Это уже работает

Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом <canvas>, видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.

Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.

5. Он уже здесь

Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:

Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.

HTML5 уже здесь. Давайте погрузимся в него.

Что такое HTML5?

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

Что такое HTML5?

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Что дает HTML5?

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

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

Цели HTML5

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

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

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

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

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

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

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

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

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

<header> и <footer>

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

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

<article> для статей

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Надо сказать, что обеспечение доступности не самая тривиальная задача, и в 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:

<!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]>
<script src=»//html5shiv.googlecode.com/svn/trunk/html5.js»></script>
<![endif]—>
</head>
<body>
<header>
<h2><a href=»/»>Page Title</a></h2>
<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>
<h2>Article Header</h2>
<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>
<h3>Article Subhead</h3>
<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>
</article>
<aside>
<h3>Sidebar Content</h3>
</aside>
<footer>
<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
</footer>
</div>
<script src=»scripts/js/scripts.js»></script>
</body>
</html>

Далее рассмотрим пример использования видео:

Слева на изображении показан код, а справа результат работы этого кода — видеоплеер

Очень много новых возможностей по работе с формами появилось в html5. Появились новые типы для тегов input. Новые типы призваны упростить ввод данных в поля формы с мобильных устройств. Например, если мы сделает input с типом email:

то на десктопе мы разницы с типам text не увидим, но когда будем вводить данные в поле email со смартфона, откроется специальная клавиатура с символом «@».

Вот еще пример нового типа input:

И напоследок еще один пример — это идущие часы. Созданы тоже только на html5.

Заключение

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

Надеюсь статья вам понравилась и у вас по итогам ее прочтения сложилось понимание того, что же такое html5.

P.S. Напишите в комментариях, используете ли вы html5 в своих проектах. Если используете, то что именно вы используете. Если нет, то хотели бы вы начать использовать html5?

Похожие статьи:

Комментарии Вконтакте:

HTML5 простыми словами

Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.

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

Поможет нам в этом HTML5 DOCTOR, сообщество активных последователей HTML5, проповедующих его использование, и в частности, Брюс Лоусон:

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

Вот перечень наиболее часто задаваемых нам вопросов, на которые мы дали ответы неспециализированным языком. Журналисты, пользуйтесь на здоровье! цитирование приветствуется, но не является обязательным )))»

Что такое HTML5?

Зто зависит от того, о чем идет речь. Выражение «HTML5» используют в трех разных значениях:

Спецификация HTML5

Наиболее точным определением понятия «HTML5» будет следующее: это спецификация, разработанная совместно двумя группами, W3C и WHATWG. Существуют разные версии спецификации HTML5.

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

Ключевые понятия:
• Его разработали для обеспечения взаимодействия страниц в разных браузерах. Сегодня мы используем различные браузеры (к примеру, на работе у нас может стоят IE, в телефоне — Safari или Opera, а дома -Firefox) и было бы неразумно и досадно, если бы сайт не работал бы в чем-то из них.
• Все производители браузеров — – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) — все они сотрудничают между собой, равно как и с еще кучей органицазий и частных лиц: с Netflix, Adobe, IBM, HP, BBC и многим другими.
• Он разработан, чтобы расширить возможности современного веба, не нарушая при этом работы уже существующих веб-страниц.
• Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.

HTML5 и его друзья

в дополнение к самому ядру HTML5, WHATWG разработали другие спецификации, такие как Web Workers, Web Sockets, Web Database. Все они дополняют его новыми свойствами и функциями, полезными для приложений, игр и тому подобного.

Многое из их содержимого изначально было частью самого ядра, но по некоторым производственным и организационным причинам было выведено из него. Вся группа вместе называется Web Applications 1.0.

3. Новые «супер-веб-технологии»

Часто большинство людей, налеких от веб-разработки (а часто и не очень сведущие разработчики), говоря «HTML5», подразумевают целый ряд технологий: ядро HTML5, его дополнения — и еще уйму вообще никак не связанных с ними технологий, таких как геолокация (способность вашего браузера «распознавать» ваше местонахождение), ориенацию устройства, события касания, анимацию CSS3 (которая может заменять несложную Flash-анимацию), SVG (способ отображения графики четко и гладко на экране любого размера), и недавно вошедший сюда WebGL, позволяющий использовать популярные библиотеки 3D-графики в веб, внося трехмерность в веб-гарфику и браузерные игры.

Многое из этого разработано W3C, а WebGL, к примеру, создан Khronos Group.

Также важно не забывать, что так называемые «демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

Зачем придумали HTML5?

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

Как много браузеров поддерживают HTML5?

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

А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.

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

Кто является движущей силой HTML5?

Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

Кто пользуется HTML5?

Множество людей и компаний: Boston Globe Newspaper; Nationwide Building Society, Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

Когда будет завершена работа над HTML5?

Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

Правда ли, что HTML5 несовместим с Internet Explorer?

Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

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

Совершенно нет. В основе HTML5 лежат определенные принципы разработки, один из которых гласит о повсеместном его применении:

«Элементы должны разрабатываться для повсеместного использования… Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.

Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

Вытеснит ли HTML5 Adobe Flash?

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

Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

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

Перевод — Дежурка. Автор оригинальной статьи — Bruce Lawson, один из соавторов книги Introducing HTML5.



Комментарии

[an error occurred while processing the directive]

Похожие статьи

Случайные статьи

HTML5 — новая версия стандарта

HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).

HTML5 был создан, как единый язык разметки, который расширяет, улучшает и рационализирует разметку документов, а также добавляет единое API для сложных веб-приложений. В HTML5 реализовано множество новых синтаксических особенностей: например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Все эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами без необходимости использования сторонних API. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы сделать веб-страницы более семантичными и понятными для автоматизированной обработки (роботами поисковых систем, программами для чтения с экрана и другими). Новые атрибуты были введены с той же целью. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому всеми совместимыми (современными) браузерами синтаксические ошибки должны рассматриваться одинаково, что обеспечивает более высокую кроссбраузерность для сайтов, которые разработаны на HTML5.

Новое в HTML5:

• <nav> (блок навигации по сайту)
• <header> (контейнер для заголовков)
• <footer> (обычно относится к нижней части страницы)
• <audio> и <video> (медиаконтент)
• <article> (контейнер для основного содержания)
• <section> (разделы страницы)
• <aside> (контейнер для дополнительного содержания, сносок)
• <datalist> (выпадающий список)
• <details> (спойлер)
• <figure> (группировка элементов)
• <progress> (шкала прогресса выполнения)
• <time> (дата/время)
• <canvas> (холст для непосредственного метода рисования в 2D)
• API для контроля над проигрыванием медиафайлов
• хранение баз данных оффлайн на стороне клиента
• Drag-and-Drop API (перетаскивание)
• History API (управление историей браузера)
• геолокация

В настоящий момент все ведущие браузеры поддерживают новый стандарт: Google Chrome, Mozilla Firefox, Opera и даже Internet Explorer (начиная с версии 9) имеют поддержку html5.

HTML5 — это… Что такое HTML5?

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году^[1]) и находится в стадии разработки по состоянию на ноябрь 2012 года. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.).

Следуя своим непосредственным предшественникам HTML 4.01 и XHTML 1.1, HTML5 отвечает наблюдениям о том, что HTML и XHTML в общем использовании во всемирной паутине HTML5 является смесью особенностей, представленных различными спецификациями, включая спецификации программного обеспечения, такими как веб-браузеры, признанными в общей практике, а также смесью множества синтаксических ошибок, возникающих в существующих веб-документах. HTML5 — также попытка определить единый язык разметки, который мог бы быть написан как в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.^[2]

В HTML5 появляется множество синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG. Эти новшества разработаны для упрощения внедрения и управления графическими и мультимедийными объектами в сети без необходимости обращения к собственным плагинам и API. Другие новые элементы, такие как <section>, <article>, <header> и <nav> разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удален. Некоторые элементы, например, <a> <menu> и <cite> были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5.^[2] HTML5 также определяет некоторые детали для обработки недопустимых документов, поэтому синтаксические ошибки будут рассматриваться одинаково всеми приспособленными браузерами и другими пользовательскими агентами.^[3]

История

Рабочая группа по разработке Гипертекстовых Прикладных Технологий в Веб (WHATWG) начала работу над новым стандартом в 2004 году, когда World Wide Web Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года.^[4] В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истек, и решил не возобновлять его. В настоящий момент W3C и WHATWG работают вместе над разработкой HTML5.^[5]

Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 года. После этого глава компании Apple Inc. Стив Джобс^[6][7][8][9] написал публичное письмо, заголовок которого гласил: «мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash.^[10] По этому поводу вспыхивали дебаты в кругу веб-разработчиков, причём некоторые намекали, что, хотя HTML5 и обеспечивает расширенную функциональность, разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash.^[11]

W3C процесс стандартизации

WHATWG начала работу над спецификацией в июне 2004 года под названием Web Applications 1.0.^[12] С января 2011 года спецификация в Draft Standard (Стандартизация проекта) утверждается в WHATWG, Working Draft (рабочий проект) утверждается в W3C. Ян Хиксон из компании Google является редактором HTML5.^[13]

Спецификация HTML5 была принята в качестве точки начала работы над новым HTML рабочей группой W3C в 2007 году. Эта рабочая группа опубликовала спецификацию как первый публичный рабочий проект 22 января 2008 года.^[14] Спецификация — это текущая работа, ожидают, что она останется на несколько лет, хотя части HTML5 собираются закончить и реализовать в браузерах до того момента, когда вся спецификация достигнет финального статуса «Рекомендовано».^[15]

Согласно расписанию W3C, предполагалось, что HTML5 получит рекомендации W3C в конце 2010 года. Однако оценка первого публичного рабочего проекта была перенесена на 8 месяцев, ожидалось, что одобрения и Last Call и Candidate Recommendation будут получены в 2008 году^[16], но в январе 2011 года он все ещё в стадии рабочего проекта в W3C.^[17] HTML5 из WHATWG получило одобрение от Last Call с Октября 2009 года.^[18][19]

Ян Хиксон, редактор спецификации HTML5, ожидает достижения Candidate Recommendation в течение 2012 года.^[20] Для того чтобы спецификация получила статус «W3C рекомендована», необходимы две законченные на 100 % и полностью взаимодействующие реализации.^[20] В интервью с TechRepublic Хиксон предполагает, что это случится в 2012 году или позже.^[21] Однако многие части спецификации стабильны и могут быть реализованы в продуктах:

«Некоторые части уже относительно стабильны, и сегодня внедрения, которые уже вполне близки к завершению, могут быть использованы».

—WHAT Working Group, Когда HTML5 будет закончен?^[20]

В декабре 2009 года WHATWG переключилась на универсальную модель разработки для спецификации HTML5.^[22] W3C всё ещё будет продолжать публиковать кадры со спецификацией HTML5.^[23]

14 февраля 2011 года W3C увеличил срок работы для рабочей группы HTML с промежуточными отчетами для HTML5. Рабочая группа предполагала продвинуть HTML5 в Last Call, приглашая к полному соединению W3C, чтобы подтвердить техническое отсутствие дефектов в спецификации в мае 2011 года. Затем группа переключается на испытание своей реализации. W3C также разрабатывает всестороннюю проверку, чтобы добиться широкой функциональной совместимости для полной спецификации 2014 года — ожидаемой даты для Рекомендации.^[24]

«Даже как инновационное продолжение, продвижение HTML5 в «Рекомендуемое» обеспечивает всю веб-экосистему стабильным, проверенным и взаимодействующим стандартом. Решение наметить внедрение HTML5 в Last Call в мае 2011 года было важным шагом для урегулирования производственных ожиданий. Сегодня мы сделали следующий шаг, объявив о намерении осуществления цели с получением рекомендации к 2014 году.»

—Джеф Джэйф, Генеральный директор W3C^[24]

Разметка

HTML5 вводит несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных (<div>) и строчных (<span>) элементов, например, <nav> (блок навигации по сайту), <footer> (обычно относится к нижней части страницы или последней строке HTML кода) или <audio> и <video> вместо <object>.^[25][26][27] Некоторые устаревшие элементы, которые можно было использовать в HTML 4.01, были исключены, включая чисто оформительские элементы, такие как <font> и <center>, чьи эффекты выполняются с помощью Каскадных таблиц стилей. Также в поведении веб снова заострено внимание на важности скриптов DOM (например, Javascript).

Синтаксис HTML5 больше не базируется на SGML, несмотря на подобие его разметки. Однако он был разработан обратно совместимым с обычным парсингом более старых версий HTML. В HTML5 применяется новая вводная строка, которая выглядит, как Объявление типа документа в SGML, <!DOCTYPE html>, которая запускает соответствующий стандартам режим рендеринга.^[28] С 5 января 2009 года HTML5 также включает в себя Web Forms 2.0, ранее бывшие отдельной спецификацией WHATWG.

Новые API

В дополнение к определению разметки HTML5 устанавливает скриптовый интерфейс прикладного программирования (API).^[29] Существующий интерфейс DOM расширен и фактически особенности зарегистрированы. Также существуют новые API, например:

Не все выше перечисленные технологии включены в спецификацию W3C HTML5, хотя они есть в спецификации WHATWG HTML.^[33] Немного связанных технологий, которые не являются частью ни одной из спецификаций, следуют далее. W3C публикует спецификации для них отдельно.

XHTML5

XHTML5 — это XML-сериализация языка HTML5. Документы XML должны быть снабжены XML Internet media type, например, application/xhtml+xml или application/xml.^[39] XHTML5 требует строгого и правильно оформленного синтаксиса XML. Выбор между HTML5 и XHTML5 сводится к выбору типа MIME/содержимого: тип медиа, который вы выберете, определит, какой тип документа должен быть использован.^[40] В HTML5 и XHTML5 doctype html необязателен и может быть просто пропущен.^[41] HTML, который был написан, чтобы соответствовать техническим требованиям и HTML и XHTML — и который производит то же DOM дерево, разбирающее HTML или XML — назван многоязычным.^[42]

Обработка ошибок

Спецификация HTML5 предъявляет требования как к юзер-агентам (браузерам), так и к документам. Документы могут не всегда содержать корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM). Чёткое определение требований к юзер-агентам делается с целью достижения совместимости между браузерами разных производителей. Так же, как и требования к синтаксису разметки документов с целью корректного отображения их в различных браузерах.^[43] В старых версиях браузеров новые теги HTML5 просто игнорируются.

Отличия от HTML4.01 и XHTML1.x

Ниже представлен список отличий и несколько необычных примеров:

Полный список изменений в HTML5 представляется в обновляющемся рабочем проекте W3C «Отличия HTML5 от HTML4» (последняя версия от 29 марта 2012).^[45]

Логотип HTML5

Логотип HTML5

18 января 2011 года W3C ввел логотип, чтобы представить использование или добавить интерес к HTML5. В отличие от других знаков, выпущенных ранее компанией W3C, он не подразумевает соответствие определенному стандарту. С 1 апреля 2011 года этот логотип считается официальным.^[46]

Во время первого показа его публике, W3C объявил логотип HTML5 как символ «универсальной визуальной идентификации данных для широкого набора открытых Веб-технологий, включая HTML, CSS, SVG, WOFF и другие».^[47] Некоторые защитники веб-стандартов, включая и The Web Standards Project, раскритиковали это определение HTML5 как обобщенное и размытое понятие.^[47] Тремя днями позже W3C ответил на отзыв сообщества и изменил определение логотипа, убрав перечисление связанных технологий.^[48] Затем W3C заявил, что логотип «представляет HTML5, краеугольный камень для современных Веб приложений».^[46]

Пример веб-страницы HTML5

<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>(Это title) Пример страницы на HTML5</title>
  </head>
  <body>
    <header>
      <hgroup>
         <h2>Заголовок "h2" из hgroup</h2>
         <h3>Заголовок "h3" из hgroup</h3>
      </hgroup>
    </header>
    <nav>
      <a href=link1.html>Первая ссылка из блока "nav"</a>
      <a href=link2.html>Вторая ссылка из блока "nav"</a>
    </nav>
    <section>
      <article>
        <h2>Заголовок статьи из блока "article"</h2>
        <p>Текст абзаца статьи из блока "article"</p>
          <details>
            <summary>Блок "details", текст тега "summary"</summary>
            <p>Абзац из блога "details"</p>
          </details>
      </article>
    </section>
    <footer>
      <time>Содержимое тега "time" блока "footer"</time>
      <p>Содержимое абзаца из блока "footer"</p>
    </footer>
  </body>
</html>

См. также

Примечания

1. ↑ HTML5 Differences from HTML 4. Working Draft. World Wide Web Consortium (5 Апреля 2011 года). Архивировано из первоисточника 7 июня 2012. Проверено 30 Апреля 2011 года.
2. ↑ ^{1 2} HTML5 Differences from HTML4. World Wide Web Consortium (19 Октября 2010 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
3. ↑ 1.9.2 Syntax Errors. HTML5 (16 Ноября 2010 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
4. ↑ HTML 4 Errata. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
5. ↑ Frequently Asked Questions (FAQ) About the Future of XHTML. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
6. ↑ FOX News: No Flash on the iPhone? Apple’s Steve Jobs Finally Explains Why
7. ↑ TIME: Steve Jobs: ‘Flash is No Longer Necessary’ and Other Musings
8. ↑ CBS News: Steve Jobs: Why Apple Banned Flash
9. ↑ FastCompany: Steve Jobs: Adobe’s Flash Is Old PC History, Open Web Is the Future
10. ↑ «Thoughts on Flash», by Steve Jobs, CEO of Apple, Inc.
11. ↑ Is HTML5 Replacing Flash?
12. ↑ [whatwg] WHAT open mailing list announcement. lists.whatwg.org Mailing Lists. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
13. ↑ HTML5: A vocabulary and associated APIs for HTML and XHTML (Editor’s Draft).. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 12 Апреля 2010 года.
14. ↑ HTML5: A vocabulary and associated APIs for HTML and XHTML.. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 28 января 2009 года.
15. ↑ When Will HTML5 Be Finished?. WHATWG. WHATWG Wiki. Архивировано из первоисточника 7 июня 2012. Проверено 10 Сентября 2009 года.
16. ↑ HTML Working Group. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
17. ↑ HTML5. World Wide Web Consortium (25 Августа 2009 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
18. ↑ [whatwg] HTML5 at Last Call (at the WHATWG). Lists.whatwg.org. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
19. ↑ Dive Into HTML5.(недоступная ссылка — история)
20. ↑ ^{1 2 3} When Will HTML5 Be Finished?. FAQ. WHAT Working Group. Архивировано из первоисточника 7 июня 2012. Проверено 29 Ноября 2009 года.
21. ↑ HTML5 Editor Ian Hickson Discusses Features, Pain Points, Adoption Rate, and More. Архивировано из первоисточника 7 июня 2012. Проверено 21 Июня 2010 года.
22. ↑ Ян Хиксон WHATWG: Switching to an Unversioned Development Model. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
23. ↑ Ян Хиксон HTML Is the New HTML5. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
24. ↑ ^{1 2} W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5 Standard. World Wide Web Consortium (14 Февраля 2011 года). Архивировано из первоисточника 7 июня 2012. Проверено 18 Февраля 2011 года.
25. ↑ Introduction to HTML5 video
26. ↑ IBM Developer Works New elements in HTML5: Structure and semantics
27. ↑ ICAMD.org Finalcut Silverlight Films that Videographers share Quicktime in a Flash : Video on the Web using HTML5 and other Codecs
28. ↑ InstantShift [1] HTML5: Worth the Hype?
29. ↑ «HTML5 Differences from HTML 4 — APIs». World Wide Web Consortium.
30. ↑ «HTML Canvas 2D Context». World Wide Web Consortium.
31. ↑ Доступное видео в HTML5 с субтитрами на JavaScript (13 Января 2010 года). Архивировано из первоисточника 7 июня 2012.
32. ↑ «Web Storage Specification». World Wide Web Consortium.
33. ↑ HTML Standard
34. ↑ «Web SQL Database». World Wide Web Consortium.
35. ↑ «Indexed Database». World Wide Web Consortium.
36. ↑ «File API». World Wide Web Consortium.
37. ↑ «Filesystem API». World Wide Web Consortium.
38. ↑ «File API: Writer». World Wide Web Consortium.
39. ↑ Anne, van Kesteren HTML5 differences from HTML 4 – W3C Working Draft 19 October 2010. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 2 Ноября 2010 года.
40. ↑ Сергей Анатольевич Мавроди «Sergey’s HTML5 & CSS3 Quick Reference». Belisso Corp., 2010. ISBN 978-0-615-43321-9
41. ↑ The XHTML syntax ― HTML5. Web Hypertext Application Technology Working Group. Архивировано из первоисточника 7 июня 2012. Проверено 1 Сентября 2009 года.
42. ↑ Polyglot Markup: HTML-Compatible XHTML Documents, W3C Working Draft 05 April 2011
43. ↑ FAQ – WHATWG Wiki. WHATWG. Архивировано из первоисточника 7 июня 2012. Проверено 2 декабря 2010.
44. ↑ HTML5: The Markup Language Reference: Input Control. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 17 Февраля 2011 года.
45. ↑ HTML5 Differences from HTML4. FAQ. World Wide Web Consortium (29 мая 2012 года). Архивировано из первоисточника 7 июня 2012. Проверено 12 июня 2012 года.
46. ↑ ^{1 2} W3C HTML5 Logo FAQ. World Wide Web Consortium. — «Is this W3C’s «official» logo for HTML5? Yes, as of 1 April 2011.»  Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
47. ↑ ^{1 2} HTML5 Logo: Be Proud, But Don’t Muddy the Waters!. The Web Standards Project. Архивировано из первоисточника 7 июня 2012. Проверено 22 Января 2011 года.
48. ↑ The HTML5 Logo Conversation. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.

Ссылки

Литература

• Питер Лабберс, Брайан Олберс, Фрэнк Салим HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. — М.: «Вильямс», 2011. — С. 272. — ISBN 978-5-8459-1715-7
• Стивен Хольцнер HTML5 за 10 минут, 5-е издание = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. — М.: «Вильямс», 2011. — ISBN 978-5-8459-1745-4

Что такое HTML5? – POPEL Agency

Термин HTML5 в интернете используется в двух основных контекстах: как очередная итерация стандарта гипертекстовой разметки и как собирательный термин совокупности современных технологий веб-разработки. Какой из этих вариантов верный? Правильный ответ — оба.

История возникновения

В 2004 году производителями браузеров Apple, Mozilla Foundation и Opera Software было основано сообщество WHATWG (Web Hypertext Application Technology Working Group), основным направлением деятельности которого стало развитие HTML и создание API для работы веб-приложений. Это сообщество появилось потому, что W3C пренебрежительно относились к реальным потребностям пользователей.. Они отказались от HTML в пользу XML и работали над XHTML 2.0, а сам стандарт HTML не обновлялся с 2001 года.

W3C (англ. World Wide Web Consortium) — Консорциум Всемирной паутины, организация, ответственная за разработку и внедрение технологических стандартов для Всемирной Паутины.

Сразу после создания WHATWG начали разработку нового стандарта HTML и API, необходимых для веб-приложений. В 2009 году W3C решили отказаться от работы над XHTML 2.0 и в данный момент вместе с WHATWG работают над стандартом HTML5.

API (англ. Application Programming Interface) — интерфейс программирования приложений, набор программных инструментов, предоставляемых приложением для использования в сторонних программных продуктах. Например, сервис ВКонтакте предоставляет сторонним сайтам кнопку «Мне нравится» и соответствующий API для более тесной интеграции.

Несмотря на то, что стандарт разрабатывался с 2004 года, пристальное внимание на HTML5 обратили где-то в апреле 2010 года, после того как Стив Джобс опубликовал свое заявление об отказе от технологии Flash в пользу «новых открытых стандартов, вроде HTML5». Это привело к оживленным дискуссиям в среде веб-разработчиков, ведь им приходилось считаться с поддержкой разных частей стандарта HTML5 в разнообразных браузерах, не говоря уже о функциональных отличиях между HTML5 и Flash. А в начале ноября 2011года компания Adobe, разработчик Flash, объявила, что прекращает разработку Flash для мобильных устройств, а вместо этого сконцентрирует свое внимание на разработке инструментов, использующих HTML5.

Так что же такое HTML5?

Спецификация HTML5 от группы WHATWG, помимо собственно языка разметки, содержит ряд дополнительных API для языка JavaScript, например: Web Messaging, Web Sockets, Drag and Drop, Micro Data, Web Workers. Кроме того, в спецификацию были внесены и усовершенствованы уже существующие возможности DOM.

HTML5 и все включенные в него API

DOM (англ. Document Object Model) — Объектная модель документа, программный интерфейс, позволяющий программам взаимодействовать с содержимым и структурой HTML, XHTML и XML документов.

Когда к разработке спецификации подключился W3C, фактически была создана вторая версия той же спецификации, теперь уже на сайте W3C. Часть программных API, присутствующих в спецификации HTML5 от WHATWG, не вошли в спецификацию HTML5 от W3C. Таким образом, на данный момент имеем две версии одного и того же стандарта.

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

Таким образом, в широком значении термина, HTML5 — это сам язык гипертекстовой разметки и все сопутствующие ему технологии, описанные в спецификациях WHATWG либо W3C. Однако, это ни в коем случае не сопутствующие технологии, вроде CSS3, которые часто ошибочно приписывают к HTML5.

Философия и преимущества

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

<meta charset="utf-8">

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

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

Заключение

HTML5 — это технологический стандарт, расширяющий возможности веб-приложений и существенно упрощающий их разработку. И хотя ему еще далеко до полной готовности, благодаря усилиям WHATWG и W3C мы уже сейчас ощущаем на себе прелести интернета будущего .

Что нового в последней версии HTML?

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Подробнее

Вы, вероятно, видели много ссылок на HTML5, а также упоминания о том, что некоторые функции являются «устаревшими» или «новыми» в HTML5. Иногда это может сбивать с толку, когда вы обнаруживаете, что то, как вы думали, что вы «должны» что-то делать, теперь совсем не то, что нужно .

Это также может раздражать — тем более, что большинство этих «устаревших функций» все еще работают в большинстве браузеров.Зачем изучать новый способ делать что-либо, если старый способ работает нормально?

И, конечно, иногда бывает сложно найти нужную информацию. Контент в Интернете не живет вечно… но почти. И чем старше контент, тем больше вероятность, что вы найдете его в поисковой системе. (При прочих равных условиях Google и другие предпочитают более старый контент. Кроме того, у старого контента было больше времени для получения обратных ссылок.) Это означает, что вы часто найдете устаревшие руководства, когда ищете информацию о HTML.

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

Что такое HTML?

(Перейдите к разделу Что такое HTML5, если вы уже знакомы с HTML в целом.)

Вы, вероятно, уже знаете, что HTML или язык разметки гипертекста — это язык, используемый для веб-документов. Это не язык программирования, а язык, который определяет значение, цель и структуру текста в документе.

Например, рассмотрите этот документ:

Почему крысы делают отличных домашних животных?

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

Вы можете легко понять структуру документа, потому что он прост, и вы умный человек, прочитавший много документов в своей жизни. Но ваш веб-браузер должен понимать документ, чтобы представить его вам разумно и осмысленно.Поэтому мы используем HTML-теги (также называемые «элементами») для идентификации различных частей документа.

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

, чтобы определить основной заголовок страницы (заголовок документа), и

, чтобы закрыть его. Используйте тег

для идентификации первого заголовка в содержимом и тег

для идентификации следующего за ним блока содержимого как абзаца.

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

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

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

История и развитие HTML

HTML существует уже давно. Его корни уходят по крайней мере в 1980, с проекта Тима Бернерса-Ли INQUIRE. На самом деле концепция гипертекста уходит корнями еще дальше. Эта концепция впервые появилась в начале 1940-х годов, а название и демонстрация — в 1960-х.

В 1989 году Ли предложил новую гипертекстовую систему, основанную на идеях INQUIRE (и других систем, таких как Apple HyperCard).Это стало первой версией того, что мы сейчас называем HTML.

С тех пор язык постоянно развивается. Спецификация находится в ведении Консорциума Всемирной паутины (Бернерс-Ли по-прежнему является директором по состоянию на 2018 год) и Рабочей группы по технологиям веб-гипертекстовых приложений. (Так что, если вам не нравится HTML5, виноваты именно они.)

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

Почему нужно было изменить HTML? Потому что Интернет изменился.

Что такое HTML5?

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

Большинство индивидуальных изменений является результатом более крупных целей в дизайне языка. Эти цели в первую очередь включают:

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

Освоение HTML5 — это не только изучение того, какие функции CSS заменяют старые функции HTML.Если вы хотите получить интуитивное представление о HTML5, лучше всего понять, как эти цели повлияли на развитие языка.

Поощрение семантической разметки

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

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

В HTML всегда была доступна небольшая часть семантической разметки: теги заголовков, атрибут rel ссылки и метаданные документа. Но этого было недостаточно.

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