Блочна верстка

Блочна верстка — це тип дизайну сторінки, створений за допомогою блоків (тег <div>), розташування яких суворо контролюється через CSS (каскадних таблиць стилів), і в якому таблиці використовуються тільки для представлення табличних даних.

Перевагами даного типу є:

• Кешування блоків браузером, за рахунок чого швидке завантаження сторінок;
• Необмежені можливості по створенню складних дизайнів;
• Чітке відділення частини з контентом;
• Простота реалізації програмної частини;

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

Відповідно питання: чи можна створити професійний дизайн в табличній верстці? Звичайно можна: робиться це за блоками.

Блокова верстка з <div>

За допомогою розмітки визначається розташування елементів на вебсторінці. Наприклад, ми створюємо шапку сайту, всередині якої розміщуємо необхідний нам контент (логотип, номери телефонів, навігаційне меню і т. ін.). Точно так само чинимо з основним розділом вебсторінки, а також бічною панеллю і футером. Всі ці елементи, по суті, є певними HTML-тегами. І тегом номер один в блокової верстці є тег <div>.

Елемент <div> можна назвати своєрідним фундаментом для побудови вебсторінок. Спочатку він нічим не виділяється зовні, крім хіба що того факту, що це блоковий елемент, який за замовчуванням займає всю ширину документа, а наступний за ним елемент починається з нового рядка.

Тег <div> універсальний і часто служить контейнером для інших HTML-елементів. Наприклад, шапка сайту, підвал або сайдбар — це часто не що інше, як блок div, що містить в собі такі ж блоки і / або інші HTML-елементи.

Через різні класи і ідентифікатори div-блокам задається відповідне CSS-оформлення. Наприклад, щоб було зручніше писати стилі для шапки сайту, можна додати до блоку клас .header, а для підвала — клас .footer.

Використання тегів <div> у верстці не означає, що потрібно відмовитися від інших тегів. Якщо для вирішення ситуації інший тег підходить краще, використовуйте його. Яскравий приклад — тег довгою цитати <blockquote>. Погодьтеся, немає сенсу використовувати замість нього <div>, адже <blockquote> прекрасно впорається зі своїм завданням. Крім того, це рішення буде більш правильним з точки зору семантики.

Блокова верстка з HTML5

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

Наприклад, шапка сайту може міститися в HTML5-тегу <header>, а підвал — в схожий тег <footer>. Крім того, існує ще безліч інших семантичних тегів — <nav>, <section>, <article> тощо. Даними тегами можна замінювати звичайні теги <div> для об'єднання елементів.

Як ви могли здогадатися, HTML5-теги дають більш точну інформацію про те, що в них міститься. Це дає певні переваги в плані ідентифікування ролі того чи іншого контенту вебсторінки, однак з боку стилізації нічого не змінюється: ви можете точно так само застосовувати CSS до семантичних тегів, як застосовуєте їх до простих блоків <div>.

Див. також

• Верстка вебсторінки
• Таблична верстка
• Вебдизайн

Джерела

• Основи веб та веб-дизайн, програмування на боці клієнта. …/ В. В. Огурцов, Д. В. Гриньов, О. В. Щербаков. — Х. : ХНЕУ ім. С. Кузнеця, 2015. — 208 с. (Укр. мов.) ISBN 978-966-676-585-0 [ 10 січня 2020 у Wayback Machine.] Блокове верстання (С.73)

Посилання