HTML5 – будущее уже совсем близко!

http://www.webcreativestudio.com/ru/news/all/HTML5/

(Новости 23 Декабря 2010)

HTML5 постепенно становится ближе - Microsoft открыла тестовую лабораторию

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

Надзор и управление проектом будут осуществлять специалисты Microsoft Interoperability Strategy Group.

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

Интерес корпорации Microsoft понятен - они первыми получат информацию от активных разработчиков о наиболее востребованных новых функциях HTML5.
Сейчас на ресурсе HTML5 Labs уже доступны два предварительных варианта спецификации HTML5. Разработчики также имеют доступ к экспериментальным функциям IndexedDB и WebSockets.
Подробная информация — http://html5labs.interoperabilitybridges.com.

Несмотря на продвижение стандарта HTML5 многими крупными IT-компаниями, время массового внедрения технологии еще не пришло. Об этом, как сообщаетInfoWorld, заявила организация World Wide Web Consortium (W3C), разрабатывающая и внедряющая стандарты для всемирной паутины.

Директор W3C Филипп Ле Эгаре отметил, что HTML5 еще не готов заменить существующие веб-стандарты, поскольку имеет ряд недостатков, основной из которых — проблема совместимости. Так, до сих пор большой популярностью пользуется браузер IE6, который не способен работать с HTML5.

По словам Филиппа Ле Эгаре, новый стандарт будет полностью готов не ранее середины 2011 года, после чего W3C разработает рекомендации по его внедрению. Но пройдут годы, прежде чем HTML5 станет широко распространенной технологией. Пока же в основном будут использоваться Adobe Flash и Microsoft Silverlight.

В качестве основных проблем HTML5 Филипп Ле Эгаре назвал отсутствие поддержки DRM, недостаток средств разработки и видеокодеков.

----

Недавно появился новый стандарт - HTML 5. Отличается он множеством новых тегов, а значит и новыми возможностями. Параллельно с HTML 5 идет и CSS 3.0.
Большой минус - поддержка браузеров. Сейчас HTML 5 и CSS 3.0 полноценно работают в Google Chrome и Safari. Так же поддержка новых стандартов будет включена в следующую версию Opera.

----

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

Работа над HTML5, начавшаяся в 2004 году, сейчас доводится до конца совместными усилиями W3C HTML WG и WHATWG. В разработке также участвуют много ключевых фигур включая представителей четырех самых крупных разработчиков браузеров: Apple, Mozilla, Opera и Microsoft; круг других организаций и пользователей с различными интересами и опытом.

Структура

HTML5 представляет набор новых элементов, делающих его намного проще для создания структуры страниц. Большинство страниц, написанных на HTML 4, включают широкий набор общих блоков – таких как верхняя часть, нижняя часть и колонок. И сегодня в порядке вещей размечать их, используя теги div, присваивая каждому описывающий id или class.

Рис. 1 Верстка стандартных элементов страницы на HTML 4 (слева) и HTML 5 (справа).

Разметка этого документа будет следующей:

<body>

</article>

</body>

Использование элементов div в основном обусловлено тем, что текущие версии HTML 4 испытывают недостаток семантики в описании этих частей более конкретно. HTML 5 избегает этого с помощью ввода новых элементов для представления каждой из частей в отдельности. Блоки div могут быть заменены новыми элементами:

<header> представляют собой заголовки разделов. Они могут состоять из нескольких частей – например, было бы оправданно разделять блок заголовка на подзаголовки, историю версий или указание авторства.
<footer> определяет нижнюю часть раздела, к которому он относится. Обычно он содержит информацию о разделе – например, имя автора, ссылки на похожие документы, копирайт и т.п.
<nav> содержит список ссылок для навигации. Подходит, например, для навигации по сайту или для содержания.
<aside> подходит для размещения содержимого каким-либо образом родственного основному контенту. В обычном случае будет полезен для разметки боковой колонки.
<section> представляет общий раздел документа или приложения.
<article> отмечает независимый раздел документа, страницы или сайта. Применим для такого содержимого как новости, записи блога, сообщения в форуме или комментарии пользователей.

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

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

Представление документа

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

Преимущество описания HTML 5 в терминах объектной модели документа в том, что язык может быть определен независимо от синтаксиса. Есть главным образом два синтаксиса языка для представления документа: сериализация HTML (HTML 5) и сериализация XML (XHTML 5). HTML относится к синтаксису пришедшему из SGML (раннего HTML), но определяется большей совместимостью с действительной поддержкой браузерами HTML на практике.

