Методи верстки сайтів

21

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

Чому не один?

Справедливе питання полягає в тому, чому не можна було придумати один єдиний спосіб і розвивати його? Але люди – істоти різні, тому вони придумали різні способи. Насправді їх не так багато, до того ж деякі сьогодні застаріли. Давайте розглянемо основні методи верстки.

Таблиця

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

Гідності. Такий підхід дозволяє достатньо легко створити багато колонок і рядків. Макети зі складною структурою досить просто верстаються з допомогою таблиці. Також тег table і всі пов’язані з ним елементи підтримуються абсолютно однаково у всіх браузерах.

Недоліки. Дуже громіздкий код – головний мінус табличної верстки. Потрібно відзначити, що в одну таблицю можна вставити іншу, тобто вкладену. Це призводить до великої вкладеності і купі тегів. І нікуди від цього не подітися, тому що всі ці теги потрібні для працездатності нашої таблиці. Розібратися в такому коді не дуже просто.

Табличні дані дуже складно адаптувати для перегляду на різних пристроях. Набагато простіше зробити це з блоками (блочна верстка, яку ми теж обов’язково розглянемо).

Альтернатива. Не так давно в CSS з’явилися спеціальні значення властивості display, які дозволяють імітувати таблицю, використовуючи насправді блоки. Наприклад, display: table, display: table-row, display: table-cell. Елементи, до яких застосовуватися ці властивості, почнуть вести себе як таблиця, ряд таблиці і осередок відповідно. Потрібно завантажити, що і цей метод недосконалий, тому що не зовсім однаково підтримується у всіх браузерах. Якщо ви використовуєте ці властивості, потрібно ретельно тестувати на кросбраузерність.

Фрейми

Колись існував ще один метод верстки, але сьогодні про нього майже забули. Суть верстки з допомогою фреймів полягає в тому, що вікно браузера ділиться на певну кількість незалежних блоків (фреймів), які формуються тегом frameset. Там вказується шлях до html-сторінці, яка буде завантажена в кадр.

Кожен кадр є незалежним елементом. Тобто смуги прокручування з’являються у кожного блоку окремо. Потрібно сказати, що фрейми так і не були офіційно прийняті, тому сьогодні практично не використовуються і взагалі вважаються поганим способом верстки.

Методи верстки сайтів

Рис. 1. Такий ось приклад сайту на фреймах я знайшов в мережі. Як ви розумієте, ніякої естетики.

Блоки

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

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

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

Недоліки. Їх практично немає. Блоки легко адаптувати, вони легко ховаються і змінюються. Контейнери div і span правильно відображаються навіть в старих браузерах. Якщо ж говорити про нових семантичних блоках, то у них немає повної підтримки. Втім, напевно вже скоро ця проблема буде вирішена. Вже сьогодні існують файли, підключення яких вирішує проблему підтримки нових елементів в старих браузерах. Метод блокової верстки буде існувати ще довго за його виключного зручності і простоти.

Флексбоксы (flex)

Самий новий метод верстки. Нормальну підтримку в браузерах вперше отримав з 2014 року. Тепер багато розробники дотримуються саме цього методу. Суть його в тому, що структурним елементам прописується display: flex. Це теж свого роду блоки, тільки більш гнучкі і функціональні.

Багато поки вважають флексбоксы не зовсім вдалим рішенням для побудови сітки сайту. Наприклад, для дрібних елементів на сторінці вже давно рекомендується використовувати флексбокс, але для каркаса сторінки багато як і раніше використовують float.

Швидше за все, в майбутньому флексбокс остаточно утвердиться як нова методика верстки сайтів, тому варто вже зараз вивчати властивості цього елемента.

Методи верстки сайтів

Рис. 2. Властивості flex-елементів роблять їх більш гнучкими, ніж блоки.

До достоїнств флексбоксов можна віднести нові css-властивості, які дозволяють вибудовувати різноманітні сітки і колонки без особливих зусиль. Також підтримується вертикальне центрування, яку не підтримує звичайний блок.

Висновок

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

Фрейми давно відкинуті як невдалий спосіб створення структури, але тег iframe цілком може стати в нагоді вам, якщо раптом знадобиться вставити в статтю інший сайт.

Нарешті, сьогодні ми маємо абсолютно новий спосіб верстки – елемент flex і його властивості, які роблять його більш гнучким і сучасним, ніж звичний block. На цьому на сьогодні все. Не забувайте читати нові статті на блозі, щоб знати все про сайтобудуванні.