Семантична верстка 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="uk">
<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 день.

Вартість розраховується індивідуально. Отримайте консультацію, щоб уточнити деталі вашого проекту.