Браузеры используют MIME-тип для выбора. Любой документ поданный как text/html должен удовлетворять требованиям спецификации HTML и любой документ объявленный как XML MIME тип (такой как application/xhtml+xml) должен подходить под спецификацию XML.

Преимущества использования HTML:

Обратная совместимость с существующими браузерами;
Знакомый синтаксис;
Нетребовательный синтаксис;
Синтаксис, допускающий опускание некоторых тэгов и атрибутов.

Преимущества использования XHTML:

Строгий синтаксис XML, который некоторые авторы сочтут удобным для поддержки;
Объединяется напрямую с другими XML-словарями (такими как SVG и MathML);
Использование XML-обработки.

Мультимедиа

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

Canvas

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

Canvas впервые был представлен фирмой Apple для Mac OS X Dashboard и позже был реализован в Safari. Браузеры, основанные на Gecko 1.8, такие, как Firefox 1.5, также поддерживают этот новый элемент.

Синтаксис:

Аварийное содержимое

</canvas>

Аварийное содержимое отображается в том случае, если данный элемент не поддерживается web-браузером.

<canvas> создаёт поверхность для рисования, предоставляющую один или более контекст отрисовки, который используется для создания отображаемого контента и манипуляций с ним. Он изначально пустой, и для того, чтобы что-либо отобразить, скрипту необходимо получить контекст отрисовки и рисовать уже на нём. Элемент canvas имеет DOM-метод, называемый getContext, и предназначенный для получения контекста отрисовки вместе с функциями, позволяющими рисовать прямоугольники (с возможностью заливки), пути (линии, дуги, Безье и квадратичные кривые), изображения (с масштабированием, разрезанием и т.д.) и другие возможности.

Аудио и видео

Для воспроизведения аудио и видео предусмотрены специализированные элементы audio и video. Их воспроизведение на странице возможно с использованием стандартных элементов управления, либо собственных, реализованных при помощи специализированного API.

Синтаксис для аудио:

</audio>

Синтаксис для видео:

</video>

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

Данные элементы предоставляет все базовые возможности:

Автовоспроизведение;
Зацикливание;
Проигрывание/остановка/пауза;
Изменение уровня громкости;
Буферизация;
Воспроизведение на полный экран (для видео).

Проблема при их использовании заключаются в поддержке разными браузерами различных форматов аудио-видео файлов. Самый распространенный формат MP3 воспроизводит, например, Safari, но не воспроизводит Firefox. Формат ogg наоборот, проигрывается в Firefox и не проигрывается в Safari. Для решения этой проблемы в стандарте предусмотрена возможность использовать несколько различных источников, один из которых будет по возможности воспроизводиться. В случае, если элементы audio / video не поддерживается или невозможно воспроизведение ни одного из источников, разработчик может предусмотреть воспроизведение при помощи внешнего flash плеера.

-----------------

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

Итак, новый doctype выглядит превосходно! Можно выучить наизусть.

<!DOCTYPE html>* This source code was highlighted with Source Code Highlighter.

В HTML5 введены некоторые структурные элементы, о которых многие наверное слышали, но все же кратко:

<section>

Элемент группирует тематические блоки. section могут быть вложены друг в друга.

<header>

Содержит в себе заголовок какой либо секции, таблицы и т.д.

<footer>

Обычно включает в себя копирайт или контактную информацию.

<nav>

Определяет область навигации, обычно список ссылок.

<article>

Отдельная запись в блоге или статья на сайте.

<aside>

Вторичный контент, обычно находится в стороне от основного.

В последних версиях всех современных браузеров, кроме, всеми любимого, Internet Explorer эти элементы поддерживаются по умолчанию. Но при помощи ~~волшебного пендаля~~ небольшого javascript и он начинает понимать.

<script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer');</script>* This source code was highlighted with Source Code Highlighter.

Тот же код можно загрузить с google:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> * This source code was highlighted with Source Code Highlighter.

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

header, nav, section, article, aside, footer { display: block }* This source code was highlighted with Source Code Highlighter.

Подготовка закончена, приступим:

Сделаем классическую схему для блога:

В реализации на html5 это выглядит примерно так:

