Новые возможности гипертекстовой разметки в HTML 5.0

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

HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript).

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

В HTML5 добавлено много новых синтаксических особенностей. Например, элементы <video>, <audio>, <header> и <canvas> такие же как и в SVG. Эти особенности разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в сети Веб без обращения к плагинам и API. Другие новые элементы, такие как <section>, <article>, <header> и <nav> разработаны для того, чтобы представлять более структурировано семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя при этом некоторые из ранее существоваших элементов и атрибутов были удалены. Некоторые элементы, например, <a>, <menu> и <cite> были изменены, переопределены или стандартизированы.

API и DOM являются фундаментальными частями спецификации HTML5.

Для того чтобы спецификация получила статус "W3C рекомендована", необходимы две полностью законченные и полностью взаимодействующие реализации. При этом многие части спецификации уже стабильны и могут быть реализованы в программных продуктах.

В дополнение к определению разметки HTML5 устанавливается сценарный интерфейс прикладного программирования (API). Существующий интерфейс DOM расширен.

Также добавлены новые API, например:

1. элемент Canvas для непосредственного метода рисования в 2D.
2. контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео;
3. хранение баз данных off-line;
4. редактирование документа;
5. перетаскивание объектов на веб-странице (drag-and-drop);
6. управление историей браузера;
7. тип MIME и регистрация обработчика протокола;
8. поддержка микроданных.
   1. Хотя, что HTML5 может обеспечивать анимацию внутри веб-страницы, это утверждение требует уточнения. Для поддержки такой возможности необходимо привлечение JavaScript или CSS 3. Новый элемент управления Canvas служит для отображения графики на виртуальном "полотне". Описание элемента дается в следующем виде:

      <canvas height="значение высоты" 
      			width="значение ширины">
      </canvas>
      

      Собственно построение графики реализуется средствами JavaScript через специальный API, разработанный для элемента Canvas.
   2. Отдельные элементы веб-страницы и текста можно перемещать в окне веб-браузера с помощью мыши. Эта возможность реализована с помощью функции перетаскивания (drag-and-drop) через атрибуты элементов HTML5. По умолчанию можно перетаскивать ссылки, выделенные текстовые фрагменты и изображения.
   3. К существовавшим ранее элементам управления веб-форм добавились новые элементы: селектор даты и времени, элементы задания числового диапазона, цвета, адреса электронной почты, URL, номера телефона. Появились также новые атрибуты у элементов управления.
   4. Пользователь может править содержимое элементов HTML5. Для этого достаточно атрибуту contenteditable присвоить логическое значение true.
   5. Объект history позволяет перемещаться вперед и назад по состояниям веб-страниц, которые просматривались в веб-браузере. Пользователь также может помещать текстовые данные в предысторию текущей страницы для последующего их восстановления.
   6. Используя простой код JavaScript и HTML5, можно сохранять данные с текущей веб-страницы для последующего их восстановления даже после полной ее перезагрузки. Эти данные могут сохраняться глобально в текущем сеансе (в течение 15 минут, при отсутствии активности пользователя), либо локально в самом веб-браузере.

Семантическая разметка в HTML5

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

В HTML5 появились новые элементы для сруктурирования веб-страницы:

• header - содержимое верхней (начальной) части страницы или ее секции
• footer - содержимое нижней (завершающей) части страницы или ее секции
• section - секция веб-страницы
• article - содержимое внешней статьи
• aside - связанное содержимое или фрагмент
• nav - навигационные ссылки

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

HTML5 вводит не только новые семантические элементы, но и новые упрощенные способы поиска элементов в DOM-модели страниц.

Ранее использовались следующие методы JavaScript, предназначенные для поиска элементов:

• getElementById - возвращение элемента с указанным значением атрибута id
• getElementsByName - возвращение всех элементов с атрибутами name, имеющиюми указанное значение
• getElementsByTagName - возвращение всех элементов, имя дескриптора которых соответствует указанному имени тега.

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

К сожалению, не все (или не в полной мере) из новшеств спецификации HTML5 на сегодняшний день поддерживаются веб-браузерами.

XHTML5 - это, по-сути, XML-сериализация языка HTML5. Документы XML должны быть снабжены нотацией XML Internet media type, например, application/xhtml+xml или application/xml.

XHTML5 требует соблюдения строгого и правильно оформленного синтаксиса XML. Выбор между HTML5 и XHTML5 сводится к выбору типа MIME содержимого. В HTML5 и XHTML5 doctype html необязателен и может быть просто пропущен.

Спецификация HTML5 предъявляет определенные требования как к клиентским приложениям (браузерам), так и к документам.

Документы могут не всегда содержать корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM).

В старых версиях браузеров новые теги HTML5 будут игнорироваться.

Отличия HTML5 от HTML 4.01 и XHTML 1.x:

• Новые правила синтаксического анализа.
• Возможность использовать встроенные SVG и MathML в text/html.
• Новые элементы: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section , source, summary, time, video, wbr.
• Новые типы средств управления за формой: dates and times, email, url, search, number, range, tel, color.
• Новые атрибуты: charset (в meta), async (в script).
• Глобальные атрибуты, которые могут быть применены ко всем элементам: id, tabindex, hidden, data-* (пользовательские атрибуты данных).
• Элементы, которые будут исключены: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt.