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 может использоваться для выделения диалогов:

Costello

Look, you gotta first baseman?

Abbott

Certainly.

Costello

Who"s playing first?

Abbott

That"s right.

Costello

When you pay off the first baseman every month, who gets the money?

Abbott

Every dollar of it.

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

Example

• 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() для манипуляции классами элемента

В статье кратко рассмотрены различия html5 и html 4.
Синтаксис, кодировка символов, новые элементы, новые атрибуты, API. Также будуn рассмотрены отменённые атрибуты и ряд значительных изменений.

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

Синтаксис

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

01

03 < head >

04 < title >Example document

05

06 < body >

07 < p >Example paragraph

08

09

Кодировка символов

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

• 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

• 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() для манипуляции классами элемента

По мотивам

HTML5 имеет несколько целей, которые отличает его от HTML4.

Согласованность в обработке неверных документов

Первичный - это согласованная, определенная обработка ошибок. Как вы знаете, HTML преднамеренно поддерживает "суп-тег" или способность писать неверный код и исправить его в действительный документ. Проблема в том, что правила для этого не записываются нигде. Когда новый поставщик браузеров хочет выйти на рынок, им просто нужно проверять неверные документы в разных браузерах (особенно IE) и реконструировать обработку ошибок. Если они этого не сделают, то многие страницы будут отображаться некорректно (оценки размещают примерно 90% страниц в сети как по крайней мере несколько искаженные).

Итак, HTML5 пытается обнаружить и кодифицировать эту обработку ошибок, чтобы разработчики браузеров могли стандартизировать и значительно сократить время и деньги, необходимые для постоянного отображения информации. Кроме того, долгое время после того, как HTML умер в формате документа, историки могут по-прежнему хотеть читать наши документы, и наличие полностью определенного алгоритма синтаксического анализа поможет в этом.

Улучшенные функции веб-приложений

Вторичной целью HTML5 является разработка способности браузера быть платформой приложений через HTML, CSS и Javascript. Многие элементы были добавлены непосредственно на язык, который в настоящее время (в HTML4) Flash или JS-хаки, такие как ,

Улучшенная семантика элементов

В HTML5 существует много других меньших усилий, таких как улучшенные семантические роли для существующих элементов ( и теперь фактически означает что-то другое, и даже и имеют неопределенную семантику это должно хорошо работать при анализе устаревших документов) и добавление новых элементов с полезной семантикой -

,

,

,

или

, что сделает структуру вашего документа более интуитивной.

Люди, плохо знакомые со сферой веб-дизайна, часто слышат слово “разметка” и задаются вопросом, что оно означает и как отличается от более широко известного термина “код”. В основном язык разметки предназначен для обработки, определения и представления информации о тексте; теги стилей и текстовые аннотации записываются в файлах стилей, чтобы упростить работу с текстом для компьютера. Исторически сложилось, что термин “разметка” произошел от английского marking-up , а сам процесс от manuscript marking-up – процесса разметки рукописи перед отдачей ее в печать. Здесь речь пойдет о наиболее часто используемом языке разметки – HTML. Несколько лет назад для этого языка было выпущено обновление под названием HTML5. В этом руководстве мы расскажем, что такое HTML5 и поведаем о различиях между HTML и HTML5.

Что такое HTML?

HTML можно назвать основным языком Всемирной паутины. Большинство веб-страниц, размещенных в Интернете, написаны в какой-либо из вариаций HTML. С помощью него разработчики определяют то, как мультимедиа, текст или гиперссылки будут отображаться среди другого контента в браузере. Начиная от элементов, которые устанавливают связи с вашим документом (гипертекстом), до элементов которые делают эти документы интерактивными (например формы) – все это является составными частями HTML.

