Какой должна быть правильная HTML-CSS вёрстка сайта: семантической, кроссбраузерной, валидной (требования к вёрстке страниц).

Сегодня я затрону и подробно распишу принципы, которые позволяют различить хорошую HTML-CSS вёрстку страниц сайта от плохой. В самом общем случае к вёрстке предъявляются 3 основных требования. Это семантичность, кроссбраузерность и валидность. Рассмотрим эти основы более подробно.

Кроссбраузерная вёрстка сайта.

Кроссбраузерность — это способность сайта идентично (одинаково) и правильно отображаться во всех браузерах. Само собой разумеется, не всегда есть необходимость верстать сразу под все браузеры в мире. Как правило, кроссбраузерным считается сайт, одинаково отображающийся в наиболее популярных обозревателях. В настоящее время это Mozilla FireFox 3+, Opera 9+, Internet Explorer 6+ и Google Chrome 1+ (плюс означает: версия такая-то и выше).

В ряде случаев добиться абсолютной идентичности для разных браузерах бывает довольно сложно, поэтому иногда имеет смысл отказаться от каких-то эффектов для "отстающих" браузеров. При этом очень важно сохранить функциональные возможности верстки и её читаемость. Например, CSS свойство text-shadow не воспринимается IE 6. Это свойство несёт чисто декоративную фуункцию безо всякой смысловой нагрузки, поэтому им можно пренебречь.

HTML и CSS валидность вёрстки.

C этим требованием всё просто. Валидность — это соответствие HTML-CSS кодов страницы стандартам W3C. Проверить верстку на валидность можно с помощью специального онлайн-инструмента — валидатора:

• HTML-валидатор: validator.w3.org
• CSS-валидатор: jigsaw.w3.org/css-validator

Стоит отметить, что при анализе HTML-страницы валидатор сравнивает код со стандартом, заявленным в доктайпе (doctype). Это может быть как разновидность HTML-кода (strict.dtd, loose.dtd, transitional.dtd, strict.dtd), так и его аналогов в стандарте xHTML.

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

Семантическая вёрстка страниц сайта

Довольно часто это свойство путают с понятием блочной вёрстки (на div-ax). В действительности же семантическая верстка подразумевает полное соответствие назначения элемента страницы и тега, с помощью которого этот элемент свёрстан. Вот несколько примеров:

• Контакты компании должны располагаться в теге address, а не в div-e.
• Картинки могут быть свёрстаны тегом img только в том случае, если она являются информационными и несут смысловую нагрузку. Во всех остальных случаях делать картинки нужно с помощью CSS-свойства background-image.
• Все ненумерованные списки (в том числе — навигация) должны быть сделаны с помощью тегов ul и li.
• Нумерованные списки — это обязательно ol и li
• Определения в тексте выделяются тегом dfn
• Списки определений — это dl, dt, dd
• Для аббревиатур необходимо использовать тег abbr
• Блоки цитат должны быть заключены в blockquote
• Заголовки первого, второго, третего, четвертого, пятого и шестого уровней — h1, h2, h2, h4, h5 и h6 соответственно.
• Таблицы должны использоваться только для вывода табличных данных

Дополнительные требования к вёрстке

• Читаемость при отсутствии картинок. Для этого нужно всегда прописывать для блоков не только background-image, но и background-color так, чтобы при отсутствии изображения текст был достаточно контрастен по отношению к фону.
• Человекопонятный код. Разбивайте код на блоки, называйте классы и идентификаторы понятно и логично, комментируйте отдельные элементы.
• Минимальный объём кода и изображений.

Вот, собственно, и всё что я хотел вам рассказать :-) Конечно это далеко не все требования к вёрстке, но основа в этой статье есть. Если будуту следовать всем этим правилам, можете считать, что ваша верстка будет правильной минимум на 99%.