logo
Все курсыВсе курсы
ВебинарыРазобраться в ITРеферальная программаПолучить профессию в SkyproПолучить профессию в Skypro

Правильное использование тегов HTML5: section, header, article

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для достижения оптимальной семантики документа в HTML5 рекомендуется использовать section для группировки тематически связанных блоков, header для вводных блоков, aside для вспомогательных сегментов контента и article для самодостаточных разделов содержимого. Вот пример их верного использования:

HTML
Скопировать код
<article>
  <header><h1>Заголовок статьи</h1></header>
  <section><p>Основной контент</p></section>
  <aside><p>Дополнительная информация</p></aside>
</article>

Помните: выбирайте элементы по их функции — header для вводной информации, section для отдельных блоков, aside для второстепенного контента и article для самодостаточных текстов. Это благоприятно сказывается на доступности и поисковой оптимизации (SEO) контента, упрощая навигацию и понимание структуры сайта.

Когда применять <article>, <section> и <div>

Понимание принципов использования <article>, <section> и <div> существенно облегчает вашу работу с HTML:

  • <article> используется для независимых и самодостаточных единиц содержимого, таких как статьи или записи в блоге.
  • <section> применяется для группировки тематически связанных блоков, аналогично разделам в книге.
  • <div> — это универсальный контейнер без семантической нагрузки. Он становится нужным, когда другие элементы не подходят.

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

Как и когда применять <nav> и <aside>

Рациональное использование <nav> и <aside> упрощает навигацию пользователя по сайту:

  • <nav> предназначен для основных блоков навигации, отличаясь от произвольных групп ссылок.
  • <aside> идеально подходит для контента, не имеющего прямого отношения к основному, например для боковых панелей или подсказок.

Правильное распределение и организация контента на странице значительно улучшает пользовательский опыт.

Элементы <header> и <footer> задают контекст как для всей веб-страницы, так и для отдельных её частей:

  • Внутри <article> заголовок может содержать название и автора, а подвал — дату публикации и ссылки на связанный контент.
  • В контексте <section> шапка может включать название раздела, а подвал — заключение или ссылки на дополнительные материалы.

Эти элементы способствуют созданию более структурированного и логического представления контента.

Визуализация

Представьте элементы вашей веб-страницы как части здания:

Markdown
Скопировать код
🚪 **Header**: Входная дверь в "здание" вашего контента.
🏠 **Section**: Отдельные помещения, составляющие "здание" сайта.
📘 **Article**: "Книги", рассказывающие истории, связанные с этими помещениями.
🛋️ **Aside**: "Боковые столики" с декоративными элементами или чашкой кофе.

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

Использование структуры HTML5 в вашу пользу

Алгоритм структурирования HTML5 поможет формировать понятные и чёткие документы благодаря корректному разделению:

  • Основной контент в <main> выделим от остальных элементов, даже если их на странице несколько.
  • <header> и <footer> обозначают ключевые зоны и добавляют контекст.

Такой структурированный подход улучшает доступность и способствует повышению позиций сайта в поисковых системах.

Избегайте излишнего использования <div>

Приоритет семантическим элементам HTML5 поможет избежать излишнего использования <div> — явления, известного как "divitis":

  • Замените <div> на <section> и <article>, когда это усиливает смысл контента.
  • Семантическая разметка делает ваш сайт более понятным не только для пользователей, но и для скринридеров и поисковых систем.

Особенности использования <header> и <body>

Теги <h1>-<h6> не обязательно включать в хедеры:

  • В <header> могут располагаться логотипы, блоки поиска и другие элементы вводной части.
  • Тег <body> чаще используется для задания стилей страницы в целом, не предназначен для структурного деления на разделы.

Такое детальное использование элементов HTML5 делает ваш сайт более точным и привлекательным.

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

  1. Элемент article | HTML5 Doctor — подробное описание применения элемента <article>.
  2. <h1>–<h6>: Элементы заголовков секций HTML – MDN — детальное руководство от MDN по элементам заголовков и секций HTML.
  3. HTML Стандарт — официальная спецификация WHATWG для элемента <section>.
  4. Предварительный обзор HTML 5 – A List Apart — глубокий анализ HTML5 и его новых структурных элементов.
  5. Тег header HTML – W3Schools — обучающий материал по правильному использованию <header>.
  6. HTML5 и алгоритм структурирования документа — Smashing Magazine — объяснения алгоритма структурирования HTML5-документов и его значимости.
  7. Техники HTML5 для предоставления полезных текстовых альтернатив – WCAG WG — рекомендации W3C по созданию текстовых альтернатив в HTML5 для улучшения доступности.