Новации HTML 5

В статье мы рассмотрим новшества и изменения HTML 5, и посмотрим, что из этого уже работает в новейших браузерах.

Новый доктайп и способ указания кодировки в HTML 5

В отличие от существующих громоздких доктайпов, объявление 5-ой версии кратко и лаконично:

Это связано с тем, что HTML 5 больше не является частью SGML, теперь это самостоятельный язык разметки.

Объявление кодировки в HTML 5 так же притерпело изменения. Выглядит оно теперь вот так:

<span><<span>meta</span><span> charset=<span>"UTF-8"</span></span>></span>

Новая структура в HTML 5

HTML 5 подразумевает, что страница всегда имеет структуру, сравнимую со структурой книг или XML документов. Обычно, у веб-страницы есть навигация, основной контент, второстепенный контент (чаще в сайдбаре), заголовки, футеры и так далее. Для каждого такого элемента в HTML 5 есть свои теги:

<section> — для каких-то частей страницы;
<header> — заголовок страницы;
<footer> — футер страницы;
<nav> — навигация;
<article> — статья или основной контент;
<aside> — дополнительный контент;
<figure> — определяет картинку, сопровождающую статью (типа как у нас к каждой статье).

Новые строчные элементы в HTML 5

Эти элементы определяют основные семантические объекты страницы:

<mark> — указывает на элемент, который взаимодействует с какой-то функцией;
<time> — выделяет дату или время;
<meter> — какие-либо метрические данные или характеристики;
<progress> — показывает процесс выполнения задачи (функции, например).

Новая поддержка динамичных страниц в HTML 5

HTML 5 создавался под динамичные страницы, поэтому в нем много возможностей для разработчиков:

контекстное меню — создание и использование контекстных меню внутри страниц;
аттрибут href больше не является обязательным, что позволяет использовать тег <a> для скриптов без необходимости выставлять якоря;
аттрибут async тега <script> — указывает браузеру, что загружать этот скрипт следует асинхронно; браузер не тормозит загрузку страницы, скрипт грузиться уже после загрузки страницы;
<details> — более подробная информация от каком-то элементе;
<datagrid> — создает таблицу, которая строится исходя из данных из базы или другого динамичного источника (какая-нибудь обновляемая статистика);
<menu> для создание системы меню;
<command> определяет действия, которые должны случиться при активации какого-то элемента.

Новые типы полей форм в HTML 5

HTML 5 по-прежнему поддерживает все основные типы полей форм, добавив при этом и некоторые новые:

datetime
datetime-local
date
month
week
time
number
range
email
url

Новые элементы

Вот лишь некоторые новые элементы, добавленные в HTML 5:

<canvas> — элемент, который позволяет вам рисовать внутри страницы, используя JavaScript; как вы знаете, многие современные js библиотеки и скрипты используют этот тег для графиков;
<video> позволит вам вставить видеоролик в страницу с помощью одного тега.
<audio> — для аудио.

При этом из HTML 5 исчезли некоторые теги

В новой спецификации больше нет некоторых тегов — некоторые из них сами по себе уже устарели и мало, кто их использует. Но, были так же удалены и некоторые довольно популярные теги. Вот полный список:

acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript
s
strike
tt
u

Что уже работает в браузерах

Как я уже сказал, многие браузеры решили не дожидаться официального выхода HTML 5 (как и CSS 3) и уже начали внедрять некоторые из описанных фич в последние версии своих продуктов.

Автор данной статьи - Администратор проекта для начинающих программистов (UProgram. ru), который носит ник webDoktor.

Отзывы и комментарии