Стандарт HTML был разработан W3C или Консорциумом Всемирной Паутины в 1997 году. В HTML для определения структуры текста используются теги; теги и элементы выделяются с использованием символов < и >. Вот лишь некоторые из примеров для ранее упомянутых тегов – это заголовки, таблицы, абзацы и т. д. В свою очередь, браузеры отвечают за визуализацию содержимого страницы с помощью этих тегов. HTML не был единственным стандартом веб-разработки. В первые дни развития Интернета все теги контента и стили присутствовали на одном гигантском, громоздком (и довольно сложном) языке. Со временем W3C пришла к решению о необходимости разделения контента и стиля страницы; Это привело к созданию таблиц стилей или CSS. В настоящее время теги, которые используются для определения стиля текста (например FONT), нежелательны и почти не используются, на их место пришли таблицы стилей и только теги определения содержимого (например H1) по-прежнему составляют ядро ​​HTML.

С течением времени в HTML было много обновлений, и в настоящее время его новейшей версией является HTML5. HTML5, конечно прежде всего является языком разметки, но он приобрел множество функций в отличии от HTML и устранил некоторые из строгостей, присутствовавших в XHTML. Хотя HTML5 обновляется практически каждый день, однако новых выпущенных пронумерованных выпусков нет. Основным различием между HTML и HTML5 может стать то, что ни аудио, ни видео не являются составной частью HTML, тогда как они оба могут рассматриваться как неотъемлемые части HTML5.

Чтобы полностью ответить на вопрос что такое HTML, нужно затронуть и этапы его развития. Так как с течением времени он неоднократно изменялся.

Единственной постоянной вещью в области информационных технологий является то, что периодические обновления и изменения неизбежны. Ни один язык не может избежать обновлений или новых выпусков. HTML не является исключением. HTML5 был выпущен с целью улучшения работы Всемирной паутины как для разработчиков, так и для обычных пользователей. Как уже упоминалось, самым большим преимуществом, которое имеет HTML5 над своим ненумерованным предшественником, является то, что у него есть поддержка аудио и видео высокого уровня, которая не была частью спецификации в предыдущих HTML. Другие различия между HTML и HTML5:

• SVG, canvas и другая виртуальная векторная графика поддерживаются в HTML5, тогда как в HTML использование векторной графики стало возможным только при использовании его в сочетании с различными технологиями, такими как Flash, VML, Silver-light и т.д.
• HTML5 использует базы данных SQL и кеш приложений для временного хранения данных, тогда как в HTML для этого используется только кэш браузера.
• Еще одно отличие между HTML и HTML5, о котором стоит упомянуть: первый не позволяет запуск JavaScript в коде (вместо этого он работает в потоке интерфейса браузера), тогда как последний обеспечивает полную поддержку JavaScript для запуска в фоновом режиме.
• HTML5 не основан на SGML, и это позволяет ему иметь улучшенные правила синтаксического анализа, которые обеспечивают улучшенную совместимость.
• В HTML5, в тексте могут использоваться встроенные MathML и SVG, тогда как это невозможно в HTML.
• Некоторые из устаревших элементов были полностью удалены: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
• HTML5 поддерживает новые виды элементов управления, к примеру, dates and times, email, number, range, tel, url, search и т.д.
• В HTML появилось много новых элементов. Вот некоторые из самых важных: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

Основные преимущества HTML5 для разработчиков

HTML5 предоставляет для разработчиков больше гибкости при разработке дизайна сайтов, и в этой сфере есть значительные улучшения, о которых стоит упомянуть:

1. Постоянная обработка ошибок:

Большинство браузеров поддерживают парсинг структурно или синтаксически неправильного HTML кода, но до недавнего времени для этого не было стандартного процесса. Это означает, что разработчикам новых браузеров необходимо производить тесты неверных HTML документов для создания более улучшенного процесса обработки ошибок. Постоянная обработка ошибок в HTML5 сыграла в этом процессе огромное значение.

Улучшенные алгоритмы парсинга, которые используются в HTML5 имеют неоценимые преимущества. Исследования показывают, что около 90% сайтов могут содержать некорректно написанный код, поэтому очень важно обрабатывать эти ошибки. Кроме того, присущая HTML5 обработка ошибок сохраняет разработчикам много денег и массу времени.

