Верстка — це процес перетворення графічного макета дизайну на робочий код сторінки за допомогою HTML і CSS (а часто ще й JavaScript). Простими словами, верстальник бере «картинку» від дизайнера й «оживляє» її: робить так, щоб макет коректно відображався в браузері й правильно поводився на будь-якому екрані.
Простими словами: дизайнер намалював будинок на папері, а верстальник збудував його з реальних цеглин — HTML-тегів і CSS-стилів. Гарний ескіз без верстки лишається лише картинкою.
Що таке верстка і навіщо вона потрібна
Верстка — це місток між дизайном і живим сайтом. Від її якості напряму залежить швидкість завантаження, коректність відображення й навіть SEO: пошуковик читає саме HTML-код, а не картинку макета. Неохайна верстка з «важким» кодом уповільнює сторінку, а це б’є по Core Web Vitals і позиціях.
Окремо важлива адаптивна верстка — коли одна сторінка коректно виглядає і на смартфоні, і на десктопі. З 2019 року Google індексує сайти за принципом mobile-first, тож без адаптиву сучасний сайт просто неконкурентний.
Як працює верстка
- HTML задає структуру: заголовки, абзаци, блоки, зображення.
- CSS відповідає за вигляд: кольори, відступи, шрифти, розкладку.
- JavaScript додає інтерактив: слайдери, меню, форми.
- Media queries перебудовують розкладку під різну ширину екрана.
Які бувають види верстки
- Фіксована — жорстка ширина в пікселях (застаріла).
- Гумова — ширини у відсотках, «тягнеться» під екран.
- Адаптивна — розкладка перебудовується під діапазони ширини.
- Респонсивна — плавно «тече» під будь-який розмір екрана.
Приклад
Дизайнер віддав макет у Figma: головна з трьома блоками послуг у ряд. Верстальник переносить це у HTML/CSS так, щоб на десктопі було три колонки, на планшеті — дві, а на смартфоні — одна на всю ширину. Це і є перехід від статичної картинки до живої адаптивної сторінки.
Часто плутають з…
- Веб-дизайн — це створення макета й візуалу; верстка — його перенесення в код.
- Програмування (бекенд) — це серверна логіка й бази даних; верстка — це фронтенд-«обгортка».
- Дизайн-макет — це вихідна «картинка», а не готовий код.
Питання та відповіді
Чим верстка відрізняється від дизайну?
Дизайн — це створення макета сторінки (як вона має виглядати). Верстка — перетворення цього макета на робочий HTML/CSS-код, який відкривається в браузері.
Що таке адаптивна верстка?
Це верстка, за якої одна сторінка коректно відображається на будь-якому екрані — від смартфона до великого монітора — без окремих версій сайту.
Чи впливає верстка на SEO?
Так. Чистий, легкий код прискорює завантаження й покращує Core Web Vitals, а коректна семантика HTML допомагає Google краще розуміти зміст сторінки.
Є макет у Figma, потрібен готовий код? Зробимо HTML-верстку з Figma та адаптивну верстку.
Схожі терміни: Адаптивний дизайн, HTML, PageSpeed, Веб-сторінка.
