Разметка в HTML — это не просто «теги ради тегов». Это скелет страницы: он говорит браузеру и поисковику, где навигация, где основной контент, где боковая панель. Разберём, как логично разметить три типовых страницы: главную, статью и каталог.
Главная страница: баланс блоков
Главная — это витрина. В ней обычно есть навигация, «первый экран» с главным посылом, блоки преимуществ/услуг, каталог или новинки, контакты. Логика разметки — через смысловые контейнеры.
Пример структуры:
html
<!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> <li><a href="/articles">Статьи</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <main> <section class="hero"> <h1>Что мы делаем и зачем это нужно</h1> <p>Короткий понятный текст о ценности для пользователя.</p> <button type="button">Начать работу</button> </section> <section aria-labelledby="catalog-heading"> <h2 id="catalog-heading">Популярные товары</h2> <div class="product-grid"> <article class="product-card"> <img src="/img/product-1.jpg" alt="Товар 1: описание сути"> <h3>Название товара 1</h3> <p>Краткое описание, цена, кнопка «В корзину».</p> </article> <!-- Другие карточки --> </div> </section> <section aria-labelledby="articles-heading"> <h2 id="articles-heading">Полезные статьи</h2> <ul class="article-list"> <li> <a href="/articles/1">Как выбрать товар правильно</a> </li> <!-- Другие статьи --> </ul> </section> </main> <aside> <section> <h3>Подписка на новости</h3> <!-- Форма подписки --> </section> <section> <h3>Контакты</h3> <address> г. Город, ул. Примерная, 1<br> Телефон: +7 (999) 000-00-00<br> Email: info@example.com </address> </section> </aside> <footer> <p>© 2024 Компания. Все права защищены.</p> <nav aria-label="Нижнее меню"> <a href="/privacy">Политика конфиденциальности</a> <a href="/terms">Условия использования</a> </nav> </footer> </body> </html>
На что обратить внимание:
<header>— шапка с логотипом и основным меню.<main>— единственный на странице, содержит основной контент.<section>— смысловые блоки (герой, каталог, статьи).<article>— самостоятельные элементы (карточки товаров, отдельные статьи).<aside>— второстепенная информация (подписка, контакты, фильтры).<footer>— подвал с копирайтом и ссылками.
Страница статьи: приоритет контента
У статьи задача простая: дать пользователю текст и не мешать. Поэтому структура максимально линейная: навигация, заголовок, основной контент, похожие статьи.
Пример:
html
<main> <article> <header> <h1>Как правильно выбирать товары: практическое руководство</h1> <p class="meta"> Автор: Иван Иванов | Дата: 24.08.2024 | Время чтения: 7 минут </p> </header> <section class="intro"> <p>Вводный абзац: коротко о сути и пользе статьи.</p> </section> <section> <h2>Основные критерии выбора</h2> <p>Текст раздела. Здесь могут быть списки, таблицы, цитаты.</p> <ul> <li>Критерий 1: важное свойство.</li> <li>Критерий 2: ещё одно свойство.</li> </ul> </section> <section> <h2>Примеры и разбор</h2> <figure> <img src="/img/example-1.jpg" alt="Пример выбора товара по критериям"> <figcaption>Рис. 1. Пример сравнения характеристик.</figcaption> </figure> <p>Пояснения к примеру.</p> </section> <section aria-labelledby="related-heading"> <h2 id="related-heading">Похожие статьи</h2> <ul class="related-articles"> <li><a href="/articles/2">Ещё одна полезная статья</a></li> <li><a href="/articles/3">Сравнение товаров по характеристикам</a></li> </ul> </section> </article> </main>
Практические моменты:
- Вся статья — в одном
<article>. Это даёт семантику: «это отдельный, самодостаточный материал». - Вводный раздел удобно выделять отдельным
<section class="intro">. - Для картинок используйте
<figure>и<figcaption>: это улучшает доступность и восприятие структуры. - Метаданные статьи (автор, дата, время чтения) логично держать в
<header>внутри<article>.
Учитывая ваши прошлые задачи по статьям и админке: если вы делаете форму редактирования статьи, поля «автор», «дата», «время чтения» можно выводить именно в этот блок, а не прятать где-то в подвале.
Каталог товаров: сетка и карточки
Каталог — это список карточек. Главная цель — чтобы пользователь быстро понял, что перед ним товар, и увидел ключевые данные: фото, название, цену, кнопку.
Пример сетки:
html
<main> <h1>Каталог товаров</h1> <aside class="catalog-sidebar"> <form class="filter-form"> <fieldset> <legend>Фильтры</legend> <!-- Поля фильтров --> </fieldset> </form> </aside> <section class="catalog-grid"> <article class="product-card"> <a href="/products/1" class="product-link"> <img src="/img/prod-1.jpg" alt="Название товара 1 — краткое описание"> <h2 class="product-title">Название товара 1</h2> <span class="product-price">1 500 ₽</span> </a> </article> <article class="product-card"> <a href="/products/2" class="product-link"> <img src="/img/prod-2.jpg" alt="Название товара 2 — краткое описание"> <h2 class="product-title">Название товара 2</h2> <span class="product-price">2 300 ₽</span> </a> </article> </section> </main>
Важные нюансы:
- Карточка товара — это
<article>: она самодостаточна и может быть ссылкой на детальную страницу. - Ссылка-обёртка вокруг карточки — удобно для UX: клик в любом месте карточки ведёт на товар.
- Фильтры — в
<aside>рядом с сеткой: это второстепенный блок, который не должен мешать основному контенту. - У изображений товаров обязательно пропишите осмысленный
alt: «Название товара — ключевые характеристики», а не просто «фото товара».
Частые ошибки и как их избежать
- Много
<div>без смысла. Результат: разметка не несёт семантики, сложнее поддерживать и адаптировать. Решение: используйте<header>,<main>,<section>,<article>,<aside>,<footer>. - Несколько
<main>на странице. Результат: проблемы с доступностью и индексацией. Решение:<main>должен быть один. - Заголовок H1 внутри
<article>, но не в начале. Результат: скринридеры и поисковики хуже понимают структуру. Решение: H1 — первым в<article>или сразу после<header>. - Карточки товаров без
<article>. Результат: теряется семантика «отдельного элемента». Решение: оборачивайте карточку в<article>. - Фильтры и сортировка в
<main>. Результат: они «перетягивают» внимание и мешают основному контенту. Решение: выносите в<aside>.
Загрузка...