1. Улучшенная семантика для элементов:

Для упрощения и улучшения понимания кода были внесены улучшения в семантические роли различных существующих элементов. Section, article, nav и header – это новые элементы, которые заменили большинство из ныне устаревших div элементов. Это сделало процесс обработки ошибок менее сложным.

1. Расширенная поддержка функций веб-приложений:

Одной из главных целей HTML5 было создание возможности функционирования браузеров в качестве платформы для приложений. Веб-сайты в прошлом были намного менее сложными, но со временем громоздкость возрастала. HTML5 предоставляет разработчикам расширенный контроль над производительностью своих сайтов. Раньше разработчикам приходилось использовать обходные пути, поскольку многие серверные технологии и браузерные расширения отсутствовали. Теперь, при использовании HTML5 нет смысла использовать какие-либо JS или Flash расширения (как это было в HTML4), поскольку в HTML5 присутствуют элементы, которые обеспечивают все эти функции.

1. Создание мобильных сайтов стало проще:

Даже сегодня, создание мобильной версии сайта, это головная боль для разработчика. Увеличение популярности смартфонов в последние десятилетия создало необходимость в улучшении стандартов HTML. Сегодня пользователи хотят иметь доступ к веб-ресурсам в любое время и с помощью любого устройства, что накладывает определенные обязательства на разработчиков. HTML5 сделал в этом плане значительные улучшения, благодаря тому, что код HTML5 теперь лучше поддерживается маломощными электронными устройствами, такими как смартфоны и планшеты.

1. Элемент canvas:

Одной из самых обсуждаемых особенностей HTML5 является элемент . Внедрение этого уникального тега произвело огромное влияние на Adobe Flash. Несмотря на то, что многие сайты до сих пор используют Flash, все больше людей склоняются к использованию HTML5, именно поэтому есть основание полагать, что Flash в ближайшем будущем полностью устареет.

Используя элемент canvas разработчики могут рисовать с помощью скриптов (например JavaScript) графические изображения с применением различных цветов. Стоит упомянуть, что canvas это обычный графический контейнер и для показа изображения необходимо выполнение скрипта. Вот пример использования JavaScript в сочетании с canvas:

var c = document.getElementById(“TestCanvas”); var context = c.getContext(“2d”); context.fillStyle = “#FF0000”; context.fillRect(0,0,140,75);

1. Элемент m enu :

Недавно добавленные элементы

и являются составными частями интерактивных элементов, однако, они не очень популярны в сообществе разработчиков. Несмотря на это, эти два элемента могут быть использованы для обеспечения более лучшей интерактивности на странице.

Тег

используется для простоты предоставления команд меню на мобильных приложениях и приложениях рабочего стола. Здесь показано возможное применение тега :

Hello!

1. Настраиваемые атрибуты данных :

Добавление пользовательских атрибутов было возможно и до появления HTML5, но оно было связано с определенным риском, к примеру, в HTML4 пользовательские атрибуты могли приводить к остановке рендера страницы или что еще хуже, могли стать причиной неправильной работы документа. Атрибут data-* в HTML5 поставил точку в решении этой часто встречающейся проблемы. Этот атрибут имеет несколько предназначений, но основной целью его введения было хранение дополнительной информации о разных элементах. Теперь, благодаря этому атрибуту могут быть включены пользовательские данные, что дает разработчикам больше возможностей сделать привлекательные и эффективные страницы, без лишних запросов на сервер или вызовов Ajax.

1. (Возможное) прощание с Cookies:

Поддержка локального хранилища стала важным дополнением к HTML5. До появления HTML5, если разработчики хотели хранить что-либо на стороне пользователя, им приходилось использовать файлы cookie. Однако файлы cookie могут содержать лишь небольшой объем данных (не говоря уже о том, что все их ненавидят), это прибавило добавлению объекта localStorage в HTML5 еще больше преимуществ. Объект localStorage является частью глобального пространства имен и при использовании скриптов может быть доступен из любого места.

Шпаргалка HTML5