<!DOCTYPE html><html><head> <meta charset=utf-8> <title>Simple HTML5 blog</title>  <style> styles </style></head><body><header> blog header</header><nav> navigation</nav><section> <article> <header> Article header </header> Article </article> <article> <header> Article header </header> Article </article></section><aside> sidebar content</aside><footer> copyright</footer></body></html>* This source code was highlighted with Source Code Highlighter.

HTML - это язык разметки веб страниц, который интерпретирует их содержимое для браузеров и отображает пользователям интернета сайты в нужном виде. Благодаря этой уникальной штуковине мы видим интернет в весьма восприимчивой, "дружелюбной форме", намного более приятной, чем сам HTML код той или иной страницы:) В последнее время все прогрессивное сообщество веб-мастеров достаточно активно изучает новый стандарт HTML5 (HyperText Markup Language 5). Его выход стал действительно неординарным событием, учитывая всю мощь и возможности новой версии HTML. Давайте обсудим этот вопрос и и мы, но прежде коротко (обо все в рамках одной статьи рассказать невозможно) пробежимся по основным отличиям от HTML4.

Основные отличия HTML5 от HTML4

Работа над HTML4 была по сути закончена в 1999 году, разработка HTML5 в группе W3C началась лишь в 2007 году (не консолидированная c 2004).

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

Так появился ряд новых элементов к div добавились section, nav, header, article, footer. К привычному img добавились audio, video (потребность в которых была еще 10 лет назад). К глобальному атрибуту id добавились tabindex, repeat. Удалили признанные устаревшими элементы font, center и другие. Несколько изменили правила лексического разбора.

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

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

Структура и разметка HTML5

В HTML4 практически вся нагрузка ложилась на элемент div — меню, навигация, разделы страницы, сайдбар(ы) и так далее. Главное новшество HTML5 в плане разметки — распределение указанных ролей между новыми элементами, что делает структуру более понятной и логичной:

header — заголовок страницы, может содержать заголовки и подзаголовки, не путать с head, поскольку он им не является;
nav — определяет раздел навигации;
section — общий раздел содержания, можно использовать для любого блока текста которому требуется свой заголовок;
article — документ, отдельная запись, контент страницы как таковой;
foote — «подвал», нижняя секция страницы.

Пример структуры в HTML5:

<!DOCTYPE html>
  <html>
   <head>
    <title> Пример структуры в HTML5</title>
   </head>
   <body>
    <header>...</header>
    <nav>...</nav>
    <section>
       <article>
          ...
       </article>
    </section>
    <aside>...</aside>
    <footer>...</footer>
  </body>
  </html>

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

Элементы уровня блока

В HTML5 представляется несколько новых семантических блоковых элементов:

aside — используется для примечаний, цитат, сносок чтобы отделить фрагмент от основного повествования;
dialog — для оформления диалогов;
figure — для описания изображения с подписью.

Элементы мультимедиа

Предложены два давно ожидаемых элемента — video и audio для представления видео и аудио данных. Главная особенность такого представления в том что эти элементы обеспечат куда более тесную интеграцию мультимедийного контента. В частности, просматривать такой контент можно будет без специальных плагинов для браузеров.

Элементы уровня текста

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

time — представляет время. Пример:

<p>Пост опубликован
<time>15:30 P.M. on June 17rd</time>.
</p>

mark — для того чтобы пометить что-либо;
progress — указывает прогресс какого-то процесса, например, закачки.

Интерактивные элементы

Новые интерактивные элементы:

details — можно использовать для необязательной к показу информации, например, для сносок;
datagrid — для отображения таблиц данных. Главное отличие от обычных таблиц — пользователь может управлять отображением данных, то есть, сортировать столбцы, сворачивать таблицу и так далее;
menu и command — для прогрессивного отображения меню.

Новые API

В HTML5 определены и добавлены новые API и расширены существующие DOM интерфейсы:

Хранение данных в браузере;
Drag-and-drop;
Real-time рисование;
и другие.

На этом я предлагаю пока окончить краткий обзор HTML5, всего не объять в любом случае. Поводя итог, можно сказать что пятая версия HTML, несомненно является шагом вперед. Она расширяет границы веб-дизайна, при этом делая его более логичными, структурированным и понятным. Главное чтобы все браузеры одинаково корректно работали с HTML5. Будем следить за развитием!

Разделы: HTML и CSS
Теги: html, верстка, технологии.

