Блочная верстка или тег div

На данный момент самый популярный тип верстки — это блочная верстка. При таком подходе вся веб-страница состоит из блоков, а если говорить техническим языком, то из тега DIV. Так же это можно назвать “слоями” так как элементы могут входить друг в друга, тем самым образовывая иерархическую структуру. Тег DIV служит основным строительным элементом который в свою очередь содержит другие элементы страницы такие как текст и изображение. Основными достоинствами блочной верстки является:

• Гибкость настройки элементов
• Краткость кода
• Легкость масштабирования и поддерживания кода

Что бы понять основные принципы построения веб-страницы основывающейся на блочной верстке давайте попробуем потренироваться на практике. У нас есть определенный макет показанный на изображении ниже, он состоит из 4 элементов. Сразу будем учиться использовать HTML5 по этому наша разметка будет состоять из 1) — <header> 2) — <aside> 3) — <div id=”content”> и 4) — <footer>, но надо понимать что данные элементы ни чем не отличаются от обычного тега div и используются только для удобства чтения кода.

В результате у нас получиться такая разметка:

Добавив простые css-стили, наши контейнеры примут необходимую форму

Свойствами width и height мы задаем высоту и ширину, а background определяет цвет заливки элемента. Наши блоки выстроились на странице друг под другом поскольку все HTML контейнеры по умолчанию имеют свойство position: relative. Подробнее про позиционировании элементов.  Обратите внимание на элементы aside и #content, для того что бы выстроить их в одну линию я использую display: inline-block, а не float: left так как этот способ более универсален. Об этом я писал в статье про выравнивание элементов в строку. Для того что бы задать отступы элементов друг от друга воспользуйтесь свойством margin. Я не буду приводить здесь пример — попробуйте сами.