[Disclaimer: Данная статья была переведена в рамках "Конкурса на лучший перевод статьи" на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]
Введение
HTML 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.
Работа над HTML5 началась еще в далеком 2004-м, но только сейчас (2009) он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который мне больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.
Итак, что же нового в HTML 5?
<canvas>
<canvas> - это поле для рисования двухмерной графики, управлямый с помощью JavaScript. Вы можете использовать его для построения графиков и других динамических изображений.
<video> и <audio>
Тег <video> упрощает добавление видео клипов на HTML-страницы. Он может содержать атрибуты src, autoplay и loop. Тег <video> также допускает задание текстового описания для видео (например, для незрячих людей). В идеале это должна быть полная текстовая интерпретация видео.
Тег <audio> очень похож на <video>, но предназначен для аудио-файлов. Неожиданно, не правда ли?
Контекстные меню
HTML5 также предусматривает метод для простого добавления на веб-страницу контекстных меню. Возможно, такие меню не слишком полезны для обычных сайтов. Зато для приложений, в которых множество функций хотелось бы сгруппировать и отображать контекстно, такая возможность в самый раз.
Новые структурные элементы
Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:
- <section> - секция, либо параграф.
- <header> - верхний колонтитул страницы (не путать с <head>)
- <footer> - нижний колонтитул страницы.
- <nav> - содержит набор ссылок на другие страницы. Например, вы можете расположить там навигацию по вашему сайту.
- <article> - в этот тег может быть включена, например, статья блога.
- <aside> - может быть использован для предоставления дополнительной информации к текстовому блоку.
- <figure> - может быть использован, например, для создания диаграмм.
Новые inline-элементы
Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:
- <mark> - помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
- <time> - можете использовать этот тег для вывода времени или даты в текстовом блоке.
- <meter> - для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
- <progress> - может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.
Новые типы полей ввода
HTML5 добавляет ряд новых типов для полей ввода данных:
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
Некоторые из них широко применяются в пользовательских интерфейсах desktop-приложений. И, вероятнее всего, они будут уже хорошо знакомы всем вашим пользователям.
Устаревшие (deprecated) элементы
Следующие элементы HTML считаются устаревшими:
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- isindex
- noframes
- noscript
- s
- strike
- tt
- u
Синтаксис для задания кодировки
Синтаксис для задания кодировки документа в HTML5 теперь выглядит очень просто: <meta charset="UTF-8">
Интерактивные нововведения
Несколько нововведений, которые сделают создание сайтов и web-приложений проще и приятнее:
- <details> - дополнительная информация о чем либо. Например, данный тег может быть использован в браузерах для реализации подсказки. Тег может иметь атрибут open, указывающий будет ли содержимое тега изначально показано пользователю или нет.
- <datagrid> - В отличие от традиционных таблиц (которые задуманы как статические), этот тег может быть использован для представления интерактивного набора данных. Например, для таблицы с выбором строк или колонок, inline-редактированием данных, сортировкой и т.п.
- <menu> - ранее нерекомендуемый, тег <menu> вернулся в стандарт HTML5 в новом обличии. Теперь он может содержать, например, элементы <command>, которые вызывают соответствующие команды. Этот элемент можно использовать для представления панели инструментов или контекстного меню (см. выше). Тег может иметь атрибуты label и icon. Они могут быть добавлены для создания многоуровнего меню.
Новое определение типа документа (DTD)
В HTML5 стало гораздо проще объявлять DTD: <!doctype html> Объявление DTD стало более симпатичным и, я полагаю, проще запоминающимся. Скорее всего, это является результатом того, что HTML больше не связан с SGML.
Необязательный href в ссылках
Атрибут href теперь необязательный, поскольку ссылки могут использоваться в сочетании со сценариями. Вероятно, это будет полезно в web-приложениях.
Атрибут async
Атрибут дает браузеру подсказку, что блок сценария может выполняться асинхронно, вместо того, чтобы ждать, пока страница не загрузилась полностью.
Заключение
HTML5 может по праву считаться усовершенствованием стандарта HTML, которого мы так долго ждали. Он вносит полезные дополнения в язык и делает создание веб-приложений более простым и приятным.
Естественно, не все браузеры будут поддерживать весь стандарт целиком (думаю, читатель сейчас вспомнил о "любимом" MSIE). Но поддержка появится со временем. И новые элементы HTML 5 были разработаны с учетом текущей ситуации. С другой стороны, большинство браузеров уже частично поддерживают спецификацию. Так, например, тег <canvas> поддерживается в Firefox, Opera, Chrome и Safari. Плюс, на сколько мне известно, Firefox 3.5 будет поддерживать теги <audio> и <video>.
Так что, ждем с нетерпением.
Кому интересно, спецификацию HTML 5 можно найти по следующей ссылке - HTML 5 specification.
----------
Оригинальный текст статьи: What's new in HTML 5?
