Что принесет нам — HTML 5 ?

Все вы наверняка слышали, что сейчас идет работа над новой спецификацией 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

Share