Табличная, Блочная и Семантическая виды верстки - в чем разница?

Материал в тему: Основы верстки: строчные и блочные элементы

В этой статье речь будет идти о видах верстки. Сразу хочу отметить что при создании веб страницы совсем не обязательно выбрать один вид верстки и использовать только его. Элементы одного вида можно (иногда даже нужно) использовать в других видах верстки. Главное делать это правильно.

Верстка таблицами

С начала 90 годов используется табличная верстка и до сих пор множество веб - программистов используют ее в своих проектах. Табличная верстка предполагает построение страницы с помощью html тега <table> и его дочерних элементов.

Самым большим плюсом табличной верстки является легкость в восприятии и создании страниц. Для этого вида верстки не нужны большие знания CSS. Табличная верстка стабильна и надежна, отображается всеми браузерами одинаково. Недостатком табличной верстки является то, что большая часть кода пишется в самом html, делая код большой веб - страницы не читабельной. Таблицы нельзя наложить друг на друга, что приводит к большим трудностям. Таблицы отображаются браузерами как один большой объект, который нужно полностью загрузить, а потом только отобразить. Это можно считать большим минусом.

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

Главным элементом блочной верстки является html тег <div>. С помощью атрибутов задаются стили для каждого блока. Так и получается страница приведенная выше.

У блочной верстки тоже есть свои недостатки. Кроссбраузерность - самый большой враг блочной верстки. В одном браузере она может быть идеальной, а в другом, может быть одним большим черным квадратом. Блочная верстка в отличии от табличной намного сложнее и требует больших знаний CSS. Html код у блочной верстки намного меньше и читается хорошо, все стили, с помощью которых и происходит правильное формирование этого вида верстки, находятся в CSS файлах. Благодаря этому код блочная верстка читается лучше. Блоки универсальное средство, с их помощью можно создавать страницы любой сложности. Браузеры отображают блоки как отдельные элементы, благодаря этому, она и отображается быстрее.

Новомодная, семантическая!

Семантика, в переводе с французского (слово возникло еще в древне - греческом языке) означает ‘обозначающий’. Этот вид верстки, как отдельный будет только в html 5, которым пользуются многие и сейчас, для семантики в html документе важно, чтобы элементы обозначали именно то, для чего они и были созданы. Код html, использующийся в семантической верстке, намного меньше кода используемого в блочной и табличной верстке. Семантическая верстка влияет и на оптимизацию сайта. Поисковые машины стремятся к тому, чтобы найти информацию максимально близкую к той, которую ищет пользователь, и семантическая верстка в этом им помогает. Семантическая верстка предполагает уменьшение использования тегов <div>.

Для примера скажу, что в html 5 на замену этому коду:

<div id = “header”></div>
<div id = “footer”></div>

Пришел вот этот:

<header></header>
<footer></footer>

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