Pages Menu Stijit.com
Twitter
Categories Menu
Теги html5 и основные структурные элементы разметки

Теги html5 и основные структурные элементы разметки

Тег header

Тег header в html5 является первым элементом на странице. Он должен включать в себя логотип со ссылкой на главную страницу, а также название сайта или основной заголовок. К примеру:

<header>
    <a href="/"><img src=site-logo.png alt="My site">
    <h1>Here is my site's best slogan</h1>
    </a>
</header>

Элемент разметки nav в html5

Тег разметки nav используется в html5 для обозначения панели навигации по сайту. Зачастую в него заключают основное меню сайта и боковые навигационные панели, а также блок ссылок в футере сайта. Внутри элемента nav часто ставят список ul или ol с набором ссылок. Тег nav не заменяет собой элементы ol или ul, а обрамляет их. Поэтому устаревшие браузеры, не поддерживающие этот элемент, просто отобразят панель навигации как обычный список. Например так:

<nav> <ul>
        <li>Menu</li>
        <li><a href="/html5-courses.html">HTML5 courses</a></li>
        <li><a href="/css3-courses.html">CSS3 courses</a></li>
        <li><a href="/contacts.html">Contacts</a></li>
</ul> </nav>

Тег main в html5

Для разметки основной части контента страницы в html5 используют тег main:

<main role="main">
  <article>
    <h1>Title article 1</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
  <article>
    <h1>Title article 2</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</main>

Тег article

Тег article в html5 может применяться для обозначения статьи, новости, заметки в блоге, руководства или даже видеозаписи с текстовой расшифровкой. Также этот тег применяют для карт и веб-виджетов многократного использования (Google Maps, Яндекс Карты и т.д.). Простой пример использования элемента article:

<article>
    <h1>My article</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</article>

html5 элемент aside

Элемент aside нужен для боковой панели, в которой находятся категории, архивы, последние комментарии и контент, не имеющий отношения к навигации. Тег aside служит для обрамления контента, который должен располагаться отдельно от основного, так что сайдбары это именно его применение:

<aside>
  <nav>
    <h2>Pages</h2>
    <ul>
      <li><a href="/about.html">About this site</a></li>
      <li><a href="/contact-us.html">Contact us</a></li>
    </ul>
    <h2>Categories</h2>
    <ul>
      <li><a href="/html5.html">HTML5 tags</a></li>
      <li><a href="/css3.html">CSS3 features</a></li>
    </ul>
    <h2>Recent comments</h2>
    <ul>
      <li>...</li>
    </ul>
  </nav>
</aside>

Тег footer в разметке html5

С тегом footer обычно все просто — он размещается в самом низу страницы. В футер выносятся ссылки на политику конфиденциальности, правила пользования сайтом, авторские права, копирайт, контакты и прочие подобные ссылки. Для правильного оформления всей этой информации рекомендуется внутри элемента footer использовать элемент nav. К примеру так:

<footer>
  <nav>
    <a href="/contact-us.html">Contact us</a>.
    <a href="/terms.html">Terms of service</a>
  </nav>
  <p>Copyright © by me</p>
</footer>

Применяя теги html5 для структурной разметки сайта помните, что они поддерживаются не во всех версиях IE. Тем не менее, есть способ эмулировать поддержку элементов html5 в старых версиях Internet Explorer.

4 Коммент.

  1. :: Навигация
    > Меню
    :: Контекстное меню

    Как переходить с одной страницы на другое папку создавать под каждую что ли ?

    • Вы можете использовать ссылки с якорями — используя в конце ссылок соответсвенно #nav или #menu

  2. Здравствуйте! Подскажите Если страница выстроена следующим образом: article — заголовок — немного текста — пост — пост — пост  — постраничная навигация — основной текст — /article
    можно ли так размещать текст вокруг постов? можно ли туда размещать постраничную навигацию? следует ли навигацию обернуть тегом section?

    • Да, так сделать можно — просто у вас будут разные элементы вложенные в один тег article. Но навигацию лучше взять в тег nav.

Оставить комментарий

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