Що таке верстка сайту та як її перевіряти

Верстка сайту — це переведення макета дизайну в код, який розуміє браузер. HTML задає структуру та зміст сторінки, CSS відповідає за вигляд і розташування, JavaScript додає інтерактивні сценарії.

Що входить у верстку сайту?

Верстальник отримує макет із Figma і збирає з нього шаблони сторінок. До роботи входять розмітка HTML, стилі CSS, підключення шрифтів та іконок, адаптація під екрани й базові інтерактивні елементи: меню, вкладки, слайдер, модальне вікно. Потім шаблони підключають до CMS — WordPress, MODX або фреймворку Next.js, — щоб редактор міг змінювати тексти без програміста.

Семантика важить для пошуку й доступності. Один H1 на сторінці, логічні H2–H3, списки як списки, кнопки як кнопки. Саме цю структуру читають пошукові системи та ШІ-асистенти. Скрінрідер теж.

Як розташовують елементи: Flexbox, Grid і потік документа

У CSS використовують звичайний потік документа, Flexbox і Grid. Flexbox зручний, коли елементи стоять уздовж однієї осі: рядок кнопок, пункти меню, картка з іконкою й текстом. Grid задає сітку рядків і стовпців: каталог, галерея, розкладка всієї сторінки.

Таблична верстка сторінок належить до історичних підходів. HTML-таблиці застосовують для табличних даних із заголовками та зрозумілими зв’язками між клітинками. Верстка листів для розсилок живе за своїми правилами: поштові клієнти підтримують CSS обмежено, тож листи верстають окремо й перевіряють у кількох клієнтах.

Що таке адаптивна верстка?

Адаптивна верстка підлаштовує сторінку під доступну ширину, розмір тексту й вміст. Для цього є медіазапити, гнучкі одиниці (%, rem, clamp), зображення з атрибутами srcset і sizes. У 2026 році більшість відвідувачів комерційних сайтів приходить зі смартфонів, тому мобільну версію перевіряють першою.

Окрема тема — швидкість. Важкі картинки без розмірів, шрифти без font-display і зайві скрипти погіршують показники Core Web Vitals. Google враховує їх у ранжуванні, про це — у статті про швидкість сайту та SEO.

Що перевірити під час приймання верстки?

• Заголовки утворюють зрозумілу структуру, на сторінці один H1, форми мають підписи.
• Сторінка працює на вузькому й широкому екрані, текст витримує збільшення масштабу до 200%.
• Кнопки й посилання доступні з клавіатури, фокус видно, контраст тексту достатній.
• Довгі назви, порожні блоки й помилки форми відображаються коректно.
• Зображення зберігають пропорції, кожне має alt мовою сторінки.
• У консолі браузера немає помилок, PageSpeed Insights не показує зсувів макета.

Перевіряйте верстку на реальному вмісті. Короткі демонстраційні тексти ховають проблеми майбутнього каталогу. Довга назва товару українською легко ламає картку, розраховану на три слова.

Типові помилки верстки

Що передати замовнику після верстки?

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

Скільки часу займає верстка?

Строк залежить від кількості унікальних шаблонів і готовності макета. З нашого досвіду лендинг із версткою та підключеною формою ми запускаємо до 3 робочих днів, сайт-візитку чи корпоративний сайт — до 10 робочих днів після погодження ТЗ і отримання матеріалів. Проєкти з інтеграціями оцінюємо після ТЗ. Детальніше про етапи — на сторінці створення сайтів.

Часті запитання

Чим верстка відрізняється від програмування?

Верстка відповідає за вигляд і структуру сторінки: HTML і CSS. Програмування додає логіку: особистий кабінет, кошик, обмін даними з CRM чи оплатою. На практиці один проєкт зазвичай потребує і того, й іншого.

Що означає «кросбраузерна верстка»?

Сторінка однаково працює в актуальних версіях Chrome, Safari, Firefox та Edge, на Android та iOS. Перелік браузерів і версій варто зафіксувати в ТЗ, щоб приймання йшло за зрозумілими правилами.

Чи потрібна верстка, якщо сайт роблять на WordPress?

Так. Готова тема теж складається з верстки, і її доводиться допрацьовувати під ваш контент. Унікальний дизайн верстають з нуля й підключають до WordPress або MODX як власну тему.

Як самостійно оцінити якість верстки?

Відкрийте сайт на телефоні й комп’ютері, збільште масштаб до 200%, пройдіть форму клавішею Tab. Запустіть PageSpeed Insights і перегляньте вкладку доступності. Цього вистачає, щоб помітити основні проблеми.

Чи впливає верстка на SEO?

Впливає через структуру заголовків, швидкість завантаження, мобільну версію й доступність тексту для індексації. Акуратна семантична верстка полегшує роботу пошуковим системам і ШІ-пошуку.

Читайте й дивіться за темою

• Створення сайтів
• Розробка посадкових сторінок
• Редизайн сайту
• Вибір CMS для корпоративного сайту

Джерела

• MDN: CSS layout
• MDN: responsive web design
• W3C: WCAG 2.2