В статье кратко рассмотрены различия html5 и html 4.
Синтаксис, кодировка символов, новые элементы, новые атрибуты, API. Также будуn рассмотрены отменённые атрибуты и ряд значительных изменений.
HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд кажутся противоречивыми, как будет обстоять дело в реальности - покажет время.
Синтаксис
HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок"). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:
XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML,
а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:
вместо
Для синтаксиса XML разработчики должны руководствоваться правилами спецификаций XML.
Появились также несколько новых глобальных атрибутов:
По мотивам http://www.w3.org/TR/2008/WD-html5-diff-20080122/
Синтаксис, кодировка символов, новые элементы, новые атрибуты, API. Также будуn рассмотрены отменённые атрибуты и ряд значительных изменений.
HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд кажутся противоречивыми, как будет обстоять дело в реальности - покажет время.
Синтаксис
HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок"). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:
1
<
meta
charset
=
"UTF-8"
>
2
<
title
>Example document</
title
>
3
4
5
<
p
>Example paragraph</
p
>
01
<?
xml
version
=
"1.0"
encoding
=
"UTF-8"
?>
02
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
03
<
head
>
04
<
title
>Example document</
title
>
05
</
head
>
06
<
body
>
07
<
p
>Example paragraph</
p
>
08
</
body
>
09
</
html
>
Кодировка символов
Для синтаксиса HTML разработчики могут использовать три способа установки кодировки: - на транспортном уровне. При использовании Content-Type HTTP заголовка, например. - используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования. - используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head. Обратите внимание, что для определения кодировки используется<meta charset="UTF-8">
вместо
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Для синтаксиса XML разработчики должны руководствоваться правилами спецификаций XML.
Новые элементы
- section представляет часть документа или раздел
- article представляет независимую часть содержания для включения в документ статей
- aside представляет часть содержания, которая только частично связана с остальной страницей
- header представляет заголовок section
- footer - нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее
- nav представляет раздел документа, предназначенный для навигации
- dialog может использоваться для выделения диалогов:
01
<
dialog
>
02
<
dt
> Costello
03
<
dd
> Look, you gotta first baseman?
04
<
dt
> Abbott
05
<
dd
> Certainly.
06
<
dt
> Costello
07
<
dd
> Who's playing first?
08
<
dt
> Abbott
09
<
dd
> That's right.
10
<
dt
> Costello
11
<
dd
> When you pay off the first baseman every month, who gets the money?
12
<
dt
> Abbott
13
<
dd
> Every dollar of it.
14
</
dialog
>
- figure может использоваться для связи заголовка с медиа контентом:
1
<
figure
>
2
<
video
src
=
ogg
>…</
video
>
3
<
legend
>Example</
legend
>
4
</
figure
>
- audio и video для мультимедиа. Оба обеспечивают соответствующий API. Таким образом разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного API пользовательского агента. Вместе с этими элементами может быть использован source, если есть возможность организовать параллельные потоки.
- embed используется для контента plugin'ов.
- meter - для представления единиц измерений.
- time - дата и/или время.
- canvas используется для динамической отрисовки графики.
- command представляет команду, которую может вызвать пользователь.
- datagrid - интерактивное представление списка типа "дерево" или табличных данных.
- details представляет дополнительную информацию, которую пользователь может получить по требованию.
- datalist вместе с новым атрибутом list используется чтобы сделать combobox:
1
<
input
list
=
browsers
>
2
<
datalist
id
=
browsers
>
3
<
option
value
=
"Safari"
>
4
<
option
value
=
"Internet Explorer"
>
5
<
option
value
=
"Opera"
>
6
<
option
value
=
"Firefox"
>
7
</
datalist
>
- datatemplate, rule, и nest обеспечивают механизм шаблонов (templating mechanism) для HTML.
- event-source используется для перехвата событий, посланных сервером.
- output представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
- progress представляет ход выполнения задачи, например, загрузки.
- Атрибут type элемента input теперь имеет следующие новые значения:
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
Новые атрибуты
HTML 5 вводит несколько новых атрибутов для элементов, которые уже входили в HTML 4:- элементы a и area получили новый признак ping, который определяет список URI адресов, которые должны пропинговаться при переходе по гиперссылке. Принцип функционирования пока до конца не ясен.
- элемент area теперь имеет атрибуты hreflang и rel
- base получил атрибут target
- атрибут value для li и атрибут start для элемента ol больше не deprecated
- meta получил атрибут charset
- новый атрибут autofocus может быть определен у input (кроме тех случаев, когда type атрибут - hidden), select, textarea и button. Это обеспечивает способ передачи управления форме во время загрузки страницы
- атрибут form для input, output, select, textarea, button и fieldset позволяет связать элемент с более чем одной формой
- input, button и form получили атрибут replace, который определяет, что будет с элементом после отправки формы
- form, select и datalist имеют атрибут data, который учитывает автоматическое предзаполнение, в случае заполнения данными с сервера
- новый атрибут required применяется к input (кроме тех случаев, когда type атрибут - hidden, image или кнопка) и textarea. Он указывает обязательные для заполнения поля
- input и textarea имеют новый атрибут inputmode, который дает подсказку пользовательскому интерфейсу относительно того, какие данные ожидаются для ввода
- теперь можно disable (отключить) сразу целый fieldset, что не было возможно прежде
- элемент input имеет несколько новых атрибутов для определения ограничений: autocomplete, min, max, pattern и step, а также list, который может использоваться вместе с элементами select и datalist
- input и button также получили новый атрибут template, который может использоваться для шаблонов повторения
- элемент menu имеет три новых атрибута: type, label и autosubmit
- script имеет новый атрибут async, который влияет на загрузку и выполнение сценария
- элемент html имеет новый атрибут manifest, который указывает на кэш приложений, используемый вместе с API для автономных Web приложений
Появились также несколько новых глобальных атрибутов:
- атрибут contenteditable указывает, что элемент доступен для редактирования
- contextmenu может использоваться для указания на контекстное меню, созданное автором
- draggable может использоваться вместе с новым drag&drop API
- irrelevant указывает, что элемент еще или больше не актуален
- repeat
- repeat-start
- repeat-min
- repeat-max
Отмененные элементы
Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:- basefont
- big
- center
- font
- s
- strike
- tt
- u
- frame
- frameset
- noframes
- acronym
- applet замещен object
- isindex
- dir замещен ul
Отмененные атрибуты
- accesskey для a, area, button, input, label, legend и textarea
- rev и charset для link и a
- shape и coords для a
- longdesc для img и iframe
- target для link
- nohref для area
- profile для head
- version для map, img, object, form, iframe, a
- scheme для meta
- archive, classid, codebase, codetype, declare и standby для object
- valuetype и type для param
- charset и language для script
- summary для table
- headers, axis и abbr для td и th
- scope для td
- align для caption, iframe, img, input, object, legend, table, hr, div, h1-h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr и body
- alink, link, text и vlink для body
- background для body
- bgcolor для table, tr, td, th и body
- border для table, img и object
- cellpadding и cellspacing для table
- char и charoff для col, colgroup, tbody, td, tfoot, th, thead и tr
- clear для br
- compact для menu, ol и ul
- frame на table
- frameborder приписывают на iframe
- height для iframe, td и th
- hspace и vspace для img и object
- marginheight, marginwidth и scrolling для iframe
- noshade для hr
- nowrap для td и th
- rules для table
- size для hr, input и select
- style для всех элементов
- type для li, ol и ul
- valign для col, colgroup, tbody, td, tfoot, th, thead и tr
- width для hr, table, td, th, col, colgroup, iframe и pre
API
HTML 5 вводит множество API, которые должны помочь в создании Web приложений. Они могут использоваться вместе с новыми элементами.- 2D drawing API , который может использоваться с новым элементом canvas
- API для проигрывания видео и аудио, который может использоваться с новыми элементами video и audio
- выделенная область памяти (Persistent storage) с поддержкой данных в виде ключ / значение и SQL данных
- API, который допускает автономную работу web приложений
- API, который позволяет web приложений регистрировать себя для определенных протоколов или типов MIME
- Editing API в сочетании с новым глобальным атрибутом contenteditable
- Drag&drop API в сочетании с атрибутом draggable
- Network API
- API, который выстраивает историю посещения, чтобы предотвратить нарушение функционирования back кнопки (Этот API имеет необходимые ограничения безопасности)
- Cross-document messaging (Передача сообщений между документами)
- события сервера (Server-sent events) в сочетании с новым элементом event-source
Расширение HTMLDocument
HTML 5 расширил интерфейс HTMLDocument. Интерфейс теперь реализован на всех объектах интерфейса Document. Его новые методы:- getElementsByClassName()
- activeElement и hasFocus
- getSelection()
- designMode и execCommand(), которые используются главным образом для редактирования документов
Расширение к HTMLElement
Интерфейс HTMLElement также получил несколько расширений:- getElementsByClassName()
- innerHTML
- classList введен для удобства доступа к className. Возвращаемый объект имеет методы has(), add(), remove() и toggle() для манипуляции классами элемента
По мотивам http://www.w3.org/TR/2008/WD-html5-diff-20080122/