Верстка сайту є одним з найважливіших етапів розробки, оскільки від нього залежить кінцевий результат проєкту. Термін верстка” запозичений з поліграфії, де він означає процес оформлення макета у друковане видання. Поняття верстки вебсайту має схоже значення з друкарською версткою, адже означає процес розробки функціонального сайту за дизайнерським макетом.
Наша стаття допоможе вам детальніше ознайомитись з версткою вебсайтів, її видами й правилами впровадження. Ви також дізнаєтесь про те, як розпочати верстати сайт та які інструменти для цього потрібні.
Що таке верстка сайту?
Верстка сайту - це створення сторінок вебсайту на основі макета, який розробив дизайнер. У верстці використовують 2 основні мови: HTML та CSS. HTML - мова розмітки, яка використовує теги для створення скелета майбутньої сторінки. CSS - мова стилю, що задає зовнішній вигляд елементам сторінки: колір, розмір, шрифт, поля, та інші дизайнерські рішення.
Однак верстка вебсторінок не обмежується лише двома описаними вище мовами, варто не забувати про JavaScript. Ця мова дозволяє додати інтерактивності сторінкам вашого сайту, щоб користувачі могли взаємодіяти з ними.
Що входить у верстку сайту?
Мова розмітки HTML - це база для розробки будь-якого сайту. У написанні коду верстальник використовує теги, які відповідають за розміщення елементів на сторінці. Його завданням є створення розмітки сайту, який зчитуватиметься браузерами та буде адаптивним до екранів користувачів.
У наступній таблиці представлені основні теги, які знадобляться вам у верстці вебсторінок мовою розмітки. Детальніше з HTML версткою ви можете ознайомитись на сайтах W3schools та Web.dev.
| <body> | Тег, в якому розташовано весь контент на сторінці |
| <header>, <footer> | Верхня та нижня частини сайту |
| <main> | Головний контент сторінки |
| <nav> | Навігаційні елементи |
| <div> | Розділення та групування елементів сторінки у блоки |
| <article> | Визначення пов’язаної між собою інформації у незалежний блок |
| <h1> | Головний заголовок для опису вмісту сторінки, використовується лише один раз |
| <h2> | Другорядний заголовок для організації вмісту. H2 може використовуватись декілька разів |
| <h3-6> | Підзаголовки для більшого інформаційного наповнення сторінки, є менш значущими в ієрархії |
| <img>, <video>, <audio> | Основні теги для виведення мультимедіа |
| <p> | Текстовий абзац |
| <span> | Виділення важливої інформації у тексті з подальшою стилізацією тегами CSS |
| <b>, <strong> | Виділення тексту жирним, але strong надає тексту більшого семантичного значення |
| <table>, <tr>, <th>, <td> | Створення таблиць, рядків, заголовків та комірок |
| <br> | Перехід на новий рядок без додавання пропусків |
| <a> | Гіперпосилання на визначену частину вебсторінки або на іншу сторінку в інтернеті |
| <button> | Клікабельні елементи |
| <form> | Форма, для обміну даними з користувачем |
| <input>, <textarea>, <select>, <option> | Поля та елементи, які використовуються у тегу <form> для введення даних |
| <ul>, <ol>, <li> | Марковані (ul) та нумеровані (ol) списки з впорядкованими елементами (li) |
Які є види верстки?
Серед основних ми можемо виділити наступні види верстки, які відрізняються своїм підходом та реалізацією:
Таблична
Це тип розмітки, у якій структура сторінки сайту створюється таблицями. Таблиця будується тегами <table>, у ній повинен бути принаймні один рядок <tr> та одна комірка <th> або <td> для наповнення контентом.
Таблиці хоч і вважаються застарілими, проте використовуються верстальниками через низку переваг:
- Таблиці мають фіксований розмір;
- Велика кількість доступних параметрів для редагування;
- Стислість коду та швидкість його завантаження.
Попри кількість переваг використання цього виду, як основного, не підійде для великих проєктів. Таблиці спричиняють проблеми з індексацією контенту та негативно впливають на SEO. Тому цей вид верстки перестав активно використовуватись і на заміну таблицям прийшли блоки.
Блочна
Блочний вид є найпопулярнішим у сучасній верстці вебсторінок. Для побудови блоків верстальник використовує HTML тег <div>, який утворює контейнер для наповнення контентом. Для його зовнішнього опису застосовують теги мови стилів CSS.
Цей вид надає більше можливостей для редагування, наприклад, накладання контенту один на одного, що полегшує керування. Серед інших можливостей виділимо:
- Зручне редагування коду;
- “Гумове” розташування блоків, що покращує адаптивність;
- Розташування елементів з точністю до пікселя.
Цей тип верстки також має недоліки. Вони полягають у кросбраузерності, оскільки пошукові системи по-різному відображають html-код, і вихідний макет може змінитись.
Адаптивна
Адаптивна верстка дозволяє коректно відображати інформацію на різних пристроях та браузерах. Перевагами цього виду розробки є:
- Покращення користувацького досвіду;
- Підлаштування під різні розміри екранів;
- Кросбраузерність.
Адаптивність є невід’ємною частиною двох попередніх видів верстки, оскільки є запорукою зручності взаємодії з вашим контентом.
Семантична
Це верстка вебсторінок з використанням семантичних HTML тегів, які визначають внутрішню ієрархію елементів на сторінці. Основними семантичними тегами є: <header>, <nav>, <nav>, <main>, <article>, <section>, <footer>, тощо. Структура контенту на сторінці визначається залежно від важливості інформації, тобто важливіша - зверху, менш важлива - знизу.
Серед переваг у семантичній розробці є:
- Підтримка семантичних тегів усіма найпопулярнішими браузерами;
- Зрозумілий код;
- Ці теги спрощують роботу пошуковим роботам, що позитивно впливає на розуміння вмісту сторінки.
Детальніше про семантичну верстку ви можете прочитати у нашій статті “Семантична верстка”.
Також верстку сайтів поділяють на види за розміщенням елементів на сторінках: жорсткий та гумовий. Жорсткий - це вид розташування контенту з фіксованими розмірами. Елементи у “жорсткому” розміщенні не адаптуються до роздільної здатності монітора користувача. Гумовий - це вид, коли контент індивідуально підлаштовується під розміри екрана пристрою, оскільки елементи пропорційно розтягуються та стискаються.
Види верстки сайтів не обмежуються описаними вище. Залежно від особливостей технічного завдання верстальник може звернутися до інших інструментів, для покращення своєї роботи. Кожен вид має ряд переваг та недоліків, тому найкраще вони працюють у комплексі.
Що потрібно для верстки сайту?
Верстка вебсайту потребує використання різних інструментів. Пропонуємо вам ознайомитись зі списком редакторів та допоміжних плагінів для створення дизайну, написання коду, перевірки та тестування.
Редактори коду:
- Sublime Text – кросплатформний текстовий редактор. Легкий та зрозумілий у використанні, дозволяє працювати з багатьма мовами й відкритий до встановлення додаткових плагінів.
- Visual Studio Code – зручний редактор коду, що доступний для найпопулярніших операційних систем: Windows, Mac OS та Linux. Дозволяє використовувати різноманітні мови програмування, та підтримує розширення для встановлення нових.
Графічні редактори:
- Figma – хмарний графічний редактор для створення дизайну. Він дозволяє команді спільно працювати над одним проєктом, тому для багатьох стає основним інструментом у розробці.
- InVision – хмарний інструмент для розробки прототипів дизайну. Він також надає змогу спільної роботи, тож команда з дизайнерів та верстальників можуть працювати разом.
Перевірка та тестування:
- Валідатор W3C – безкоштовний сервіс, що допомагає перевірити HTML розмітку на коректність. Проте варто врахувати, що при перевірці сайту валідатор обробляє лише синтаксичні помилки, а не семантичні.
- BrowserStack – хмарний сервіс для тестування вебсторінок на адаптивність та кросбраузерність. Інструмент гарантує правдивість перевірки, оскільки вона здійснюється більш ніж на 2000 реальних пристроях та браузерах.
Додаткові інструменти:
- Prettier – розширення для VS code, яке допомагає структурувати код з великою кількістю рядків. Вам необхідно лише виділити потрібну частину коду і плагін приведе його до ладу.
- CSS3 Generator – сервіс для генерації коду мовою стилів CSS. Він полегшує роботу верстальника, оскільки дозволяє розробити зовнішній вигляд сторінки без поглиблених знань.
Ви можете використовувати у роботі запропоновані нами інструменти, або ж звертатись до тих, які вимагають особливості вашого проєкту.
Які є етапи верстки сайту?
Планування та підготовка. На цьому етапі визначте цілі та завдання вашого вебсайту. Створіть структуру сторінки, визначивши розташування таких елементів, як колонки, заголовки, текст, зображення тощо. Проаналізуйте свою цільову аудиторію та розробіть контент сайту відповідно до їх потреб.
Написання HTML коду. Можете розпочати верстку вебсторінки на основі макета розробленого дизайнером. Створіть HTML розмітку з використанням основних тегів для створення таблиць, заголовків, блоків та списків. Дотримуйтесь правильного та логічного написання, щоб не мати помилок у коді.
Додавання CSS. Мова опису допоможе визначити зовнішній вигляд майбутньої сторінки. Шрифт, відступи, текст, фон та інші елементи матимуть свій стиль та колір, завдяки використанню тегів CSS. Оскільки HTML та CSS код зберігаються в окремих файлах вам необхідно підключити їх одне до одного, щоб на сторінці відобразився результат.
Тестування. Перевірте свій код на відсутність помилок та чистоту, важливо, щоб він не був заплутаним, а мав чітку структуру. Необхідним також є перевірка вебсторінки на коректність відображення на різних браузерах та гаджетах Здійснити перевірку можна завдяки безкоштовним сервісам CrossBrowserTesting та BrowserStack.
Оптимізація. Зображення займають багато місця на сервері, тому їх необхідно оптимізувати, зменшивши розмір. В результаті, ваша сторінка буде завантажуватись швидше.
Запуск та підтримка. Опублікуйте сторінку, щоб вона була доступною для користувачів. Налагодьте процес постійної підтримки сторінки після публікації. Слідкуйте за тим, щоб контент був актуальним, та за потреби оновлюйте його.
Описані етапи являються основними у розробці. Вони можуть змінюватись залежно від ваших потреб та складностей проєкту.
Ознаки правильної верстки
Головними завданнями у верстці вебсторінок є правильне розміщення елементів, забезпечення оптимізації та налагодження адаптивності. Це позитивно впливає на ранжування у пошукових системах та покращить користувацький досвід. Серед інших основних ознак можемо виділити наступні:
- Валідність - відсутні помилки у коді;
- Правильно розроблена структура сторінки;
- Простий код;
- Зображення не займають багато місця та мають інформативний опис;
- Контент на сторінці швидко завантажується;
- Зберігаються розміри вихідного макету;
- Стилі CSS зберігаються в окремому файлі.
Ігноруючи ці вимоги ви ризикуєте зменшити охоплення вашого сайту через його погану продуктивність.
Тестування вебверстки
Тестування є важливим етапом у верстці сайту, оскільки дозволяє визначити наявність помилок до публікації сторінки. Пропонуємо ознайомитись з пунктами, які варто враховувати у ході перевірки:
- Кросбраузерність;
- Адаптивність;
- Сумісність з різними розмірами екранів;
- Відповідність макету;
- Валідність кодів HTML та CSS;
- Коректність роботи елементів, створених мовою JS;
- Швидкість завантаження;
- Орфографія та граматика;
- Правильність внутрішніх посилань.
Після цієї перевірки сайт буде готовий до публікації.
Висновки
Верстка сайту є важливим етапом у розробці, тому необхідно враховувати всі її особливості. Вона повинна бути: валідною, оптимізованою, відповідною макету, кросбраузерною, адаптивною, швидко завантажуватись та мати простий код.
Верстальник у своїй роботі використовує різні допоміжні інструменти, які не обмежуються редакторами кодів. У верстці вебсайту також необхідними є графічні редактори, сервіси для перевірки, тестування й інші додаткові плагіни для полегшення та покращення роботи.
Існує чотири основні види верстки – таблична, блочна, адаптивна та семантична. Всі вони пропонують свої особливості у використанні, проте найкраще працюють у комплексі. Обирайте той вид, який найбільше підходить вимогам вашого сайту.
