Структурированные теги HTML5

В HTML5 добавили несколько интересных и полезных тегов для структурирования вашей разметки. Многие из этих тегов заменят типичные элементы div которые мы часто используем. Начнем перечисление тегов:
<section></section>

section предназначено для тематический группировки контента, обычно ставится после заголовка, возможно в конце страницы. section может быть вложен в любой другой тег, если понадобится может содержать любое количество типичной разметки.
<header></header>

Используется для указания заголовка для section (разделов), также для группировки заголовков, но может также содержать дополнительную информацию о разделе.
<footer></footer>

footer обычно содержит информацию о разделе, ссылки на похожие документы, копирайты и т.д.
<nav></nav>

Определяет область навигации, как правило список ссылок. nav как правило должен располагаться между section, header и footer
<article></article>

Независимая запись в блоге, журнале и т.д.
<aside></aside>

Указывает вторичную информацию о записи, пояснение что ли.

Использование
Давайте теперь попробуем использовать эти теги для построения обычной страницы блога:
<!DOCTYPE html>
<html>
  <head>
    <title>Стандартный блог</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Стандартный блог</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Архив</a></li>
        <li><a href="#">О блоге</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights<p>
    </footer>
  </body>
</html>

Этот пример достаточно многозначен но хорошо показывает места применения нужных тегов.
Теги:
section, header, article, footer, тегов, может, текст, информацию, Заголовок, title, страницы, содержать, блоге, разметки, группировки, разделе, aside, заголовка, правило, также, Давайте, Использование , журнале, записи, footer , запись, Указывает, теперь, HTML5 , попробуем, Rights, места, показывает, хорошо, многозначен
Добавлено: 13 Июля 2018 07:46:12 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...