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

Принятие концепции семантического веба и переход к семантической верстке, привели к значительным изменениям в области веб-дизайна как в плане подхода, так и в плане технологий. На место табличного метода, как наиболее часто используемого, пришла верстка при помощи блоков (тег div) и CSS, или, так называемая блочная верстка.

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

Можно выделить следующие преимущества блочной верстки:
Меньший объем кода. Монструозность создаваемого кода при использовании верстки таблицами во многих случаях создавала проблемы даже для самих верстальщиков, поскольку в огромном массиве кода несложно и самому запутаться.

При использовании div-блоков все гораздо логичнее и понятнее, да и сам код страницы уменьшается в несколько раз – основная часть описания визуального вида выноситься в css-файл, который загружается одноразово, и потом просто кэшируется браузером. Таким образом, не только уменьшается время загрузки страницы, но и снижается нагрузка на сервер.

Удобство изменения элементов. Изменить практически любой из элементов внешнего вида макета сайта можно путем правки файла стилей, например, чтобы перенести блок с правой стороны, достаточно заменить float:left на float:right. С таблицами подобные манипуляции будут гораздо более трудоемкими и сложными в реализации.

Преимущества в плане SEO. Мы уже писали, что в таблицах контент раскидан по разным ячейкам, что усложняет индексацию поисковыми роботами. С div-слоями такой проблемы не существует, поскольку вместо кода сначала распознается контент, и на странице он размечается семантически правильно. Это неоспоримое преимущество, которое должно учитываться владельцами современных сайтов.

Читабельность кода. Макет сайта, при создании которого использовалась корректная блочная верстка, будет соответствовать стандартам валидности W3C, а меньший объем кода и его логическая разметка, упрощает визуальное восприятие со стороны разработчика. Отсутствуют сложные конструкции из нагромождений тегов, код компактный и читабельный. Работать с таким действительно приятно.

Реализация сложных задач. С помощью блоков реализовать различные задачи по нестандартному расположению и оформлению элементов сайта гораздо проще, чем при использовании таблиц. С помощью нескольких инструкций можно реализовать такие расширенные возможности как выпадающие списки меню, эффекты скругленых углов и теней, а также другие визуальные эффекты, которые делают сайт более выразительным и понятным для посетителя.

Возможность создания адаптивного дизайна. Наметившийся несколько лет назад тренд в виде создания специальных мобильных сайтов на поддомене, оказался несостоятельным и неэффективным. Ему на смену пришла концепция «адаптивного дизайна» или responsive design, суть которой в создании макета, который одинаково корректно отображается на устройствах с различным разрешением экрана – от стационарных PC и до смартфонов или планшетов.

Именно с помощью блочной верстки стало возможно создавать по-настоящему адаптивные дизайны, хотя это и требует кропотливой проработки и хороших знаний.

Но, как и все в нашем мире, DIV-верстка не является панацеей и решением всех проблем, у этой технологии также имеется ряд недостатков:
Сложности в освоении. Если начать работать с таблицами может начать и новичок в сайтостроении, то верстку слоями освоить сложнее, управление блоками требует хороших знаний не только HTML, но и CSS. Тем не менее, каскадные таблицы стилей предлагают столько возможностей, что потратить время на их изучение однозначно стоит.

Вопрос кроссбраузерности. Один из минусов блочной верстки является следствием относительно новизны этого метода. Речь идет о том, что стандарты верстки div-ами еще не устоялись окончательно, поэтому, определенные инструкции сверстанной блоками страницы, по разному могут восприниматься разными браузерами. Поэтому, чтобы решить вопрос кроссбраузерности, потребуется приложить больше усилий, чем в случае с применением таблиц.

Как видите, несмотря на наличие определенных недостатков, блочная div-верстка обладает массой важных преимуществ, актуальной для профессионального веб-разработчика. Да и сами недостатки, при наличии определенного уровня опыта, без проблем поддаются решению.