Новые теги HTML5

Сразу дам разъяснение, почему лучше использовать новые теги и не забить на них и делать все, как раньше. В принципе, с точки зрения правильности, не будет ошибочным неиспользование ниже описанных тегов в HTML разметке страницы.
Самый большой плюс HTML5 заключается в следующем: Использование новых тегов помогает поисковым системам разделять вашу страницу на части и определять где, например, находится меню, шапка сайта, футер сайта или основной контент (информация).

Тег <header>

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

<header>
	<div id=”logo”><img src=”images/logo.png” alt=”Логотип” /></div>
	<div id=”tel”>8 900 909-90-90</div>
</header>

Тег <nav>

Служит для обозначения навигации на сайте (обычно главное меню). Пример:

<nav>
	<a href=”home.php” title=”Главная”>Главная</a>
	<a href=”uslugi.php” title=”Услуги”>Услуги</h2>
	<a href=”kontakty.php” title=”Контакты”>Контакты</a>
</nav>

Тег <main>

Внутри данного тега размещается основной контент страницы. Пример:

<main>
    <article>
	<h3> <a href="http://it-is-web.ru/prodvizhenie-sajtov/poiskovaya-optimizaciya-sajta-seo/" title="Поисковая оптимизация сайта (SEO)" > Поисковая оптимизация сайта (SEO)</a></h3>
	<p>Основные определения в оптимизации сайта под поисковые системы…</p>
    </article>
    <article>
        <h3> <a href="http://it-is-web.ru/prodvizhenie-sajtov/poiskovaya-optimizaciya-sajta-seo/" title="Поисковая оптимизация сайта (SEO)" > Поисковая оптимизация сайта (SEO)</a></h3>
        <p>Основные определения в оптимизации сайта под поисковые системы…</p>
    </article>
</main>

Тег <article>

Обычно внутри данного тега размещается независимый от основного содержания страницы, но схожий по тематике текст: новость, статьи с блога, комментарии и т.п. Пример:

<article>
	<h3> <a href="http://it-is-web.ru/prodvizhenie-sajtov/poiskovaya-optimizaciya-sajta-seo/" title="Поисковая оптимизация сайта (SEO)" > Поисковая оптимизация сайта (SEO)</a></h3>
	<p>Основные определения в оптимизации сайта под поисковые системы…</p>
</article>

Тег <aside>

Данным тегом выделяются блоки, не относящиеся к основному контенту страницы: текстовые блоки, рубрики, метки, модули и т.д. Обычно располагаются по бокам страницы. Пример:

<aside>
	<h3> Расчет стоимости</h3>
	<div id=”module”>скрипт модуля</div>
</aside>

Тег <hgroup>

Используют при добавлении нескольких уровней заголовков: Заголовок, подзаголовок и т.д. Пример:

<hgroup>
	<h1>Создание сайтов</h1>
	<h2>HTML</h2>
	<h3>Основные теги</h3>
</hgroup>
<p>Текст статьи…</p>

Теги <figure> и <figcaption>

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

<figure>
	<img src=”1.jpg” alt=”1” />
	<figcaption>Описание (название) изображения</figcaption >
</figure>

Тег <section>

Используется для разделения контента страницы на секции (разделы). Не используется для разделения элементов сайта на блоки (блочная верстка), для этого используется тег <div>. Пример:

<section>
	<h1>HTML</h1>
<p>HTML – это язык описания структуры документа…</p>
</section>
<section>
	<h1>CSS</h1>
<p>CSS – это язык описания внешнего вида (стиля) документа…</p>
</section>

Тег <time>

Используется для обозначения даты добавления материала, статьи, новости, комментария и т.д.
Пример:

<article>
   <p>Дата добавления:
<time datetime="2014-2-03">2014-2-03</time>
   </p>
   <p>Как создать свой собственный блог с нуля <a href=”/”>читать далее..</p>
</article>

Тег <footer>

Используется для выделения нижней части сайта (футер, подвал), в которой обычно размещаются: контакты, автор, дата создания, права, ссылки, счетчик и т.д. Пример:

<footer>
	<div id="menu2">навигация</div>
	<div id="counter">счетчик</div>
	<div id="cont-info">Общество с ограниченной ответственностью...</div>
        <div id="optiweb">All Rights Reserved 2014	|    <span>by </span><a href="http://razrabotaemsayt.ru" title="Создание сайтов и продвижение" target="_blank">Создание сайтов и продвижение</a></div>
</footer>

Данные теги HTML5 помогут увеличить скорость индексации вашего сайта поисковыми системами в разы, так что не советую ими пренебрегать! Успехов…