Блокова верстка з <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>.