В статье кратко рассмотрены различия html5 и html 4.
Синтаксис, кодировка символов, новые элементы, новые атрибуты, API. Также будуn рассмотрены отменённые атрибуты и ряд значительных изменений.
HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд
кажутся противоречивыми, как будет обстоять дело в реальности - покажет время.
Синтаксис
HTML 5 будет иметь два синтаксиса - "custom" HTML и XML.
HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок").
Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:
XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML,
а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:
01 xml version = "1.0" encoding = "UTF-8" ?>
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. Обратите внимание,
что для определения кодировки используется
Для синтаксиса 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
может использоваться для связи заголовка с медиа контентом:
audio
и video
для мультимедиа. Оба обеспечивают соответствующий API. Таким образом
разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного
API пользовательского агента. Вместе с этими элементами может быть использован source
, если есть
возможность организовать параллельные потоки.
embed
используется для контента plugin"ов.
meter
- для представления единиц измерений.
time
- дата и/или время.
canvas
используется для динамической отрисовки графики.
command
представляет команду, которую может вызвать пользователь.
datagrid
- интерактивное представление списка типа "дерево" или табличных данных.
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
email
Идея относительно этих новых типов состоит в том, что пользовательский
агент может обеспечить интерфейс
для таких объектов как календарь (выбор даты), интеграции с адресной
книгой и предоставить серверу данные в
определенном формате. Это дает определенные преимущества как
пользователям, так и разработчикам, поскольку пользовательский
ввод проверяется перед посылкой на сервер браузером. Это означает, что
разработчикам нет необходимости расходовать ресурсы на проверку
введенных данных, что, в свою очередь, приводит к сокращению времени
ожидания ответа.
Новые атрибуты
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 приложений
Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными
атрибутами: class
, dir
, id
, lang
,
tabindex
и title
.
Появились также несколько новых глобальных атрибутов:
атрибут contenteditable
указывает, что элемент доступен для редактирования
contextmenu
может использоваться для указания на контекстное меню, созданное автором
draggable
может использоваться вместе с новым drag&drop API
irrelevant
указывает, что элемент еще или больше не актуален
Атрибуты для модели повторения (repetition model):
repeat
repeat-start
repeat-min
repeat-max
Отмененные элементы
Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:
basefont
center
strike
Следующие элементы не включенв в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности:
frame
frameset
noframes
Следующие элементы не включены, потому что использовались редко или они могут быть заменены другими элементами:
acronym
applet
замещен object
isindex
dir
замещен ul
Наконец noscript
остался только в синтаксисе HTML, поскольку его использование предполагает разбор
с помощью HTML парсера.
Отмененные атрибуты
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
Кроме того, HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:
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 приложений регистрировать себя для определенных протоколов или типов 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()
для
манипуляции классами элемента
По мотивам
В статье кратко рассмотрены различия html5 и html 4.
Синтаксис, кодировка символов, новые элементы, новые атрибуты, API. Также будуn рассмотрены отменённые атрибуты и ряд значительных изменений.
HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд
кажутся противоречивыми, как будет обстоять дело в реальности - покажет время.
Синтаксис
HTML 5 будет иметь два синтаксиса - "custom" HTML и XML.
HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок").
Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:
XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML,
а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:
01 xml version = "1.0" encoding = "UTF-8" ?>
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. Обратите внимание,
что для определения кодировки используется
Для синтаксиса 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
может использоваться для связи заголовка с медиа контентом:
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
email
Идея относительно этих новых типов состоит в том, что пользовательский
агент может обеспечить интерфейс
для таких объектов как календарь (выбор даты), интеграции с адресной
книгой и предоставить серверу данные в
определенном формате. Это дает определенные преимущества как
пользователям, так и разработчикам, поскольку пользовательский
ввод проверяется перед посылкой на сервер браузером. Это означает, что
разработчикам нет необходимости расходовать ресурсы на проверку
введенных данных, что, в свою очередь, приводит к сокращению времени
ожидания ответа.
Новые атрибуты
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 приложений
Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными
атрибутами: class
, dir
, id
, lang
,
tabindex
и title
.
Появились также несколько новых глобальных атрибутов:
атрибут contenteditable
указывает, что элемент доступен для редактирования
contextmenu
может использоваться для указания на контекстное меню, созданное автором
draggable
может использоваться вместе с новым drag&drop API
irrelevant
указывает, что элемент еще или больше не актуален
Атрибуты для модели повторения (repetition model):
repeat
repeat-start
repeat-min
repeat-max
Отмененные элементы
Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:
basefont
center
strike
Следующие элементы не включенв в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности:
frame
frameset
noframes
Следующие элементы не включены, потому что использовались редко или они могут быть заменены другими элементами:
acronym
applet
замещен object
isindex
dir
замещен ul
Наконец noscript
остался только в синтаксисе HTML, поскольку его использование предполагает разбор
с помощью HTML парсера.
Отмененные атрибуты
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
Кроме того, HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:
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()
для
манипуляции классами элемента
По мотивам
HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд кажутся противоречивыми, как будет обстоять дело в реальности — покажет время.
Синтаксис
HTML 5 будет иметь два синтаксиса — «custom» HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая «обработку ошибок»). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:
Example document
Example paragraph
XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML, а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:
Example document
Example paragraph
Кодировка символов
Для синтаксиса HTML разработчики могут использовать три способа установки кодировки:
на транспортном уровне. При использовании Content-Type HTTP заголовка, например.
используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования.
используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head.
Обратите внимание, что для определения кодировки используется
вместо
Для синтаксиса XML разработчики должны руководствоваться правилами спецификаций XML.
Новые элементы
section
представляет часть документа или раздел
article
представляет независимую часть содержания для включения в документ статей
aside
представляет часть содержания, которая только частично связана с остальной страницей
header
представляет заголовок section
footer
— нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее
nav
представляет раздел документа, предназначенный для навигации
dialog
может использоваться для выделения диалогов:
figure
может использоваться для связи заголовка с медиа контентом:
audio
и video
для мультимедиа. Оба обеспечивают соответствующий API. Таким образом разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного API пользовательского агента. Вместе с этими элементами может быть использован source
, если есть возможность организовать параллельные потоки.
embed
используется для контента plugin’ов.
meter
— для представления единиц измерений.
time
— дата и/или время.
canvas
используется для динамической отрисовки графики.
command
представляет команду, которую может вызвать пользователь.
datagrid
— интерактивное представление списка типа «дерево» или табличных данных.
details
представляет дополнительную информацию, которую пользователь может получить по требованию.
datalist
вместе с новым атрибутом list
используется чтобы сделать combobox:
datatemplate
, rule
, и nest
обеспечивают механизм шаблонов (templating mechanism) для HTML.
event-source
используется для перехвата событий, посланных сервером.
output
представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
progress
представляет ход выполнения задачи, например, загрузки.
Атрибут type
элемента input
теперь имеет следующие новые значения:
datetime
datetime-local
date
month
week
time
number
range
email
Идея относительно этих новых типов состоит в том, что пользовательский агент может обеспечить интерфейс для таких объектов как календарь (выбор даты), интеграции с адресной книгой и предоставить серверу данные в определенном формате. Это дает определенные преимущества как пользователям, так и разработчикам, поскольку пользовательский ввод проверяется перед посылкой на сервер браузером. Это означает, что разработчикам нет необходимости расходовать ресурсы на проверку введенных данных, что, в свою очередь, приводит к сокращению времени ожидания ответа.
Новые атрибуты
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 приложений
Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными атрибутами: class
, dir
, id
, lang
, tabindex
и title
.
Появились также несколько новых глобальных атрибутов:
атрибут contenteditable
указывает, что элемент доступен для редактирования
contextmenu
может использоваться для указания на контекстное меню, созданное автором
draggable
может использоваться вместе с новым drag&drop API
irrelevant
указывает, что элемент еще или больше не актуален
Атрибуты для модели повторения (repetition model):
repeat
repeat-start
repeat-min
repeat-max
Отмененные элементы
Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:
basefont
center
strike
Следующие элементы не включенв в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности:
frame
frameset
noframes
Следующие элементы не включены, потому что использовались редко или они могут быть заменены другими элементами:
acronym
applet
замещен object
isindex
dir
замещен ul
Наконец noscript
остался только в синтаксисе HTML, поскольку его использование предполагает разбор с помощью HTML парсера.
Отмененные атрибуты
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
Кроме того, HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:
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()
для манипуляции классами элемента.
Вконтакте
Перевод
Preamble
В статье рассматриваются новые интересные возможности, которые предоставит пятая версия стандарта HTML. Приводится несколько примеров кода с применением новых тегов, а так же поясняются понятия HTML- и XML-сериализации с описанием преимуществ применения каждой из них.
Вводная «лирическая» часть текста сокращена, т.к. она во многом пересекается с ранее опубликованным обзорным постом об HTML 5 , в котором был приведен фрагмент интервью того же автора.
Введение
В ходе непрерывного развития интернета, к языку гипертекстовой разметки предъявляется все более серьезные требования. HTML 4 находился в употреблении на протяжении уже более десятка лет, и многочисленные инновации, применяемые сейчас на веб-сайтах, делают ограничения его спецификации все более ощутимыми. Веб-разработчикам давно требуется более широкая функциональность, чем та, которую может представить это стандарт.
Пятая версия HTML содержит множество новых возможностей для создания интерактивных сайтов и веб-приложений, взаимодействия с формами, работы с различными программными интерфейсами, внедрения в страницы мультимедиа-контента, структурирования документов и т.д.
Структура
HTML 5 предоставляет множество новых элементов, благодаря которым структурирование веб-документов будет существенно упрощено. Множество страниц, основанных на HTML 4, содержали в себе типичные структурные фрагменты, таких как заголовок, колонки текста, нижний колонтитул и т.д. На сегодняшний день обычным решением считается определение этих блоков с помощью контейнеров div с указанием для каждого из них имени соответствующего класса или уникального идентификатора.
На иллюстрации приведена типовая разметка страницы с двумя колонками, сделанная с помощью контейнеров div с атрибутами class и id . В ней содержится «шапка», горизонтальный блок навигационных элементов, блок для основного текста страницы, вспомогательная колонка справа от него и нижний колонтитул.
Элементы div активно используются по той причине, что текущая версия стандарта HTML испытывает недостаток в семантических элементах, с помощью которых можно было бы описывать перечисленные выше блоки страниц более конкретно. В стандарте HTML 5 учитывается этот недостаток и предоставляется ряд новых тегов для отдельного описания каждого блока типовой разметки.
Контейнеры div заменяются в нашем примере новыми элементами: header , nav , section , article , aside , и footer . HTML-код при этом принимает следующий вид:
...
...
Существует ряд причин отдавать предпочтение перечисленным выше новым тегам. Например, при их использовании снимается существовавшее ранее ограничение в шесть уровней заголовков (h1 - h6). В спецификации подробно описан алгоритм формирования оглавления , в котором не только учитываются новые структурные элементы, но и сохраняется обратная совместимость с предыдущей версией стандарта. Это нововведение может быть использовано для автоматической генерации оглавлений, что упростит навигацию внутри веб-страниц.
В следующем примере совместно используются контейнеры section и h1:
Level 1
Level 2
Level 3
Обратите внимание, что для лучшей совместимости с существующими браузерами, помимо h1 так же возможно использование заголовков других уровней (h2 - h6).
Когда предназначения секций страницы может быть автоматически определено по специфичным именам тегов, появляется возможность организации более легкой и эффективной навигации по документу. Например, пользователи смогут одним кликом проматывать оглавление, быстро переходя к содержательной части большого документа, или переходить от одной статьи к следующей. Что самое интересное, при этом становится вовсе необязательным добавление в страницу вспомогательных навигационных ссылок. Код при этом становится менее «захламлен» второстепенными деталями, без которых можно обойтись.
Элемент head интерпретируется как заголовок секции. Такие контейнеры при необходимости могут содержать не только, собственно, название, но и подзаголовок, историю изменений, ссылку на автора и любую другую информацию, которую логично отнести к заголовочной части.
A Preview of HTML 5
By Lachlan Hunt
Example Blog
Insert tag line here.
Элемент footer представляет собой завершающий блок секции, к которой относится (аналог нижнего колонтитула для страницы «бумажного» документа). Такие блоки, как правило, содержат вспомогательную информацию о секции. Например, ссылки на связанные материалы, информацию о правах на копирование и т.д.
Nav предназначен для навигационных ссылок, что полезно как для межстраничных переходов внутри сайта, так и для внутристраничной навигации (для организации оглавления).
Элемент section интерпретируется как секция общего назначения. Такой секцией может быть, например, параграф.
Chapter 1: The Period
It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
...
(в примере приведена выдержка из «Повести о двух городах » Чарльза Диккенса)
Article определяет независимые секции документа, страницы или сайта. Этот элемент может использоваться для выделения новостей, сообщений на форуме, постов или комментариев на блоге и т.д.
В последние годы аудиозаписи и видеоролики получили широкое распространение в интернете благодаря многочисленным сервисам, облегчающим их публикацию (YouTube, Google Video, MySpace, etc.). Из-за недостатка встроенных возможностей HTML, большинство сайтов, размещающих подобный контент, используют Flash, в качестве вспомогательного средства. Выбор этой технологии обычно обоснован тем, что Flash на данный момент имеет наиболее широкую поддержку среди браузеров, по-сравнению с альтернативными технологиями, с помощью которых можно было бы обеспечить воспроизведение мультимедиа-контента (QuickTime, Windows Media).
Огромное количество мультимедиа-плееров, написанных на Flash, является подтверждением того, что разработчики чаще всего предпочитают самостоятельно формировать их интерфейс, не смотря на то, что в большинстве случаев пользователям предоставляется одна и та же функциональность (воспроизведение, пауза, перемотка и управление громкостью). Планируется, что в будущем эти функции будут поддерживаться самими браузерами, что обеспечит базовую возможность для встраивания аудио- и видеозаписей в веб-страницы, а так же возможность управлять этими элементами через DOM API.
С помощью новых тегов video и audio это будет действительно просто. Большая часть функций их API будет совпадать, с одной лишь разницей в ориентации на воспроизведение визуального и невизуального материала.
Представление документов
В отличии от предыдущих версий HTML и XHTML, описанных в терминах их собственного синтаксиса, HTML 5 описывается согласно терминам Document Object Model (DOM). Для внутреннего представления документа браузером используется древовидная структура.
Ниже приведен простейший пример структуры документа, состоящего из названия страницы, заголовка и одного абзаца текста:
Такое дерево содержит в себе элемент title в контейнере head , а так же h1 и p в body .
Основная причина (и преимущество) выбора DOM для определения стандарта HTML 5 состоит в том, что сам язык в таком случае может быть описан независимо от синтаксиса. Существуют два основных типа синтаксиса, согласно которым может быть представлен HTML документ: HTML-сериализация (так же известная как HTML 5) и XML-сериализация (или XHTML 5).
HTML-сериализация основана на обычном для более ранних версий синтаксисе HTML (созданном на базе SGML). Ее определение ориентировано на лучшее соответствие тому, как в действительности браузеры обрабатываю HTML.
An HTML Document
Example
Как и в предыдущих версиях HTML, некоторые теги остаются опциональными, и их наличие автоматически подразумевается.
XML-сериализация использует XML 1.0 и пространства имен, так же как и XHTML 1.0.
An HTML Document
Example
This is an example HTML document.
В отличие от предыдущего примера, здесь присутствует атрибут xmlns , а так же закрывающий тег p (чье наличие в контексте XML обязательно). Для определения разницы между сериализациями, браузеры будут использовать значение MIME-типа. Любой документ, определенный как text/html , должен соответствовать требованиям HTML-сериализации. В случае же если MIME-тип имеет значение application/xhtml+xml , должны быть удовлетворены требования XML-сериализации.
Выбор подходящего типа сериализации возлагается на веб-мастера, т.к. ни один из двух возможных вариантов изначально не может считаться предпочтительным абсолютно во всех случаях.
«Мягкие» синтаксические правила, которые прощают мелкие ошибки. Благодаря этому, пользователи с меньшей вероятностью смогут увидеть сообщение от браузера о невозможности отображения документа (даже если ошибки в нем действительно присутствуют).
Удобный, лаконичный синтаксис, в котором можно опускать некоторые теги и значения ряда атрибутов.
Примечание переводчика:
многие из перечисленных преимуществ так же являются и недостатками. В частности, снижение жесткости синтаксических правил автоматически провоцирует порождение небрежного, «грязного» кода.
Преимущества применения XHTML-сериализации:
Жесткие синтаксические правила XML заставляют писать более качественную разметку, что часто облегчает дальнейшую работу с контентом.
Интеграция с другими основанными на XML стандартами (например, SVG и MathML).
Совместимость со стандартными средствами обработки XML (часто применяется при обработке и публикации материалов).
Содействие развитию стандарта
Не смотря на то, что работа над HTML 5 идет семимильными шагами, до ее завершения остается еще немалое количество времени (по сегодняшним оценкам потребуется еще 10-15 лет). В течении этого времени, отзывы со стороны веб-дизайнеров, разработчиков CMS и браузеров, а так же иных специалистов, остаются крайне актуальными для успешного развития проекта. Инициатива всех желающих внести свой вклад в развитие HTML 5 не только приветствуется, но и активно поощряется.
HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд кажутся противоречивыми, как будет обстоять дело в реальности – покажет время.
Синтаксис
HTML 5 будет иметь два синтаксиса – “custom” HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая “обработку ошибок”). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:
Example document
Example paragraph
XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML, а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:
Example document
Example paragraph
Кодировка символов
Для синтаксиса HTML разработчики могут использовать три способа установки кодировки: – на транспортном уровне. При использовании Content-Type HTTP заголовка, например. – используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования. – используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head. Обратите внимание, что для определения кодировки используется
Для синтаксиса XML разработчики должны руководствоваться правилами спецификаций XML.
Новые элементы
section
представляет часть документа или раздел
article
представляет независимую часть содержания для включения в документ статей
aside
представляет часть содержания, которая только частично связана с остальной страницей
header
представляет заголовок section
footer
– нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее
nav
представляет раздел документа, предназначенный для навигации
dialog
может использоваться для выделения диалогов:
figure
может использоваться для связи заголовка с медиа контентом:
audio
и video
для мультимедиа. Оба обеспечивают соответствующий API. Таким образом разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного API пользовательского агента. Вместе с этими элементами может быть использован source
, если есть возможность организовать параллельные потоки.
embed
используется для контента plugin’ов.
meter
– для представления единиц измерений.
time
– дата и/или время.
canvas
используется для динамической отрисовки графики.
command
представляет команду, которую может вызвать пользователь.
datagrid
– интерактивное представление списка типа “дерево” или табличных данных.
details
представляет дополнительную информацию, которую пользователь может получить по требованию.
datalist
вместе с новым атрибутом list
используется чтобы сделать combobox:
datatemplate
, rule
, и nest
обеспечивают механизм шаблонов (templating mechanism) для HTML.
event-source
используется для перехвата событий, посланных сервером.
output
представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
progress
представляет ход выполнения задачи, например, загрузки.
Атрибут type
элемента input
теперь имеет следующие новые значения:
datetime
datetime-local
date
month
week
time
number
range
email
Идея относительно этих новых типов состоит в том, что пользовательский агент может обеспечить интерфейс для таких объектов как календарь (выбор даты), интеграции с адресной книгой и предоставить серверу данные в определенном формате. Это дает определенные преимущества как пользователям, так и разработчикам, поскольку пользовательский ввод проверяется перед посылкой на сервер браузером. Это означает, что разработчикам нет необходимости расходовать ресурсы на проверку введенных данных, что, в свою очередь, приводит к сокращению времени ожидания ответа.
Новые атрибуты
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 приложений
Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными атрибутами: class
, dir
, id
, lang
, tabindex
и title
.
Появились также несколько новых глобальных атрибутов:
атрибут contenteditable
указывает, что элемент доступен для редактирования
contextmenu
может использоваться для указания на контекстное меню, созданное автором
draggable
может использоваться вместе с новым drag&drop API
irrelevant
указывает, что элемент еще или больше не актуален
Атрибуты для модели повторения (repetition model):
repeat
repeat-start
repeat-min
repeat-max
Отмененные элементы
Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:
basefont
center
strike
Следующие элементы не включенв в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности:
frame
frameset
noframes
Следующие элементы не включены, потому что использовались редко или они могут быть заменены другими элементами:
acronym
applet
замещен object
isindex
dir
замещен ul
Наконец noscript
остался только в синтаксисе HTML, поскольку его использование предполагает разбор с помощью HTML парсера.
Отмененные атрибуты
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
Кроме того, HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:
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()
для манипуляции классами элемента