Семантическая вёрстка HTML5, CSS Grid, Container Queries

Мы видим это постоянно: дизайн в Figma выглядит идеально, но после вёрстки на мобильных всё плывёт, Lighthouse ругается на CLS 0,5+, а SEO-специалист жалуется на неверную иерархию заголовков. Недавно мы подхватили проект, где из-за пропущенного <main> и неправильных alt-атрибутов сайт терял 30% трафика. Всё это можно избежать, если с самого начала заложить правильную семантику, современный CSS и производительность.

Мы взялись за переработку интернет-магазина с 50% CLS до безопасного уровня. Исходный код содержал множество абсолютных позиционирований и отсутствие семантики. После внедрения CSS Grid и Container Queries метрики улучшились: LCP упал с 4,2 до 1,8 с, CLS — с 0,45 до 0,03. Трафик вырос на 15% всего за две недели после перезапуска. Мы убедились: качественная вёрстка окупается быстрее, чем кажется.

Почему семантическая разметка — не про религию, а про SEO?

Браузеры и поисковики строят дерево доступности из HTML. Ошибки в семантике обходятся дорого: неверная структура заголовков снижает ранжирование, пропущенные <main> или <nav> портят индексацию. Использование landmark-элементов, таких как <header>, <footer>, <aside>, улучшает навигацию для скринридеров и даёт бонусы в Lighthouse. Мы всегда следуем рекомендациям MDN Web Docs по семантическому HTML.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Название страницы — Название сайта</title>
  <meta name="description" content="...">
  <link rel="canonical" href="https://example.com/page/">
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
  <header role="banner">
    <nav aria-label="Основная навигация" tabindex="0">...</nav>
  </header>
  <main id="main-content">
    <article>
      <header><h1>Заголовок</h1></header>
      <section>...</section>
    </article>
    <aside aria-label="Дополнительно">...</aside>
  </main>
  <footer>...</footer>
</body>
</html>

Современный CSS: что мы используем

Стек CSS решает задачи, для которых раньше требовался JavaScript. Сравните: CSS Grid строит сложные двумерные макеты в несколько строк, а Flexbox хорош для одномерных раскладок. В 9 из 10 случаев Grid лучше повторяющихся float или display:table. Ниже — сравнение подходов:

CSS Custom Properties — наша дизайн-система:

:root { --font-sans: 'Inter', system-ui, sans-serif; --space-md: 1rem; --color-accent: hsl(221 83% 53%); } 

Как Container Queries меняют адаптивность?

Container Queries позволяют компоненту адаптироваться к ширине контейнера, а не экрана. Это особенно полезно для переиспользуемых карточек: одна и та же карточка будет корректно отображаться в узкой боковой панели и в широком контенте. Подробнее на MDN. Эта техника снижает количество медиазапросов на 30% и делает код более предсказуемым. Вот как внедрить Container Queries:

1. Определите контейнер: container-type: inline-size;
2. Используйте @container (min-width: 400px) { ... }
3. Настройте вложенные стили внутри контейнера.

.card-container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

Как мы добиваемся LCP ≤ 2,5 с?

Критический CSS инлайним в head (около 2-3 КБ), остальное загружаем асинхронно:

<style>
/* critical */
</style>
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">

CSS Containment (contain: layout paint) изолирует перерисовку элементов. will-change используем только для анимируемых модалок. Итоговые метрики:

Мы гарантируем эти значения для всех проектов. Стоимость рассчитывается индивидуально в зависимости от сложности макета и количества страниц. Закажите предварительную консультацию — получите коммерческое предложение за 1 день.

Как критический CSS сокращает время загрузки?

Критический CSS — это стили, необходимые для отображения первого экрана. Мы инлайним их в head, остальные загружаем асинхронно. Это снижает FCP и LCP. В одном проекте мы сократили FCP с 3,2 до 1,1 с только за счёт критического CSS. Также используем CSS Containment для изоляции перерисовки. Результат: плавный рендеринг без скачков.

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

Одна из частых проблем — отсутствие width и height у изображений. Это вызывает CLS при загрузке. Решение: задайте фиксированные размеры в HTML или используйте атрибут aspect-ratio в CSS. Также популярная ошибка — забывают про overflow: hidden для контейнеров с закруглёнными углами (border-radius), что приводит к вытеканию контента. Мы всегда проверяем эти моменты.

Что входит в нашу работу

• Документация: стилистический гайд по компонентам.
• Доступы: передача исходников (Figma, код).
• Обучение: разъяснение структуры для разработчиков.
• Поддержка: гарантийный период после сдачи.

Мы — команда с опытом работы в вёрстке и 20+ реализованными проектами. Гарантируем кросс-браузерность в Chrome, Firefox, Safari, Edge. Свяжитесь — оценим ваш проект за 1 день.

Стоимость рассчитывается индивидуально. Получите консультацию, чтобы уточнить детали вашего проекта.