Отличия HTML 5 от HTML 4

HTML 5: отличия от HTML 4

HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд кажутся противоречивыми, как будет обстоять дело в реальности - покажет время.

Синтаксис

HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок"). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:

<meta charset="UTF-8">
<title>Example document >
<p>Example paragraph p>

 

 

 

XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML, а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:

Для синтаксиса 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.

  14dialog>
• figure может использоваться для связи заголовка с медиа контентом:
   

  1<figure>

  2<video src=ogg>…video>

  3<legend>Examplelegend>

  4figure>
• 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">

  7datalist>
• datatemplate, rule, и nest обеспечивают механизм шаблонов (templating mechanism) для HTML.
• event-source используется для перехвата событий, посланных сервером.
• output представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
• progress представляет ход выполнения задачи, например, загрузки.
• Атрибут type элемента input теперь имеет следующие новые значения:
  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • 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 приложений

Несколько атрибутов из 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
• big
• center
• font
• s
• strike
• tt
• u

Следующие элементы не включенв в 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
•