Основы верстки, или Три заповеди верстальщика
(статья в помощь заказчику)Эта статья не предназначена для верстальщиков. Если вы читаете ее, значит вам нужна верстка, и вы не хотите быть обманутыми. Для этого надо хотя бы примерно знать основополагающие понятия и нормы верстки. Именно об этом мы и собираемся поговорить ниже.
Что такое правильная верстка? Назвать только одну из трех составляющих этого понятия (кроссбраузерная верстка, семантическая или валидная) было бы грубейшей ошибкой. Они неразделимы и не взаимозаменяемы.
Валидная верстка
Фактически, о ней говорится в статье «Стандарты W3C». Но мы немного повторимся.
Валидность означает, что технология верстки (X)HTML полностью соблюдена. Иными словами, правильно пишите теги, не забывайте закрывать «контейнеры», сразу удостоверьтесь, что не пропустили какой-нибудь символ, и все будет в порядке. Любые браузеры и электронные устройства адекватно интерпретируют страницу независимо от того, отключены скрипты и изображения или нет. Поисковый робот ее проиндексирует, а программисты с благодарностью будут «прикручивать» макет к готовому сайту. Но такой результат могут гарантировать только опытные верстальщики, естественно, за соответствующий гонорар. Бесплатно верстка делается только новичками и не всегда валидно (ведь этот самый опыт надо сначала наработать).
Кроссбраузерная верстка
Этот термин — калька английского «cross-browser». Он указывает на способность сайта одинаково отображаться во всех Интернет-обозревателях или, по крайней мере, в самых популярных из них. Для нас это — Firefox, Opera, IE, Chrome, Safari.
Многие просят привести пример блочной верстки не кросбраузерной. Это элементарно: вы наверняка видели сайты, которые при загрузке больше похожи на винегрет. Из-за ошибок div верстки колонки «съезжают» одна на другую, картинки, текст, ссылки, баннеры и остальные элементы отображаются не на своих местах или не отображаются вообще. Либо на сайт, отлично работающий, скажем, в Opera, невозможно зайти через IE. Кроссбраузерность потому и является одним из «трех китов» верстки, что один раз сделать универсальный код проще, чем отдельно для каждого обозревателя.
Семантическая верстка
Понятие «семантика» изначально использовалось в лингвистике. Это смысловые отношения знака и того, что он означает. Код страницы должен иметь логически правильную структуру, иначе его будет трудно понять и программистам, и поисковым машинам. При верстке div (резиновой или фиксированной — не имеет значения) должна учитываться семантика каждого элемента, каждого тега. Заголовок должен быть заголовком, список — списком, а таблицы должны использоваться по своему прямому назначению, а не для верстки макетов. Верстка блоками div соответствует этому принципу: код страницы четко структурирован, внешний вид страниц описан в документе CSS, все элементы находятся на своих местах и обозначены соответствующими тегами. Верстка таблицами и семантическая разметка — несовместимые понятия.
Семантическая верстка тесно взаимосвязана с валидной. Оба эти фактора обеспечивают правильное отображение страницы в браузере, но первый влияет еще и на ее индексацию. Несемантический код может быть безупречным с точки зрения валидности, но если логика в нем будет отсутствует, поисковик не сразу доберется до основного контента. А как известно, это уменьшает значимость страницы.
Надеемся, теперь наши клиенты будут разбираться в основных аспектах верстки, и почему, предлагая верстку бесплатно или платно, верстальщики обязательно упоминают о валидности, кроссбраузерности и семантике. Даже верстка на фриланс бирже или у частных лиц больше не будет «котом в мешке».
Если вы хотите лучше разбираться в деталях верстки, вам будут полезны следующие статьи:
|
|