Если вы еще не знаете что такое HTML5 и с чем его едят, шпаргалка может быть отличным подспорьем при его изучении. Используйте приведенную ниже таблицу стилей HTML, для более продуктивного начала работы с HTML. Эта шпаргалка показывает наиболее часто используемые теги HTML.

Преимущества HTML5 для обычного пользователя

HTML5 привел к сдвигу устоявшейся модели программирования как для разработчиков, так и для обычных пользователей. Приведем примеры нескольких преимуществ для обычных пользователей:

1. Мобильные браузеры теперь работают более стабильно, чем стандартные приложения. До появления HTML5 ситуация была иная.
2. Сегодня ставка на адаптивные сайты (дружелюбные к мобильным устройствам) очень высока, так как почти 30 процентов пользователей мобильных устройств не хотят загружать специальные приложения. Это стало еще одним преимуществом HTML5, к примеру, если пользователь хочет использовать услуги компании, но не хочет загружать специальное приложение, он может просто зайти на сайт компании, чтобы сделать это.
3. Искоренение необходимости использования Adobe Flash позволяет разработчикам обеспечить более эстетичный пользовательский интерфейс. Использование JavaScript и MPEG4 в сочетании с HTML5 сделало жизнь пользователей намного лучше.
4. Возможность поддержки собственных аудио и видео элементов означает, что пользователям не придется загружать дополнительные плагины для просмотра мультимедиа на вашем сайте. Поддержка мультимедиа, предоставляемая HTML5, является одной из самых значимых причин, по которой он используется намного чаще чем HTML.

Заключение

Вряд ли новая версия любого языка может быть хуже предшественника и HTML5 не является исключением. С каждым годом разработчики узнают новые способы использования HTML5. Кроме того, ожидается, что в ближайшее время изменение затронет и социальные сети.

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

Лаклан Хант

Оригинал статьи на английском: http://www.alistapart.com/articles/previewofhtml5

Иллюстрации: Кевин Корнелл

Перевод: Влад Мержевич

Сеть постоянно развивается. Новые и инновационные сайты создаются каждый день, расширяя границы HTML в каждом направлении. HTML4 был вокруг нас в течение почти десяти лет, и издатели ищут новые методы, чтобы обеспечить расширенную функциональность, которая сдерживается ограничениями языка и браузеров.

Чтобы дать авторам больше гибкости и совместимости, сделать их сайты и приложения более интерактивными и захватывающими, HTML5 вводит и расширяет диапазон возможностей, включающий элементы форм, API, мультимедиа, структуры и семантики.

Работа над HTML5 началась в 2004 году и в настоящее время осуществляется в рамках совместных усилий между W3C HTML WG и WHATWG . Многие ключевые игроки участвуют в работе W3C, в том числе представители четырех основных поставщиков браузеров: Apple, Mozilla, Opera и Microsoft, а также ряд других организаций и частных лиц со своими интересами и опытом.

Заметьте, что спецификация еще находится в стадии разработки и довольно далека от завершения. Так что вполне возможно, что какой-либо функционал, описанный в этой статье, может измениться в будущем. Эта статья предназначена для краткого описания некоторых основных особенностей, существующих в нынешнем проекте.

Структура

HTML5 вводит целый ряд новых элементов, которые упрощают структуру страниц. Большинство страниц на HTML4 содержат типовые элементы, такие как «шапка», «подвал» и колонки. Ныне, как правило, в коде документа они обозначаются с помощью элементов

, описывая каждый атрибутом id или class .

На рисунке показано типичное расположение двух колонок сверстанных с использованием

с атрибутами id и class. Макет содержит шапку, подвал и горизонтальную навигацию ниже заголовка. Основное содержание включает статью и боковую панель справа (сайдбар).

Использовать элементы

правильно, потому что в HTML4 не хватает нужной семантики для описания этих частей более конкретно. HTML5 решает эту проблему путем внедрения новых элементов для представления каждого из этих разных разделов.

Элементы

могут быть заменены новыми элементами

,