HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд кажутся противоречивыми, как будет обстоять дело в реальности – покажет время.
Синтаксис
HTML 5 будет иметь два синтаксиса – “custom” HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая “обработку ошибок”). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:
Example paragraph
XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML, а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:
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
Идея относительно этих новых типов состоит в том, что пользовательский агент может обеспечить интерфейс для таких объектов как календарь (выбор даты), интеграции с адресной книгой и предоставить серверу данные в определенном формате. Это дает определенные преимущества как пользователям, так и разработчикам, поскольку пользовательский ввод проверяется перед посылкой на сервер браузером. Это означает, что разработчикам нет необходимости расходовать ресурсы на проверку введенных данных, что, в свою очередь, приводит к сокращению времени ожидания ответа.
Новые атрибуты
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() для манипуляции классами элемента
В статье кратко рассмотрены различия 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 >
- 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
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 >
Новые атрибуты
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
- center
- strike
- 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() для манипуляции классами элемента
HTML5 имеет несколько целей, которые отличает его от HTML4.
Согласованность в обработке неверных документов
Первичный - это согласованная, определенная обработка ошибок. Как вы знаете, HTML преднамеренно поддерживает "суп-тег" или способность писать неверный код и исправить его в действительный документ. Проблема в том, что правила для этого не записываются нигде. Когда новый поставщик браузеров хочет выйти на рынок, им просто нужно проверять неверные документы в разных браузерах (особенно IE) и реконструировать обработку ошибок. Если они этого не сделают, то многие страницы будут отображаться некорректно (оценки размещают примерно 90% страниц в сети как по крайней мере несколько искаженные).
Итак, HTML5 пытается обнаружить и кодифицировать эту обработку ошибок, чтобы разработчики браузеров могли стандартизировать и значительно сократить время и деньги, необходимые для постоянного отображения информации. Кроме того, долгое время после того, как HTML умер в формате документа, историки могут по-прежнему хотеть читать наши документы, и наличие полностью определенного алгоритма синтаксического анализа поможет в этом.
Улучшенные функции веб-приложений
Вторичной целью HTML5 является разработка способности браузера быть платформой приложений через HTML, CSS и Javascript. Многие элементы были добавлены непосредственно на язык, который в настоящее время (в HTML4) Flash или JS-хаки, такие как
Улучшенная семантика элементов
В HTML5 существует много других меньших усилий, таких как улучшенные семантические роли для существующих элементов ( и теперь фактически означает что-то другое, и даже и имеют неопределенную семантику это должно хорошо работать при анализе устаревших документов) и добавление новых элементов с полезной семантикой -
HTML5 привлёк к себе огромное внимание веб-разработчиков. И так отличия HTML5 от его предшественников.
Новые возможности этого стандарта предназначены для создания интерактивных веб-приложений с максимальным использованием мультимедийного контента, работы с программными интерфейсами и структурирования документов. язык интерактивный веб приложение
Структурные возможности HTML5 создают структуру веб-документа более простой и понятной, а код намного «чище». Вместо контейнеров div, использующихся в HTML 4.01 можно использовать такие теги как header «заголовок», nav «навигация», section «раздел документа», article «содержимое сайта», aside «содержимое сайта» и footer «подвал сайта».
Новые элементы позволяют лучше описывать верхний и нижние колонтитулы, блоки сайта, текста и другие части веб-сайта. Эти нововведения используются для генерации оглавления и организации более эффективной и простой навигации по веб-странице, не засоряя при этом код другими второстепенными тегами. Приведём примеры:
Пример 1. Вместо громоздкой записи HTML4.01:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,
в HTML5 это будет выглядеть гораздо короче:
.Пример 2. В HTML4 для создания заголовка необходим код:
Мой заголовок
текст
В HTML5 используется элемент Свой текст Как видим, код становится проще и понятнее. Мультимедийные возможности в HTML5 исключают использование Adobe Flash и других сторонних программ. Для добавления музыкальных и видео файлов можно воспользоваться любым браузером, поддерживающим HTML5, когда в HTML 4.0 и HTML 4.01 необходимо наличие дополнительных программ. Ввод данных в формах HTML5 стал намного безопасней, правильность данных контролируется непосредственно во время ввода, тогда, как в HTML 4 проверка правильности введённых данных осуществляется уже после отправки документа, что не создаёт определённые неудобства пользователям. Текст и изображение в HTML5 становятся единым целым, что заметно увеличивает количество возможностей и позволяет создавать весьма впечатляющие, красочные веб-сайты без сторонних скриптов. Анимации и графика. Здесь разработчики могут воспользоваться функцией Canvas, которая способна заменить Adobe Flash и подобные ему дополнительные программы. Появляется возможность разместить на своём сайте анимацию, графические элементы и даже небольшие игры, непосредственно на веб-сайте. Преимущества для конечного пользователя. Здесь произошёл ряд полезных изменений: Не требуется установка многочисленных сторонних программ. Совместимость HTML5 в отличие от своих предшественников, доработана. Он совместим не только на персональных компьютерах и ноутбуках, но ещё и с планшетами, смартфонами, современными моделями DVD плееров, телевизоров, консолей, которые обеспечивают доступ к интернет ресурсам. В HTML5 единый стандарт отображения контента, независимо от типа браузера. Лаклан Хант Оригинал статьи на английском: http://www.alistapart.com/articles/previewofhtml5 Иллюстрации: Кевин Корнелл Перевод: Влад Мержевич Сеть постоянно развивается. Новые и инновационные сайты создаются каждый день, расширяя границы HTML в каждом направлении. HTML4 был вокруг нас в течение почти десяти лет, и издатели ищут новые методы, чтобы обеспечить расширенную функциональность, которая сдерживается ограничениями языка и браузеров. Чтобы дать авторам больше гибкости и совместимости, сделать их сайты и приложения более интерактивными и захватывающими, HTML5 вводит и расширяет диапазон возможностей, включающий элементы форм, API, мультимедиа, структуры и семантики. Работа над HTML5 началась в 2004 году и в настоящее время осуществляется в рамках совместных усилий между W3C HTML WG и WHATWG . Многие ключевые игроки участвуют в работе W3C, в том числе представители четырех основных поставщиков браузеров: Apple, Mozilla, Opera и Microsoft, а также ряд других организаций и частных лиц со своими интересами и опытом. Заметьте, что спецификация еще находится в стадии разработки и довольно далека от завершения. Так что вполне возможно, что какой-либо функционал, описанный в этой статье, может измениться в будущем. Эта статья предназначена для краткого описания некоторых основных особенностей, существующих в нынешнем проекте. HTML5 вводит целый ряд новых элементов, которые упрощают структуру страниц. Большинство страниц на HTML4 содержат типовые элементы, такие как «шапка», «подвал» и колонки. Ныне, как правило, в коде документа они обозначаются с помощью элементов На рисунке показано типичное расположение двух колонок сверстанных с использованием Использовать элементы Элементы Заголовок
Структура