Данный материал является переводом статьи Louis Lazaris, известного автора, который, в том числе, пишет статьи и для Smashingmagazine.

Я буду первым, кто признается, что HTML5 Boilerplate вызвал у меня фонтан эмоций.

С одной стороны, пугающее количество информации и нароботок, которые были собраны в одном месте на благо разработчиков (front-end developers). Так много, что я задался вопросом, а что я вообще делаю в этой индустрии, настолько я показался себе отсталым.

Но с другой стороны, я впечатлён тем, как много надо изучить, и как много крупиц я могу добавить в мой инструментальный набор. Так что, я не могу дождаться момента, когда зароюсь в книги и увеличу свой багаж знаний. Легче на душе и от того, что другие чувствуют то же, что и я. Но вернемся к теме.

В связи с тем, что в Boilerplate есть много такого, что я не совсем полностью понимаю, а также, того, чем я вероятнее всего в будущем не воспользуюсь, то я решил сделать свой собственный небольшой HTML5 шаблон, который станет моим собственным «rock-solid» по умолчанию. Давайте будем откровенны, Boilerplate это не только  HTML5, а также базовая среда для создания убийственных cross-platform и высокоэффективных веб-приложений. Иногда мне не нужно все это. А мне необходимо, что-то более базисное.

Код

Мое творение не предназначено для конкурирования с другими шаблонами. Это простой шаблон, который сфокусирован на HTML5 с базовым CSS reset (обнулением стилей) и несколькими прикрепленными скриптами, включая  jQuery и Modernizr. А также исходный JavaScript файл с базовыми JavaScript шаблоном, которым я пользуюсь последнее время.
Для вашего старта, в дополнение к базовому HTML5 коду, я также включил исчерпывающие комментарии и некоторые обучающие материалы, которые помогут использовать новые теги, а так же измененные теги в HTML5. Многие комментарии слишком подробные, так как я хотел, чтобы шаблоном пользовались и новички в HTML5.

Чтобы просмотреть код нажмите «просмотр демо». Также нет надобности просматривать источник кода.  «Просмотр демо» и есть источник кода, который размещен в документе для просмотра. Так что если у вас в браузере не отключены JavaScript, вы увидите в точности то, что вы обычно видите, просматривая код страницы.
Как альтернатива, вы можете загрузить и «чистую» версию, без комментариев.
Единственные комментарии, что были оставлены, являются необходимыми на мой взгляд. Так что это не полностью чистая версия, но довольно подчищенная. Скачать можно с оригинала статьи.

Да, я позаимствовал несколько вещей от Boilerplate, но это неминуемо в связи с присущей Boilerplate’s kitchen sink-ness.

Данный код был взят из этого источника

[php]
<!doctype html><!— упрощенный doctype который работает и в предыдущих версиях HTML документов —>

<!— Техника Paul Irish нацеленная на IE, модифицироанная только для IE6, применяется к html элементам вместо body элементов —>
<!—[if lt IE 7 ]><html lang=»en» class=»no-js ie6″><![endif]—>
<!—[if (gt IE 6)|!(IE)]><!—><html lang=»en» class=»no-js»><!—<![endif]—>

<head>
<!— упрощенная кодировка символов —>
<meta charset=»utf-8″>

<title>Easy HTML5 Template</title>
<meta name=»description» content=»Easy HTML5 Template»>
<meta name=»author» content=»">

<!—Удаляйте обращение к этим двум фавиконам, в случае если поместите их в корневой каталог (от ред.: а лучше не удаляйте, только слеши “/” уберите. *starwebdesign.com.ua*) —>
<!— favicon 16×16 —>
<link rel=»shortcut icon» href=»/favicon.ico»>
<!— apple touch icon 57×57 —>
<link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

<!—Основные стили. Измените номер версии в строчке запроса (query string), чтобы заставить стили обновится —>
<!—“Link” элемент больше не нуждается в “type” атрибуте —>
<link rel=»stylesheet» href=»css/screen.css?v=1.0″>

<!— Modernizr for feature detection of CSS3 and HTML5; must be placed in the «head» —>
<!— “Script” элемент больше не нуждается в “type” атрибуте—>
<script src=»js/modernizr-1.6.min.js»></script>

<!— Удалите ниже указанное обращение к скрипту, если вы используете Modernizr —>
<!—[if lt IE 9]>
<script src=»http://html5shiv.googlecode.com/svn/trunk/html5.js»></script>
<![endif]—>

</head>

<!— If possible, use the body as the container —>
<!— The «home» class is an example of a dynamic class created on the server for page-specific targeting —>
<body class=»home»>

