Просмотров: 1 536

Элемент footer.

Категории Контекст, в котором может быть использован: Контентная модель:
потоковый контент,
явный контент.
в потоковом контенте. потоковый контент, но не имеет элементов header и footer, в качестве своих потомков.

Выдержки из спецификации:

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

Когда элемент footer находится внутри разделов, он может содержать в себе приложения, содержания, эмблемы издательства, сведения о лицензии и др. подобную информацию.

Заметьте, что контактная информация об авторе может находиться в элементе address, который, в свою очередь, может находиться в элементе footer.Подпись автора и другая информация, которую можно уместно разместить и в элементе footer и в элементе header может быть размещена в любом из них (или ни в том и ни другом). Первичная цель этих элементов просто помочь авторам написать понятную разметку. Они не предназначены для создания специфичных структур.

Элемент footer не обязательно должен находиться в конце документа, хотя обычно это действительно так и есть.

Когда ближайший родитель элементов секционирующего контента или секционирующего корня является элемент body, тогда это применимо для всей страницы.

Заметьте, что элемент footer не относится к секционирующему контенту. Он не создает новые разделы в оглавлении.

В следующем примере показана страница, на которой располагаются два элемента footer. Один на верху страницы и другой внизу. Оба они имеют одинаковый контент.

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <h2>The ipsum of all lorems</h2>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

В следующем примере показывается элемент footer, который использовался для всего сайта и для отдельной статьи.

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

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

Следующий пример демонстрирует как раз такую ситуацию:

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/1">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>