Карточка товара — ключевой элемент интерфейса интернет-магазина, который напрямую влияет на конверсию. Правильная верстка сочетает семантический HTML, адаптивный CSS и UX-принципы. Рассмотрим поэтапное создание карточки с чистым кодом и разберем распространенные ошибки.

Базовая структура HTML

Семантическая разметка улучшает доступность и SEO. Используйте теги section, article, button вместо универсальных div.

<article class="product-card"> <div class="product-image"> <img src="product.jpg" alt="Название товара"> <span class="discount-badge">-15%</span> </div> <div class="product-info"> <h3 class="product-title">Название товара</h3> <div class="product-rating"> </div> <div class="product-price"> <span class="current-price">2 490 ₽</span> <span class="old-price">2 990 ₽</span> </div> <button class="add-to-cart">В корзину</button> </div>
</article>

Стилизация CSS

Стили должны обеспечивать визуальную иерархию и адаптивность. Пример базовых стилей:

.product-card { border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px; max-width: 300px; font-family: sans-serif;
}
.product-image { position: relative; margin-bottom: 12px;
}
.discount-badge { position: absolute; top: 8px; right: 8px; background: #ff4444; color: white; padding: 4px 8px; border-radius: 4px; font-size: 14px;
}
.product-title { font-size: 18px; margin: 0 0 8px 0;
}
.current-price { font-size: 20px; font-weight: bold; color: #333;
}
.old-price { text-decoration: line-through; color: #999; margin-left: 8px;
}
.add-to-cart { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; width: 100%;
}

Адаптивность и мобильная версия

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

@media (max-width: 768px) { .product-card { max-width: 100%; padding: 12px; } .product-title { font-size: 16px; } .add-to-cart { padding: 10px 20px; }
}

Типичные ошибки верстки

Избегайте этих распространенных проблем:

  • Неадаптивные изображения — используйте max-width: 100% для img
  • Несемантическая разметка — заменяйте div на button, section, article
  • Отсутствие состояний hover/focus для интерактивных элементов
  • Магические числа в CSS — вместо фиксированных значений используйте переменные

Сравнение подходов к верстке

Подход Плюсы Минусы
Простое выравнивание, контроль порядка элементов Сложности с многострочными layout
Мощное управление сеткой, двумерное выравнивание Более сложный синтаксис
Широкая поддержка браузерами Устаревший подход, требует clearfix

Чек-лист проверки карточки

Перед запуском убедитесь, что:

  • Изображения оптимизированы и адаптивны
  • Текст читается на всех разрешениях
  • Кнопки имеют достаточный размер для тапа на mobile
  • Цветовой контраст соответствует WCAG
  • Семантика HTML проверена валидатором

Частые вопросы

Какие обязательные элементы должны быть в карточке товара?

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

Как сделать карточку товара адаптивной?

Используйте медиа-запросы CSS, относительные единицы измерения (%, rem, vw), flexbox или grid для изменения layout на мобильных устройствах.

Какие типичные ошибки допускают при верстке карточек?

Частые ошибки: неадаптивные изображения, слишком мелкий шрифт на mobile, отсутствие hover-эффектов, неправильная семантика HTML.