Новые теги HTML5

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

Тег <header>

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

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

Тег <nav>

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

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

Тег <main>

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

1
2
3
4
5
6
7
8
9
10
<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>

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

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

Тег <aside>

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

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

Тег <hgroup>

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

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

Теги <figure> и <figcaption>

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

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

Тег <section>

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

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

Тег <time>

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

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

Тег <footer>

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

1
2
3
4
5
6
<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 помогут увеличить скорость индексации вашего сайта поисковыми системами в разы, так что не советую ими пренебрегать! Успехов…

Последнии записи

Как продвинуть группу Вконтакте

Как продвинуть группу Вконтакте

В этой статье, я поделюсь секретами продвижения группы Вконтакте. Расскажу, как можно и нужно продвигать группу, а чего делать не…

Комментариев: 7

Добавить комментарий для Willisfum Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*