Еще интересно почитать:

Операционная система Android для мобильных устройств

http://www.w3schools.com/html5/html5_reference.asp

Tag	Description
<!--...-->	Defines a comment
<!DOCTYPE>	Defines the document type
<a>	Defines a hyperlink
<abbr>	Defines an abbreviation
<acronym>	Not supported in HTML5.
<address>	Defines an address element
<applet>	Not supported in HTML5.
<area>	Defines an area inside an image map
<article>New	Defines an article
<aside>New	Defines content aside from the page content
<audio>New	Defines sound content
<b>	Defines bold text
<base>	Defines a base URL for all the links in a page
<basefont>	Not supported in HTML5.
<bdo>	Defines the direction of text display
<big>	Not supported in HTML5.
<blockquote>	Defines a long quotation
<body>	Defines the body element
<br>	Inserts a single line break
<button>	Defines a push button
<canvas>New	Defines graphics
<caption>	Defines a table caption
<center>	Not supported in HTML5.
<cite>	Defines a citation
<code>	Defines computer code text
<col>	Defines attributes for table columns
<colgroup>	Defines groups of table columns
<command>New	Defines a command button
<datalist>New	Defines a dropdown list
<dd>	Defines a definition description
<del>	Defines deleted text
<details>New	Defines details of an element
<dfn>	Defines a definition term
<dir>	Not supported in HTML5.
<div>	Defines a section in a document
<dl>	Defines a definition list
<dt>	Defines a definition term
<em>	Defines emphasized text
<embed>New	Defines external interactive content or plugin
<fieldset>	Defines a fieldset
<figcaption>New	Defines the caption of a figure element
<figure>New	Defines a group of media content, and their caption
<font>	Not supported in HTML5.
<footer>New	Defines a footer for a section or page
<form>	Defines a form
<frame>	Not supported in HTML5.
<frameset>	Not supported in HTML5.
<h1> to <h6>	Defines header 1 to header 6
<head>	Defines information about the document
<header>New	Defines a header for a section or page
<hgroup>New	Defines information about a section in a document
<hr>	Defines a horizontal rule
<html>	Defines an html document
<i>	Defines italic text
<iframe>	Defines an inline sub window (frame)
<img>	Defines an image
<input>	Defines an input field
<ins>	Defines inserted text
<keygen>New	Defines a generated key in a form
<kbd>	Defines keyboard text
<label>	Defines a label for a form control
<legend>	Defines a title in a fieldset
<li>	Defines a list item
<link>	Defines a resource reference
<map>	Defines an image map
<mark>New	Defines marked text
<menu>	Defines a menu list
<meta>	Defines meta information
<meter>New	Defines measurement within a predefined range
<nav>New	Defines navigation links
<noframes>	Not supported in HTML5.
<noscript>	Defines a noscript section
<object>	Defines an embedded object
<ol>	Defines an ordered list
<optgroup>	Defines an option group
<option>	Defines an option in a drop-down list
<output>New	Defines some types of output
<p>	Defines a paragraph
<param>	Defines a parameter for an object
<pre>	Defines preformatted text
<progress>New	Defines progress of a task of any kind
<q>	Defines a short quotation
<rp>New	Used in ruby annotations to define what to show browsers that to not support the ruby element.
<rt>New	Defines explanation to ruby annotations.
<ruby>New	Defines ruby annotations
<s>	Defines text that is no longer correct
<samp>	Defines sample computer code
<script>	Defines a script
<section>New	Defines a section
<select>	Defines a selectable list
<small>	Defines small text
<source>New	Defines media resources
<span>	Defines a section in a document
<strike>	Not supported in HTML5.
<strong>	Defines strong text
<style>	Defines a style definition
<sub>	Defines subscripted text
<summary>New	Defines the header of a "detail" element
<sup>	Defines superscripted text
<table>	Defines a table
<tbody>	Defines a table body
<td>	Defines a table cell
<textarea>	Defines a text area
<tfoot>	Defines a table footer
<th>	Defines a table header
<thead>	Defines a table header
<time>New	Defines a date/time
<title>	Defines the document title
<tr>	Defines a table row
<tt>	Not supported in HTML5.
<u>	Not supported in HTML5.
<ul>	Defines an unordered list
<var>	Defines a variable
<video>New	Defines a video
<wbr>New	Defines a possible line-break
<xmp>	Not supported in HTML5.