Калининград+7.962.2626.555

HTML5. Начало

10.02.2012

Во-первых:

<!DOCTYPE html>

Во-вторых, т.к. HTML5 содержит новые теги, которые не понимают IE6, IE7 и IE8, нужно подгрузить скрипт который создаст «муляжи» HTML5 объектов (автор скрипта Реми Шарп):

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Теперь, что касается HTML5-тэгов.

<header> — может использоваться как для оформления шапки страницы, так и заголовка статьи. Т.о. на странице может быть два таких тэга: внутри первого скорее всего окажется логотип и слоган, внутри второго заголовок страницы — тэг <h1>.

<hgroup> — преимущественно встречается, когда два или более тэгов <h*> следуют друг за другом. Например, конструкцию

<h1>Заголовок статьи</h1>
<h2>Подзаголовок 1</h2>

желательно поместить в <hgroup>.

<nav> — должен содержать навигационные блоки. Их также может быть несколько на странице: например блок основного меню и навигация по разделу.

<article> — содержит контент статьи. Часто встречается такая конструкция:

<article>
    <header>
        <h1>Заголовок статьи</h1>
    </header>
    <section>
        <header>
            <h2>Заголовок статьи</h2>
        </header>
        <p>Текст</p>
    </section>
</article>

<section> — можно назвать частью статьи.

<aside> — блок, который не относится к основному контенту страницы, т.е. к <article>. Как правило это: комментарии, реклама, ссылки на архивы. В народе эту часть страницы называют «боковая панель».

<figure> — это блоки изображений и подписи к ним, схемы, видео и аудио вставки, различная графика, примеры кода и т.д. Встречается преимущественно внутри <section>.

<figcaption> — содержит описание содержимого <figure>. Тут два варианта:

<figure>
    <img src="photo.jpg" />
    <figcaption>Описание фото</figcaption>
</figure>

или

<figure>
    <figcaption>Описание фото</figcaption>
    <img src="photo.jpg" />
</figure>

<footer> — он же «подвал». Содержит контактную и правовую информацию, подпись разработчика сайта.