Многократное использование тега 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:

• Удобная навигация: Четкие заголовки и подвалы облегчают перемещение пользователя по сайту.
• Организация контента: Управление и обновление контента страницы становятся проще, когда оно организовано с помощью этих тегов.

Полезные материалы

1. HTML Стандарт: Элемент HEADER — официальное руководство по использованию тега заголовка.
2. HTML Стандарт: Элемент FOOTER — нормативный материал по применению тега подвала.
3. <footer>: Элемент Footer – HTML | MDN — подробное руководство и рекомендации от MDN по работе с элементами подвала.
4. Элемент header | HTML5 Doctor — полезные советы по использованию тега заголовка в документах HTML5.
5. HTML тег header – W3Schools — простое руководство по использованию тега header.
6. HTML тег footer – W3Schools — основы использования тегов подвала в HTML5.