С первой частью статьи можно ознакомиться здесь: CSS: абсолютные "Да" и "Нет". Часть 1: Селекторы.
Если вы начали интересоваться веб-стандартами, то скоро поймете, что самое важное понятие - это разметка. Правильная, чистая и хорошо структурированная разметка. HTML, XHTML, теги, атрибуты, структура… Вот то, о чем мы будем говорить. Мы даже объединим понятия CSS и веб-стандартов.
CSS стал уже практически синонимом для стандартов. Я часто говорю «CSS дизайнер», или «css это..», «css то..», чтобы быстро объяснить какие методы и подходы я использую.
Но настоящая правда в том, что CSS вообще не играет роли, если ваша разметка структурирована неправильно.
Спонсоры статьи: Установите один из самых популярных и надежных Интернет - пейджеров - qip.
Бюро переводов ALS в г. Москва – выполнит для вас любые срочные переводы, переводы апостиль, технические и юридические переводы с любых языков мира.
Самые последние новости о самых интересных событиях в мире - это InfoZoom.ru
Структура документа
Ключ к кроссбраузерности документа - это его структура. Она должна быть осмысленной, логичной. Документ, даже без подключения стилей, должен выглядеть читабельно.
Большинство документов, как правило, имеют несколько составных частей (меню, основной контент, сайдбар, подвал и т.д.). Пользователь, человек он или не человек, должен различать эти части с первого взгляда на них. Самая важная часть должна быть как можно выше по коду, но значимость основного контента также должна быть выделена с помощью заголовков (h1, h2, h3, h4, h5, h6). О правилах использования заголовков можно прочесть .
Структурные теги структуры и теги «для красоты»
Вы, наверное, слышали выражение «очистите контент от всего лишнего». Что это значит? Обычно, это означает, что контент необходимо избавить от лишних html тегов. Т.е. следует избегать использования пустых дивов для отображения, например, тени для картинки и всего прочего. Каждый элемент разметки должен иметь значение в структуре документа и существовать как его логическая часть.
Выбор тегов
Тегов существует достаточно много и вы должны это понимать. Не нужно останавливаться только на использовании div для внутренних элементов контейнера. Иногда достаточно самого обыкновенный параграфа с несколькими тегами span или em, чтобы получить в итоге то, что вам нужно.
Все мы используем списки ul и ol, но как часто используем списки определений? Элемент DL в большинстве случаев идеален для 2-уровневых структур.
И еще, почему бы не использовать тег ADDRESS для обрамления контактной информации? Возьмите на заметку ;)
Валидация
Валидация значима тем, что помогает проанализировать структуру документа. Проверка отдельных блоков документа не будет означать, что весь документ в целом будет валиден.
Вы можете радоваться валидности документа, полностью структурированного на div. Да, он валиден, но имеет ли это такое важное значение? Не для всех, особенно не для поисковых систем.
Абсолютные «ДА»:
- обращайте особое внимание на структуру документа - это самое важное.
- делайте разметку семантичной, читабельной, следите за логикой структуры.
- используйте разнообразные, но надлежащие теги для определенных видов контента.
- больше практики ;) Старайтесь видеть структуру в целом, а не только внутри блоков.
- старайтесь использовать несколько html элементов насколько это возможно для похожих элементов дизайна.
- находите компромисс с дизайнером. Иногда лучше не использовать некоторые дизайнерские эффекты и сделать разметку более чистой.
Абсолютные «НЕТ»:
- не стоит думать, что если документ валиден, то он совместим со всеми браузерами.
- не нужно чрезмерно использовать некоторые теги, например div.
- не используйте теги «для красоты», или по крайней мере, пусть их будет как можно меньше.
- не нужно избегать использования некоторых элементов, думая что они не соответствуют стандартам (например, таблицы).
- не ищите компромисса с верстальщиком.
Оригинал статьи:
