Website Markup (Верстка сайту)

Верстка сайту — це процес перетворення дизайнерського макета на робочі сторінки, які правильно відображаються в браузері. Англійською Website Markup означає саме розмітку вебсторінки, тобто побудову її структури й зовнішнього вигляду за допомогою HTML, CSS і, за потреби, JavaScript. У межах веброзробки цей термін стосується не написання серверної логіки, а створення фронтенд-частини, яку бачить користувач.

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

У практичному сенсі верстка починається з макета в Figma, Sketch або іншому редакторі дизайну. Верстальник переносить у код сітку, блоки, заголовки, зображення, кнопки, форми, меню та інші елементи інтерфейсу. Важливо не лише повторити зовнішній вигляд, а й зберегти логіку розташування: щоб сторінка була читабельною, адаптивною і коректно поводилася на різних екранах.

Для цього використовують:

HTML — задає зміст і структуру сторінки;
CSS — відповідає за стилі, відступи, шрифти, кольори, адаптацію;
інколи JavaScript — додає інтерактивність, якщо вона передбачена макетом.

Як це працює на практиці

Якісна верстка сайту враховує не лише візуальну відповідність, а й технічні вимоги. Сторінка має однаково передбачувано виглядати в Chrome, Firefox, Safari та інших браузерах, не ламатися під час зміни ширини вікна і залишатися зручною для навігації з клавіатури. Тому під час роботи часто застосовують семантичні теги, гнучкі блоки, медіазапити та перевірку доступності.

Основні ознаки доброї верстки

відповідність макету без помітних зсувів і перекручень;
адаптивність для мобільних, планшетів і десктопів;
акуратна структура коду, яку легко підтримувати;
коректне відображення в різних браузерах;
зручність для користувача і пошукових систем.

Де застосовується

Верстка потрібна під час створення лендінгів, корпоративних сайтів, інтернет-магазинів, блогів і вебсервісів. У невеликих проєктах її часто виконує один фронтенд-розробник, а в більших командах — окремий верстальник у зв’язці з дизайнером, UI/UX-фахівцем і програмістом. Якщо макет складний, верстка може включати анімації, компоненти інтерфейсу та повторно використовувані шаблони.

Чим верстка не є

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