HTML5 первые шаги
Хотите уже сейчас перевести свой сайт на 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
