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

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

Code
<section></section>


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

Code
<header></header>


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

Code
<footer></footer>


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

Code
<nav></nav>


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

Code
<article></article>


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

Code
<aside></aside>


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

Давайте теперь попробуем использовать эти теги для построения обычной страницы блога:

Code
<!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>


Этот пример достаточно многозначен но хорошо показывает места применения нужных тегов.

  • FalleN

  • 7106

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!