Задать правильную структуру html

[Lukavis]

Прохожу онлайн курс от htmlacademy в одном из испытаний было задание сделать сетку по приложенному примеру. Для этого я использовал много блоков с классом .wrap структура вышла не очень привлекательной и не логичной. 

Можете написать лучшую html структуру (с классами) для этой задачи, где фон некоторых разделов на всю ширину экрана, а контент центрируется или подскажите статью в которой это описано. 

[DivMan]

Я уже год не верстаю, но можно так попробовать

<div class="main-header"> //для синего фона
	<header class="wrap-center"></header>

	<div class="wrap"> //для того что бы растянуть на всю ширину
		<div class="wrap-center"></div> //само меню
	</div>

	<div class="main-promo"> // что бы отцентровать
		<div class="promo"></div>
		<div class="promo"></div>
	</div>
</div>

<div class="content">
	<div class="wrap-content"> //центруем
		<div class="block left"></div>  //block для того чтобы покрасить в синий цвет, но можно вообще без класса обойтись
		<div class="block center"></div>
		<div class="block right"></div>
	</div>
</div>

<footer>
	<div class="wrap-center"></div>
</footer>

 

[Lukavis]

У меня получилось нечто подобное, но вроде html5 и css3 не стоят на месте, неужели нет способов избежать такого количества дополнительных wrap'ов?

[DivMan]

не понимаю, что в этом плохого 

[Lukavis]

Эстетика кода. 

[Q4Dizzy]

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

[klierik]

В 21 серпня 2016 р. в 12:11, Lukavis сказал:

Эстетика кода. 

Эстетика кода заключается не столь в большом кол-ве классов как в том что бы структура/блоки/элементы соблюдали прозрачную и читабельную логику их построения.

правильно использовать то кол-во кода и класов сколько нужно для решения поставленной задачи.