HTML5 первые шаги

html5.jpegХотите уже сейчас перевести свой сайт на HTML5? Нет ничего проще! Открываете страницу в коде и меняете тип документа (DOCTYPE) на вот такую изячную конструкцию:

<!DOCTYPE html>

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

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

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

И, не отходя от кассы, сразу же заменим длинное объявление кодировки сайта на вот такую:

<meta charset=utf-8>

Красиво, черт! Однако пытливый глаз тру-верстальщика сразу же отметит вопиющее нарушение: «Где, черт побери, кавычки?!» Так вот, уважаемые, HTML5 настолько суров лоялен, что в плане синтаксиса возможна ограниченная анархия. Можно кавычки ставить, а можно и нет, можно слово meta написать хоть строчными, хоть прописными буквами, хоть даже так MeTa. Главное — чтобы вы сами потом не запутались.

Более того, HTML5 допускает даже такие невинные шалости, как полное отсутствие привычных и незыблемых столпов <html>, <head> и <body>. Не верите? Наберите в текстовике следующий код, сохраните страницу и проверьте ее валидатором:

<!DOCTYPE html>
<meta charset=utf-8>
<title>Аз есмь тру-сайт</title>
<p>Проще некуда</p>

Это, конечно, жесть и настолько увлекаться не стоит. Однако данный опыт показывает, что новые браузеры и так прекрасно осведомлены, что перед ними веб-страница, и данные обязательные теги есть по-умолчанию. К примеру, если в Опере использовать отладочную тулзу Opera Dragonfly, то можно обнаружить, что браузер сам подставляет недостающие теги (при просмотре кода через Ctrl+U этого не увидеть).

Идем дальше. Следующее приятное новшество — это, опять же, упрощенное определение языка страницы:

<html lang=ru>

Раньше конструкция выглядела чаще всего так:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

Упрощению также подверглись т.н. ссылочные отношения (link relations) или rel. Теперь нет необходимости прописывать для них тип (type=" "):

<link rel="stylesheet" href="style.css" />

вместо:

<link rel="stylesheet" href="style.css" type="text/css" />

поскольку для stylesheet и не бывает других типов кроме type="text/css".

Хотя это доступно не для всех rel. К примеру, с rel="alternate" так поступать нельзя, ибо он по-определению не однозначен.

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

<link rel="stylesheet" href="style.css">

Это не будет ошибкой. Но если вы привыкли писать как раньше, то можете оставить.

На сегодня все. В следующий раз рассмотрим по-настоящему новые тэги в HTML5 и поговорим подробнее о семантике.

HTML5 Введение
HTML5 первые шаги
HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
HTML5 новые тэги time, figure, video, audio, canvas

25.01.2012

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: