Многократное использование тега header в HTML5: правила
Быстрый ответ
Да, вы можете использовать теги <header>
и <footer>
больше одного раза в документах HTML5. Это удобно для создания уникальных шапок и подвалов в семантически значимых разделах, таких как <article>
или <section>
. В каждом из этих семантических блоков могут быть представлены свой заголовок и подвал:
<section>
<header>
Заголовок раздела
</header>
<!-- Содержимое раздела -->
<footer>
Информация о разделе
</footer>
</section>
Но не забывайте, что для каждого раздела желательно использовать только один <header>
и один <footer>
для четкого определения их областей действия.
Использование нескольких header и footer
Можно вводить несколько элементов <header>
и <footer>
в разметку HTML5 в случае, когда вы создаете:
- Статьи:
<header>
совершенно подходит для размещения заголовка, а<footer>
можно использовать для вывода автора, даты публикации и прочей информации о статье. - Секции с контентом: Каждый контентный раздел также может иметь свой
header
в верхней части иfooter
в нижней, служа ограничительными рамками для контента, подобно булку бутерброда. - Веб-компоненты: Для каждого пользовательского виджета, как, например, вкладки или аккордеоны, можно добавить
<header>
и<footer>
для улучшения семантики интерфейса.
Когда доступность встречается с семантикой
При использовании тегов <header>
и <footer>
структура HTML становится более читабельной и доступной:
- Структура документа: Экранные читалки более эффективно навигируют по документу, где ясно обозначены семантические блоки.
- Навигация: Навигационные ссылки, расположенные в
<header>
, упрощают ориентацию и перемещение по сайту.
Лучшие практики и возможные проблемы
При использовании нескольких заголовков и подвалов важно придерживаться следующих принципов:
- Без излишеств:
Header
иfooter
следует внедрять только тогда, когда они реально способствуют структуре и семантике, а применение исключительно для стилизации стоит избегать. - Правила вложения: каждый
<header>
или<footer>
должен располагаться внутри своего непосредственного семантического блока. - Единообразие: заголовки и подвалы лучше оформлять по единому шаблону по структуре и содержанию в пределах всех подобных элементов на странице.
Визуализация 🎨
Представьте себе, что вы — разработчик, а ваша веб-страница — это пчелиный улей:
Улей (🐝):
| Уровень | Население | Тег |
| ------- | ----------- | ------------- |
| Верхний | Королева | `header` |
| Средний | Рабочие | `header` |
| Нижний | Трутни | `footer` |
| Сад | Соты | `footer` |
Здесь header
и footer
играют разные роли, обеспечивая единообразную структуру.
🐝: 🚪👸 (header для королевской палаты)
🐝: 🚪💪 (header для помещения рабочих)
🐝: 🚪🤴 (footer для области трутней)
🐝: 🚪🍯 (footer для хранилища мёда)
Каждый элемент выполняет свою уникальную функцию, вместе формируя гармоничную структуру кода.
Нестандартное использование
Не бойтесь экспериментировать с HTML5-тегами. Например, применяйте header
и footer
для:
- Поиска: Разместите форму поиска в верхней части контента с помощью
header
. - Оглавления: Сделайте ваши оглавления более привлекательными, располагая их в
header
. - Подразделы: Обеспечьте дополнительные
header
иfooter
для небольших разделовsection
илиarticle
.
Адаптация под мобильные устройства
Header
и footer
прекрасно подходят для мобильного дизайна:
- Выезжающие меню: Введите
header
, чтобы разместить скрытое навигационное меню. - Подвалы с call-to-action: Поместите важные интерактивные элементы и информацию в
footer
, делая их легкодоступными на мобильных устройствах.
Что еще?
Рассмотрим дополнительные преимущества header
и footer
:
- Удобная навигация: Четкие заголовки и подвалы облегчают перемещение пользователя по сайту.
- Организация контента: Управление и обновление контента страницы становятся проще, когда оно организовано с помощью этих тегов.
Полезные материалы
- HTML Стандарт: Элемент HEADER — официальное руководство по использованию тега заголовка.
- HTML Стандарт: Элемент FOOTER — нормативный материал по применению тега подвала.
- <footer>: Элемент Footer – HTML | MDN — подробное руководство и рекомендации от MDN по работе с элементами подвала.
- Элемент header | HTML5 Doctor — полезные советы по использованию тега заголовка в документах HTML5.
- HTML тег header – W3Schools — простое руководство по использованию тега header.
- HTML тег footer – W3Schools — основы использования тегов подвала в HTML5.