Получить профессию в Skypro
Правильное использование тегов HTML5: section, header, article
Быстрый ответ
Для достижения оптимальной семантики документа в HTML5 рекомендуется использовать section для группировки тематически связанных блоков, header для вводных блоков, aside для вспомогательных сегментов контента и article для самодостаточных разделов содержимого. Вот пример их верного использования:
<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>
Элементы <header> и <footer> задают контекст как для всей веб-страницы, так и для отдельных её частей:
- Внутри
<article>заголовок может содержать название и автора, а подвал — дату публикации и ссылки на связанный контент. - В контексте
<section>шапка может включать название раздела, а подвал — заключение или ссылки на дополнительные материалы.
Эти элементы способствуют созданию более структурированного и логического представления контента.
Визуализация
Представьте элементы вашей веб-страницы как части здания:
🚪 **Header**: Входная дверь в "здание" вашего контента.
🏠 **Section**: Отдельные помещения, составляющие "здание" сайта.
📘 **Article**: "Книги", рассказывающие истории, связанные с этими помещениями.
🛋️ **Aside**: "Боковые столики" с декоративными элементами или чашкой кофе.Каждый элемент играет свою роль в общей структуре, вместе создавая гармоничное и функциональное "здание" для вашего контента.
Использование структуры HTML5 в вашу пользу
Алгоритм структурирования HTML5 поможет формировать понятные и чёткие документы благодаря корректному разделению:
- Основной контент в
<main>выделим от остальных элементов, даже если их на странице несколько. <header>и<footer>обозначают ключевые зоны и добавляют контекст.
Такой структурированный подход улучшает доступность и способствует повышению позиций сайта в поисковых системах.
Избегайте излишнего использования <div>
Приоритет семантическим элементам HTML5 поможет избежать излишнего использования <div> — явления, известного как "divitis":
- Замените
<div>на<section>и<article>, когда это усиливает смысл контента. - Семантическая разметка делает ваш сайт более понятным не только для пользователей, но и для скринридеров и поисковых систем.
Особенности использования <header> и <body>
Теги <h1>-<h6> не обязательно включать в хедеры:
- В
<header>могут располагаться логотипы, блоки поиска и другие элементы вводной части. - Тег
<body>чаще используется для задания стилей страницы в целом, не предназначен для структурного деления на разделы.
Такое детальное использование элементов HTML5 делает ваш сайт более точным и привлекательным.
Полезные материалы
- Элемент article | HTML5 Doctor — подробное описание применения элемента
<article>. - <h1>–<h6>: Элементы заголовков секций HTML – MDN — детальное руководство от MDN по элементам заголовков и секций HTML.
- HTML Стандарт — официальная спецификация WHATWG для элемента
<section>. - Предварительный обзор HTML 5 – A List Apart — глубокий анализ HTML5 и его новых структурных элементов.
- Тег header HTML – W3Schools — обучающий материал по правильному использованию
<header>. - HTML5 и алгоритм структурирования документа — Smashing Magazine — объяснения алгоритма структурирования HTML5-документов и его значимости.
- Техники HTML5 для предоставления полезных текстовых альтернатив – WCAG WG — рекомендации W3C по созданию текстовых альтернатив в HTML5 для улучшения доступности.