Семантические теги — это способ сказать браузеру и поисковику: «Вот тут у меня шапка, тут основной контент, тут подвал». Это не про красоту, а про понятную структуру. Разберём три самых базовых тега: <header>, <main>, <footer>.
<header> — шапка страницы
<header> обычно ставят вверху страницы. В нём размещают то, что относится ко всей странице или сайту: логотип, главное меню, поиск, контакты для быстрого доступа.
Пример:
<header> <a href="/" class="logo">Логотип компании</a> <nav aria-label="Основное меню"> <ul> <li><a href="/">Главная</a></li> <li><a href="/catalog">Каталог</a></li> <li><a href="/articles">Статьи</a></li> </ul> </nav> </header>
Зачем это нужно:
- Для людей с ограниченными возможностями. Скринридер (программа для чтения с экрана) сразу понимает: «Это шапка, тут навигация». Пользователь может быстро перейти к меню, не слушая весь контент подряд.
- Для поисковиков. Робот видит структуру и лучше понимает, где навигация сайта, а где уникальный контент.
- Для поддержки кода. Когда вы или другой разработчик открываете шаблон, сразу ясно, где шапка. Не нужно гадать, какой
divза что отвечает.
Важно: <header> может быть не только вверху страницы. Его можно ставить и внутри <article> или <section> — например, как заголовок статьи вместе с датой и автором. Но чаще всего новички используют его именно как общую шапку сайта.
<main> — основной контент страницы
Тег <main> должен быть на странице ровно один. В него кладут то, ради чего человек пришёл на эту страницу: статью, карточку товара, список новостей. Всё, что уникально для этой страницы.
Пример:
<main> <article> <h1>Как выбрать товар: простое руководство</h1> <p>Текст статьи...</p> </article> </main>
Зачем это нужно:
- Доступность. Скринридеры умеют делать быстрый переход «в основной контент». Это экономит время: пользователь не слушает шапку и подвал, а сразу попадает в статью.
- Однозначность. Правило «один
<main>на страницу» помогает избежать путаницы: браузер и робот точно знают, где главная часть. - Поддержка в коде. Если вы делаете общий шаблон (например, на PHP), то шапка и подвал — отдельные файлы, а
<main>меняется от страницы к странице. Это удобно и снижает количество ошибок.
Учитывая ваши прошлые задачи по статьям и админке: если вы делаете шаблон страницы, <main> — это как раз та часть, которая будет разной для статьи и каталога.
<footer> — подвал страницы
В <footer> кладут информацию, которая относится ко всему сайту или странице в целом, но не к основному контенту: копирайт, ссылки на политику конфиденциальности, контакты, дополнительное меню.
Пример:
<footer> <p>© 2024 Компания. Все права защищены.</p> <nav aria-label="Нижнее меню"> <a href="/privacy">Политика конфиденциальности</a> <a href="/terms">Условия использования</a> </nav> <address> г. Город, ул. Примерная, 1<br> Email: info@example.com </address> </footer>
Зачем это нужно:
- Структурированность. Подвал — это стандартное место для «юридических» ссылок и контактов. Пользователь привык их искать внизу.
- Доступность. Скринридеры понимают: «Это подвал», и можно быстро туда перейти или, наоборот, пропустить.
- Читаемость кода. Когда в шаблоне есть отдельный блок
<footer>, проще поддерживать сайт: обновили копирайт или контакты — поменяли в одном месте, и он обновился на всех страницах.
Как это выглядит вместе
Минимальный, но правильный скелет страницы:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Пример структуры страницы</title> </head> <body> <header> <a href="/" class="logo">Лого</a> <nav aria-label="Основное меню"> <ul> <li><a href="/">Главная</a></li> <li><a href="/catalog">Каталог</a></li> </ul> </nav> </header> <main> <article> <h1>Заголовок статьи</h1> <p>Основной текст статьи.</p> </article> </main> <footer> <p>© 2024 Компания</p> <a href="/contacts">Контакты</a> </footer> </body> </html>
Частые ошибки новичков и как их избежать
- Вместо семантики — одни
<div>. Результат: разметка не несёт смысла, сложнее поддерживать и адаптировать. Решение: используйте<header>,<main>,<footer>даже в простых шаблонах. - Несколько
<main>на странице. Результат: доступность и индексация страдают. Решение: строго один<main>. - В
<main>кладут шапку или подвал. Результат: ломается логика «основного контента». Решение: шапка и подвал всегда вне<main>. - Не используют
aria-labelдля меню. Результат: скринридерам сложнее понять, что это за навигация. Решение: добавляйтеaria-label="Основное меню"или похожее описание.
Связь с реальными задачами
Учитывая ваши запросы по PHP-шаблонам и админке статей: семантика помогает делать переиспользуемые шаблоны. Например:
header.php— выводит<header>footer.php— выводит<footer>- А между ними — динамический
<main>с контентом статьи или каталога.
Так проще поддерживать проект: если нужно поменять меню, вы меняете его в одном файле, а не в каждой статье отдельно.
Загрузка...