Элемент <footer>

Вот уже долгое время мы привыкли пользоваться <div id=»footer»> внизу веб-страницы, но с введением HTML 5 пришло время с этим попрощаться. При добавлении нового элемента у нас теперь есть больше возможностей и гибкости в верстке веб-сайтов.

Согласно спецификации

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

Давайте начала

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

<div id="footer">
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
<div>
Однако при создании страницы в HTML 5, нет смысла продолжать пользоваться подобной структурой. Как вы, наверное, уже знаете, сейчас уже не нужно использовать элемент <div> для многих элементов. В нашем случае, когда речь идет о нижнем колонтитуле, соответствующий «блок» будет называться <footer>.
<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer>
Как я уже говорил вначале поста, в оригинале элемент <footer> в наших страницах используется только один раз, но с введением новых элементов, это может быть и не так. Сейчас элемент <footer> может быть использован несколько раз, а для отображения всей дополнительной информации.

Используя элемент колонтитула

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

Например

Раздел

<section> Section content appears here. <footer> Footer information for section. </footer> </section>

Статья

<article> Article content appears here. <footer> Footer information for article. </footer> </article>

Чтобы увидеть пример

***
Государственные заказы – Библиотека Тендеров

Связанные записи

• Нет связанных записей.