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

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

  1. Garryfuh

    Строительство из сэндвич панелей — это одна из современных методик, по которой сейчас строится множество промышленных сооружений — склады, ангары, сельскохозяйственные постройки (теплицы, зерно- и овощехранилища, фермы).

  2. ErrolPaick

    Hello. And Bye. The market of modern air transportation, is very developed around the world, every minute, somewhere an airplane takes off or lands. Every day, thousands of planes rise above the skies. The variety of airlines in the world gives you the choice.
    List of airlines in the world, including low-cost airlines: https://clck.ru/J72Nr

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

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

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>