Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Element-footer-v-html5

Использование тега footer для создания подвала на странице

Этот тег может использоваться, как и предыдущие теги несколько раз на странице. Вы, наверное уже догадались из названия, что он является подвалом страницы. В нём можно располагать счетчики, текст об авторских правах на сайт, контактные данные и т.п. Возможно также вставить панель навигации (тег nav) в подвал страницы. Никто не запрещает вставлять и такие новые элементы, как aside и section, но я бы на вашем месте все-таки этого не делал.

<header> и <footer> используем на полную!

Я уже приводил примеры использования элементов <footer> и <header>, но эти элементы имеют ряд особенностей, о которых я просто не мог с вами не поделиться. В скором времени вы поймете почему. А чтобы вам легче было разобраться приведу наглядный пример использования этих тегов в не совсем привычном для вас виде:

<!DOCTYPE HTML>
  <html>
    <head>
    <meta charset=utf-8>
    <title>Новая разметка</title>
  <style>
  body>header {
    background:#FFEAD5
  }
  article{
    background:#CFCFCF;
    margin:10px;
    padding-top:5px;
  }
  article p{
  padding-left:25px
  }
  article, article>header hgroup {
  -moz-border-radius:5px; /* Радиус скругления */
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  border-radius:5px;}
  article header hgroup {
  text-align:right;
  width:40%;
  color:#CCC;
  background:#000;
  margin-left:55%;
  }
  article footer {
  background:#5c6183;
  -moz-border-radius:0px 0px 5px 5px; /* Радиус скругления */
  -webkit-border-radius:0px 0px 5px 5px;
  -khtml-border-radius:0px 0px 5px 5px;
  border-radius:0px 0px 5px 5px;
  padding-left:15px;
  color:#FFF 
  }
  header hgroup p {
  background:#FFF;
  color:#006;
  -moz-border-radius:0px 0px 5px 5px; /* Радиус скругления */
  -webkit-border-radius:0px 0px 5px 5px;
  -khtml-border-radius:0px 0px 5px 5px;
  border-radius:0px 0px 5px 5px;
  padding-right:10px;
  }
  footer {clear:both;
  background:#DDECE9}
  footer p{
  font-size:14px;
  text-align:center}
  </style>
  </head>
  <body>  
  <header>
  <h1>&lt;header&gt; Шапка сайта</h1>
  </header>
  <article>
  <header>
  <hgroup>
  <h2>&lt;article&gt;Пост №1</h2>
  <p>Опубликовано: <time datetime=2012-01-16>16 января 2011
  </time></p>
  </hgroup>
  </header>
  <p>Здесь мы будем писать текст первого поста.</p>
  <footer>Автор поста (статьи): Александр Побединский</footer>
  </article>
  <article>
  <header>
  <hgroup>
  <h2>&lt;article&gt;Пост №2</h2>
  <p>Опубликовано: <time datetime=2012-01-16>16 января 2011
  </time></p>
  </hgroup>
  </header>
  <p>Здесь мы будем писать текст второго поста.</p>
  <footer>Автор поста (статьи): Александр Побединский</footer>
  </article>
  <footer>
  <p><b>&lt;footer&gt;</b>Здесь обычно пишут, что права защищены.
  Год и.т.п. Копирование запрещено))</p>
  </footer>
  </body>
  </html>

 

В результате должен получиться следующий результат:

Использование тега footer и header

Из этого примера следует, что каждая отдельная статья или пост могут иметь свои элементы <footer> и <header> не зависимо от шапки и подвала (футера) страницы документа. Именно в таких случаях эти элементы могут использовать несколько раз. Хотя я уверен, что их можно применять и в боковой панели aside.

Ну вот вы и познакомились с основными структурными элементами HTML5, а следующих уроках мы с вами рассмотрим ещё больше новых элементов, различные формы, которых не было в других спецификациях HTML!



наверх