Все вы наверняка слышали, что сейчас идет работа над новой спецификацией HTML, а именно ее пятой версией. Впервые ее черновики стали доступны широкой общественности в конце января 2008. С тех пор работа над официальным релизом продолжается с удвоенным рвением, однако официального выхода ждать еще пару лет.
Однако, многие разработчики браузеров начинают внедрять поддержку некоторых вещей из HTML 5 уже сейчас (Google Chrome), так что, думаю, будет полезно ознакомиться с нововведениями. В этой статье, я бы хотел рассмотреть новшества и изменения HTML 5, и посмотрим, что из этого уже работает в новейших браузерах.
Новый доктайп и способ указания кодировки
В отличие от существующих громоздких доктайпов, объявление 5-ой версии кратко и лаконично:
<!doctype html>Это связано с тем, что HTML 5 больше не является частью SGML, теперь это самостоятельный язык разметки.
Объявление кодировки в HTML 5 так же претерпело изменения. Выглядит оно теперь вот так:
<meta charset="UTF-8">Новая структура
HTML 5 подразумевает, что страница всегда имеет структуру, сравнимую со структурой книг или XML документов. Обычно, у веб-страницы есть навигация, основной контент, второстепенный контент (чаще в сайдбаре), заголовки, футеры и так далее. Для каждого такого элемента в HTML 5 есть свои теги:
<section> — для каких-то частей страницы;
<header> — заголовок страницы;
<footer> — футер страницы;
<nav> — навигация;
<article> — статья или основной контент;
<aside> — дополнительный контент;
<figure> — определяет картинку, сопровождающую статью.
Новые строчные элементы
Эти элементы определяют основные семантические объекты страницы:
<mark> — указывает на элемент, который взаимодействует с какой-то функцией;
<time> — выделяет дату или время;
<meter> — какие-либо метрические данные или характеристики;
<progress> — показывает процесс выполнения задачи (функции, например).
Новая поддержка динамичных страниц
HTML 5 создавался под динамичные страницы, поэтому в нем много возможностей для разработчиков:
контекстное меню — создание и использование контекстных меню внутри страниц;
атрибут href больше не является обязательным, что позволяет использовать тег <a> для скриптов без необходимости выставлять якоря;
аттрибут async тега <script> — указывает браузеру, что загружать этот скрипт следует асинхронно; браузер не тормозит загрузку страницы, скрипт грузиться уже после загрузки страницы;
<details> — более подробная информация от каком-то элементе;
<datagrid> — создает таблицу, которая строится исходя из данных из базы или другого динамичного источника (какая-нибудь обновляемая статистика);
<menu> — для создание системы меню;
<command> — определяет действия, которые должны случиться при активации какого-то элемента.
Новые типы полей форм
HTML 5 по-прежнему поддерживает все основные типы полей форм, добавив при этом и некоторые новые:
datetime
datetime-local
date
month
week
time
number
range
email
url
Новые элементы
Вот лишь некоторые новые элементы, добавленные в HTML 5:
<canvas> — элемент, который позволяет вам рисовать внутри страницы, используя JavaScript; как вы знаете, многие современные js библиотеки и скрипты используют этот тег для графиков;
<video> позволит вам вставить видеоролик в страницу с помощью одного тега.
<audio> — для аудио.
Исчезнувшие теги
В новой спецификации больше нет некоторых тегов — некоторые из них сами по себе уже устарели и мало, кто их использует. Но, были так же удалены и некоторые довольно популярные теги. Вот полный список:
acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript
s
strike
tt
u
Валидация
И не забываем про валидацию – теперь доступен – HTML 5 Validator.
В заключение
Если эта тема Вас заинтересовала, вот пару полезных ссылок:
HTML 5 Visual Cheat Sheet by Woork
Yes, You Can Use HTML 5
Ниже в исходниках, Вы сможете найти таблицу основных тегов используемых
Ниже в исходниках, Вы сможете найти таблицу основных тегов используемых в HTML 5.
Источник: http://webtyz.ru/view_lessons.php?id=35
