Блокова верстка: що це і навіщо вона потрібна?

Верстка починає свій шлях з тих часів, коли код писався в HTML, а розмітка виконувалася за допомогою таблиць. З часом від цього відійшли, а розмітку переклали на CSS. Зараз існує кілька способів верстки. Сучасними можна вважати Flex-box, набір інструментів Bootstrap, а також самі останні Grids, дають величезні можливості творцям. Одним із перехідних варіантів у становленні Web-а є блочна верстка. Раніше використовувалася для створення розмітки сторінки, нині вона вважається застарілою, але тим не менше все ще знаходить широке застосування в окремих випадках.

Що являє собою блокова верстка?

Вона замінила застарілу і недосконалу табличну. Сторінка складається з так званих шарів, чи блоків, а цеглинками для цього служить закриваючий тег
. Це блоковий тег, що займає всю ширину батьківського елемента і висоту за розміром контенту. Пізніше таку верстку стали називати “дивна”. Основою для орієнтування на сторінці є так звані класи.

Цікаве:  Як почистити реєстр на компютері?

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

Для наочності блочну верстку можна представити наступним чином:

контент

контент

контент

Div з класом wrapper являє собою батьківський контейнер або, іншими словами, обгортку. Елементи з класом element – це своєрідні “цеглинки” нашої складної структури. Зверніть увагу, що різний відступ від краю, в порівнянні з батьківським елементом, використовується в коді для наочності, щоб легше було визначити структуру та ієрархію елементів.