Блочная структура страницы

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, меню, основной контент, подвал) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок <div>: шапка сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или в контейнере <style> секции <head>.

Пример структуры сайта с блочной версткой

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="menu</div>
		</div>
		<div class="content"></div>
		<div class="footer"></div>
	</div>
</body>
</html>