<!— ******************************************************************** —>
<!— The content below is for demonstration of some common HTML5 elements —>
<!— More than likely you’ll rip out everything except header/section/footer and start fresh —>

<!— First header has an ID so you can give it individual styles, and target stuff inside it —>
<header id=»hd1″>

<!— «hgroup» is used to make two headings into one, to prevent a new document node from forming —>
<hgroup>
<h1>Easy HTML5 Template</h1>
<h2>tagline</h2>
</hgroup>

<!— Main nav, styled by targeting «#hd1 nav»; you can have more than one nav element per page —>
<nav>
<ul>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>About</a></li>
<li><a href=»#»>Services</a></li>
<li><a href=»#»>Contact</a></li>
</ul>
</nav>

</header><!— #hd1 —>

<!— This is the main «div» that wraps the content generically; don’t use «section» for this —>
<div id=»main»>

<!— The first of two «section» elements for demo purposes; optional class added for styling (hs1 = «home section 1″) —>
<section class=»hs1″>
<!— Each section should begin with a new h1 (not h2), and optionally a header —>
<!— You can have more than one header/footer pair on a page —>
<header>
<h1>This is a Page Sub Title</h1>
</header>

<p>Some content…</p>

<!— The h2 below is a sub heading relative to the h1 in this section, not for the whole document —>
<h2>Demonstrating EM and STRONG</h2>

<!— «strong» is used for SEO and contextual hierarchy —>
<p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>

<!— «b» is used for stylistic offset of text that’s NOT important contextually —>
<p><b>This text has visual importance but has no contextual or SEO importance</b></p>

<!— «em» is used for colloquial-style emphasis —>
<p>This is a <em>very</em> colloquial expression.</p>

<!— There can be multiple footers on each page —>
<!— Secondary headers and footers don’t necesarily need ids; they can be targeted via context (i.e. «.hs1 footer») —>
<footer>
<!— incite a riot: http://24ways.org/2009/incite-a-riot —>
<p>Author: <cite>Louis Lazaris</cite></p>
</footer>

</section><!— .hs1 —>

<!— This is another section; doesn’t have header/footer because it’s not required —>
<section class=»hs2″>
<h1>This is another section</h1>
<p>This is some dummy content</p>
</section><!— .hs2 —>

</div><!— #main —>

<!— The «aside» element could be a sidebar (outside an article or section) —>
<!— Or it could reference other tangentially-related content within an article or section —>
<aside id=»sidebar»>
<p>Sidebar content</p>
</aside>

<!— The main footer has an ID for targeting, similar to the main header —>
<footer id=»f1″>
<p>copyright © year</p>
</footer><!— #f1 —>

<!— Remote jQuery with local fallback; taken from HTML5 Boilerplate http://html5boilerplate.com —>
<!— jQuery version might not be the latest; check jquery.com —>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js»></script>
<script>!window.jQuery && document.write(unescape(‘%3Cscript src=»js/jquery-1.4.4.min.js»%3E%3C/script%3E’))</script>

<!— Below is your script file, which has a basic JavaScript design pattern that you can optionally use —>
<!— Keep this and plugin scripts at the bottom for faster page load; combining and minifying scripts is recommended —>
<script src=»js/general.js»></script>

<!— asynchronous analytics code by Mathias Bynens; change UA-XXXXX-X to your own code; http://mathiasbynens.be/notes/async-analytics-snippet —>
<!— this can also be placed in the <head> if you want page views to be tracked quicker —>
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = (‘https:’ == location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
s.parentNode.insertBefore(g, s);
})(document, ‘script’);
</script>
</body>
</html>
[/php]

Хотите еще немного?

Используйте HTML5 Reset.
HTML5 Reset это другой проект, который был запущен приблизительно в тоже время что и Boilerplate, но только он проще и легче усваивается. Забавно, что я даже не обращал внимание на HTML5 Reset, пока не создал свой проект. Я полагал, что он схож с Boilerplate, но на самом деле HTML5 Reset еще проще, чем мой.  starwebdesign.com.ua
Так, что используйте его, если вам необходимы некоторые mobile-related функции, которые он включает в себя.

Работа продолжается

В будущем я буду продолжать изучение и совершенствование моей работы.
Поэтому если вам нужен 100% готовый шаблон пользуйтесь Boilerplate или HTML5 Reset. Или же корректируйте, видоизменяйте, модифицируйте мой шаблон согласно вашим нуждам. Это моя персональная исходная точка, с которой продолжится строительство.