Что такое HTML5

Сентябрь 19, 2010, категории: HTML и CSS (Нет комментариев)

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. Будем следить за развитием!