Семантическая разметка карточки товара в веб-разработке без лишних элементов

Семантическая карточка товара использует только HTML-элементы, которые отражают её содержание: заголовок, ссылку, изображение, цену и наличие. Контейнер выбирают по контексту: например, <article> подходит для самостоятельного товарного блока, а <li> - для элемента списка. Такая разметка упрощает структуру страницы, поддержку и проверку доступности.

Опорные решения для компактной карточки товара

• Определите границы карточки: включайте в неё только сведения об одном товаре.
• Используйте <article>, если блок самостоятелен, или <li>, если карточка входит в список.
• Сделайте название ссылкой на страницу товара, если переход доступен пользователю.
• Не помещайте интерактивные элементы друг в друга: например, кнопку покупки внутрь ссылки.
• Сначала проверьте HTML и доступные подписи, затем решайте, нужна ли структурированная разметка.

Сначала определите содержимое карточки и её границы

Этот подход подходит для каталога, подборки или блока рекомендаций, где товары повторяются в едином формате. До верстки зафиксируйте состав карточки: название, изображение, цена, наличие и действия, если они предусмотрены.

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

Выберите семантический элемент для контейнера товара

Подготовьте структуру данных и доступ к шаблону страницы или компоненту каталога. Для разработки достаточно редактора кода и проверки HTML в браузере; перед изменениями в рабочем магазине используйте тестовую среду или сохраните возможность отката.

• <article> - карточка представляет самостоятельный товарный блок, который можно понять отдельно от соседних элементов.
• <li> - карточка является одним пунктом списка товаров; список обычно оформляют через <ul> или <ol>.
• <section> - уместен для тематически выделенного раздела с заголовком, но сам по себе не означает товарную карточку.

Не добавляйте контейнеры только ради CSS-классов: класс можно назначить семантическому элементу. При создании интернет-магазина под ключ заранее согласуйте с разработчиком структуру каталога и повторно используемых компонентов.

Свяжите название и изображение с нужной страницей

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

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

Перед пошаговой разметкой проверьте:

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

1. Выберите контейнер. Для самостоятельного блока используйте <article>, для элемента списка - <li>. Не вкладывайте один товарный элемент в другой без содержательной причины.
2. Добавьте название. Используйте заголовок подходящего уровня, например <h3>, исходя из иерархии заголовков всей страницы. Если название ведёт на страницу товара, поместите текст заголовка в ссылку.
3. Разметьте изображение. Укажите в alt краткое описание, которое помогает понять содержание изображения. Если изображение декоративное и рядом уже есть полное название товара, допустим пустой alt="".
4. Разделите переход и действие. Ссылку на товар и кнопку покупки оформляйте отдельными соседними элементами. Не вкладывайте <button> или другую ссылку внутрь ссылки на товар.

<article class="product-card">
  <h3>
    <a href="/catalog/termokruzhka">
      Термокружка
    </a>
  </h3>
  <a href="/catalog/termokruzhka">
    <img src="/images/termokruzhka.jpg"
         alt="Термокружка из нержавеющей стали">
  </a>
</article>

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

Разметьте цену, скидку и наличие без лишних обёрток

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

• Цена явно подписана или представлена в контексте, который однозначно указывает на стоимость товара.
• Для суммы использован <data value="...">, если нужно связать видимое значение с машиночитаемым; иначе допустим обычный текст.
• В атрибуте value цена записана без символа валюты, а пользователю показано понятное значение с валютой.
• Старая и новая цена различимы по подписи или контексту; зачёркивание не заменяет пояснения.
• Наличие указано текстом, понятным без цвета или иконки, например "В наличии".
• Состояние товара соответствует данным каталога, а не подставлено как постоянный текст во все карточки.
• Кнопка покупки, если она есть, не вложена в ссылку на страницу товара.

Добавьте доступные подписи и структурированные данные

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

• Не подменяйте содержательное описание товара пустым или бессмысленным текстом в alt.
• Не используйте одинаковый непустой alt для всех изображений каталога.
• Не вкладывайте ссылку в ссылку или кнопку в ссылку, создавая конфликтующие действия.
• Не выбирайте уровень заголовка только ради размера шрифта, не сверяясь со структурой страницы.
• Не добавляйте <section> или несколько <div> без самостоятельной семантической или технической задачи.
• Не выдавайте акционную цену за обычную и не показывайте устаревшее состояние наличия.
• Не размечайте структурированными данными цену, рейтинг или наличие, которых нет в видимом содержимом.
• Не считайте, что само наличие Schema.org гарантирует особое отображение страницы в поиске.

Если проекту нужна микроразметка, выберите подходящий формат и проверьте его отдельно от HTML-структуры. Для задачи "заказать разработку интернет-магазина" включите проверку соответствия структурированных данных фактическому содержимому в критерии приёмки.

Проверьте карточку на вложенность и корректность HTML

Выберите вариант контейнера по реальному контексту карточки:

• Самостоятельный товарный блок: используйте <article>, если его содержание имеет смысл отдельно от соседних карточек.
• Карточка в каталоге: используйте <li> внутри списка, если товары образуют перечень.
• Тематическая группа: используйте <section> с заголовком для раздела страницы, а внутри разместите список или самостоятельные товарные блоки.

Для проверки пройдите DOM-структуру от внешнего контейнера к ссылкам и действиям. Убедитесь, что теги закрыты, вложенность допустима, порядок чтения понятен без CSS, а переходы и действия работают по отдельности. Семантическая верстка сайта на HTML должна оставаться понятной и при отключённых стилях.

Спорные решения при разметке товарной карточки

Всегда ли карточку нужно оборачивать в <article>?

Нет. Если товар - пункт списка, уместнее <li>; <article> подходит для самостоятельного блока.

Можно ли сделать всю карточку одной ссылкой?

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

Нужно ли дублировать ссылку на изображении и названии?

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

Какой уровень заголовка выбрать для названия товара?

Выбирайте его по иерархии заголовков конкретной страницы, а не по внешнему размеру текста. Для оформления используйте CSS.

Нужно ли добавлять Schema.org в каждую карточку каталога?

Не обязательно: сначала определите задачу и формат разметки. Данные должны соответствовать видимому содержимому и актуальным сведениям о товаре.

Когда для изображения нужен пустой alt?

Когда изображение декоративное и не добавляет информации, уже доступной рядом. Для содержательной фотографии укажите краткое описание без повторения лишних деталей.