Блочная верстка сайта HTML подразумевает большое вниманию к тегу div, элементы которого и представляют собой, так называемые, блоки. В связи с этим необходимо рассмотреть сам тег div и его применение.
Тег div играет роль некоторого "логического контейнера", в который помещаются другие элементы сайта. Применяется тег следующим образом:
<div class="navBarNubex">
<ul>
<li>Главная</li>
<li>Блог</li>
<ul>
<li>Новости</li>
<li>Статьи</li>
</ul>
<li>Контакты</li>
</ul>
</div>В приведенном коде для примера представлено меню типичного сайта. Меню, в свою очередь, обёрнуто тегом div, который, как мы уже говорили, представляет собой логически обоснованный блок. К тегу div теперь можно применить CSS-стили для его отображения.
Или другой пример:
<div class="article">
<h1>Тег div и его особенности</h1>
<div class="signature">
<ul>
<li>Опубликовано: 2 июня 2015</li>
<li>Автор: Сыроежкин</li>
<li>Категория: Сайтостроение</li>
</ul>
</div>
<p>Контент</p>
</div>Здесь представлен пример HTML-кода статьи в блоге. Мы уже видим, что тег div можно также вкладывать в другой тег div, а тот в третий и т.д. Благодаря такому подходу верстка макета сайта сводится к созданию "дерева элементов" или "дерева блоков", каждый из которых логически и структурно обоснован.
В HTML4 и XHTML блочная верстка сайта осуществлялась описанным выше образом. Т.е. код HTML-страницы выглядер примерно так:
<html>
<head>
...
<title>Конструктор сайтов "Нубекс"</title>
...
</head>
<body>
<div id="topMenu">...</div>
<div id="header"><h1>Заголовок</h1></div>
<div class="article">
<div class="content">...</div>
</div>
<div id="footer">...</div>
</body>
</html>С приходом нового стандарта HTML5 появились теги header, footer, author и т.д., которые постепенно вытесняют тег div, но не блочную верстку как таковую. Просто теперь понятие "блок" стало применяться реже, вместо него всё чаще используется понятие "элемент". Но принцип блочной верстки остался:
<html>
<head>
...
<title>Конструктор сайтов "Нубекс"</title>
...
</head>
<body>
<nav>...</nav>
<header><h1>Заголовок</h1></header>
<article>...</article>
<footer>...</footer>
</body>
</html>Как можно видеть из приведенного кода, стандарт HTML5 добавил логичности в новые теги, и это представляет преимущество не только для разработчиков, но и для поисковых систем. Согласитесь, поисковая система со 100% вероятностью определит, что между тегами <header></header> будет именно заголовок, нежели между тегами <div id="abrakadabra"></div>. Это предоставляет огромное преимущество при правильной индексации сайта, ранжировании его в результатах поиска и создания микроразметки.
Кроме того, блочная верстка является незаменимым инструментом при создании мобильной версии сайта или адаптивной верстке (то, как осуществлять мобильную верстку, описано в статье: Как сделать мобильную версию сайта).