Элемент header является как бы вводным элементом, предваряющим основное содержимое. Здесь могут быть заголовки, элементы навигации или какие-либо другие вспомогательные элементы, например, логотип, форма поиска и т.п. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Семантическая разметка в HTML5</title> </head> <body> <header> <h1>Онлайн-магазин телефонов</h1> <nav> <ul> <li><a href="/apple">Apple</a> <li><a href="/microsoft">Microsoft</a> <li><a href="/samsung">Samsung</a> </ul> </nav> </header> <div> Информация о новинках мобильного мира.... </div> </body> </html>
Элемент header нельзя помещать в такие элементы как address, footer или другой header.
Элемент footer обычно содержит информацию о том, кто автор контента на веб-странице, копирайт, дата публикации, блок ссылок на похожие ресурсы и т.д. Как правило, подобная информация располагается в конце веб-страницы или основного содержимого, однако, footer не имеет четкой привязки к позиции и может использоваться в различных местах веб-страницы.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Семантическая разметка в HTML5</title> </head> <body> <h1>Xiaomi Mi 5</h1> <div> Xiaomi Mi 5 оснащен восьмиядерным процессором Qualcomm Snapdragon 820. Размер внутреннего хранилища - 32 и 64 МБ. </div> <footer> <p><a href="/license">Лицензионное соглашение</a><br/> Copyright © 2016. SomeSite.com</p> </footer> </body> </html>
Здесь определен футер для всей веб-страницы. В него помещена ссылка на лицензионное соглашение использования сервисом и информация о копирайте.
Футер необязательно должен быть определен для всей страницы. Это может быть и отдельная секция контента:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Семантическая разметка в HTML5</title> </head> <body> <section> <h1>Последние статьи</h1> <article> <h2>Анонс Samsung Galaxy S7</h2> <p>Состоялся выход нового флагмана от компании Samsung Galaxy S7.....</p> <footer> Дата публикации: <time datetime="2016-03-16T15:16-00:00">16.03.2016 15:16</TIME> </footer> </article> <article> <h2>Скидки на Microsoft Lumia 950</h2> <p>С 1 марта смартфон Microsoft Lumia 950 стоит на 10 000 рублей дешевле</p> <footer> Дата публикации: <time datetime="2016-03-01T14:36-00:00">01.03.2016 14:36</TIME> </footer> </article> </section> </body> </html>
Элемент footer не следует помещать в такие элементы как address, header или другой footer.
Элемент address предназначен для отображения контактной информации, которая связана с ближайшим элементом article или body. Нередко данный элемент размещается в футере:
<footer> <address> Контакты для связи <a href="mailto:js@example.com">Том Смит</a>. </address> <p>© copyright 2016 Example Corp.</p> </footer>