Универсальный базовый шаблон для HTML5
Если вы работаете с HTML5, вам наверняка понадобиться универсальный шаблон, который вы могли бы использовать для большинства своих проектов. Сегодня мы рассмотрим некоторые элементы, которые используются в большинстве современных реализаций и выделим то, что может стать стартовой точкой для вас.
В этой статье мы рассмотрим возможный вариант и разберемся с некоторыми его элементами. Конечно, не стоит включать все, что вы знаете, во все проекты подряд, поэтому понимание назначения каждого элемента критически важно для адаптации шаблона под конкретный проект.Итак, начнем:
<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>The HTML5 Herald</title>
<meta name=\"description\" content=\"The HTML5 Herald\">
<meta name=\"author\" content=\"SitePoint\">
<link rel=\"stylesheet\" href=\"css/styles.css?v=1.0\">
<!--[if lt IE 9]>
<script src=\"http://html5shiv.googlecode.com/svn/trunk/html5.js\"></script>
<![endif]-->
</head>
<body>
<script src=\"js/scripts.js\"></script>
</body>
</html>Давайте рассмотрим некоторые ключевые элементы этого стартового варианта.
Doctype
Первое, что мы указываем в разметке указание на тип документа или Doctype. Это самый простой способ дать понять браузеру или другому парсеру, какой именно документ вы ему передали. В этом случае мы явно указываем, что передаем HTML-документ. Doctype должен быть указан первой строкой любого файла. Раньше объявление типа документа выглядело несколько более громоздко.
Для XHTML 1.0:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">Для HTML4:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">Несмотря на то, что использование этой довольно длинной строки не влечет за собой негативных последствий (кроме пары лишних байтов, передаваемых пользователю), HTML5 значительно ее сократил, сделав более удобной и легко запоминающейся. Все, что вам теперь нужно, это:
<!doctype html>Doctype может быть объявлен в верхнем регистре, в нижнем регистре, с использованием верхнего и нижнего регистра, как угодно. Несмотря на то, что сейчас эта разметка ассоциируется именно с HTML5, будущие стандарты также должны ее поддерживать.
Html
Следующий элемент это html, который не претерпел изменений после появления HTML5. В этом примере мы добавили атрибут lang, который явно указывает на язык содержимого нашей страницы. Явное указание этого атрибута до сих пор сохранилось в практике верстки, хотя перестало быть обязательным.
Head
Первый тег, указанный внутри этого элемента, должен указывать на кодировку, которая используется в документе. Этот тег тоже перестал быть обязательным, но его использование считается хорошим тоном. В предыдущих версиях он выглядел как-то так:
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">HTML5 несколько сокращает запись:
<meta charset=\"utf-8\">Почти во всех случаях utf-8 это именно та кодировка, которую следует использовать. Более подробную информацию вы можете найти в спецификации W3C.
Чтобы быть уверенным в том, что все браузеры получат указание об использованной кодировке, оно должно быть среди первых 512 символов документа. Также оно должно быть размещено ранее, чем появится основной контент. Поэтому давайте остановимся на таком варианте записи и рассмотрим следующий элемент.
<title>The HTML5 Herald</title>
<meta name=\"description\" content=\"The HTML5 Herald\">
<meta name=\"author\" content=\"SitePoint\">
<link rel=\"stylesheet\" href=\"css/styles.css?v=1.0\">Title является, пожалуй, единственным обязательным элементом в Head и сообщает парсеру заголовок страницы. Мета-теги достойны отдельной статьи. В базовом шаблоне мы указали только некоторые из них, но вам придется тщательно проанализировать проект, чтобы выбрать все, необходимые вам.Важная часть приведенной разметки подключение стилей с помощью элемента link. Согласно современной спецификации вам достаточно атрибутов href и rel.
Обеспечиваем совместимость
Следующий элемент требует короткого вступления. Дело в том, что в HTML5 появились несколько новых элементов. Кто-то может предположить, что при их использовании могут возникнуть проблемы в старых версиях браузера, но фактически это не так. По сути, большинству браузеров все равно, какие теги вы используете. Вы можете указать свой собственный тег и присвоить ему определенные свойства с помощью CSS.
Теоретически, у вас не должно возникнуть проблем, но если ваш документ будет открываться в Internet Explorer ниже версии 9, могут возникнуть некоторые сложности. Дело в том, что эти браузеры не распознают неизвестные элементы , и , как следствие, не позволяют изменять их внешний вид и поведение. Это касается всех элементов, которые были введены в спецификацию уже после того, как эти браузеры были разработаны.
Хорошая новость в том, что большинство людей все-таки используют IE9+. Однако для определенных проектов может стать необходимым поддержка IE8, поэтому вам придется принять меры для того, чтобы ваша верстка не разваливалась.
К счастью, существует довольно простое решение. Необходимо подключить так называемый HTML5 shiv с помощью элемента script, обернутого в условные комментарии. Условные комментарии это фирменная технология, которая используется в Internet Explorer. Они позволяют указать на необходимость использования скриптов или стилей при определенных условиях. Следующий код говорит браузеру о том, что скрипт должен подключаться только если используется IE8 и ниже:
<!--[if lt IE 9]>
<script src=\"http://html5shiv.googlecode.com/svn/trunk/html5.js\"></script>
<![endif]-->Если вы используете библиотеки, которые взаимодействуют с новыми элементами или свойствами, вам также стоит указывать их именно в таком формате, так как их подключение будет излишним для старых версий браузера.
Конечно, можно возразить, что существуют пользователи, которые не только используют старые версии IE, но и отключают JavaScript. Также существует общепринятое правило, которое утверждает, что сайт должен выполнять необходимые функции, даже если пользователь отключил скрипты. Но не беспокойтесь. Многочисленные исследования показывают, что количество пользователей, отключающих скрипты, ничтожно мало, особенно, если речь идет о количестве пользователей, которые используют старые IE и отключают JavaScript.
Остальное уже история
Взгляните на стартовый шаблон. Там вы увидите открывающий и закрывающий тег body, а также вторую часть тег html. Также у нас есть указание на файл JavaScript внутри элемента script. Как мы уже говорили, этот тег не требует указания значения атрибута type. Если вы когда-нибудь использовали XHTML, возможно вы помните, что скрипт подключался приблизительно так:
<script src=\"js/scripts.js\" type=\"text/javascript\"></script>JavaScript стал основным языком для скриптов, поэтому, если вы не указываете обратного, парсер предполагает, что подключен именно JavaScript-файл. Поэтому для подключения скрипта достаточно:
<script src=\"js/scripts.js\"></script>