Leaderboard

образец воть еще) http://dreamhost.com/hosting.html - соответствие xhtml + ничего лишнего в коде + образец уместности таблицы

Рекомендации относительно верстки 1. теги font, b, hr, br, center и подобные устарели. Всех их можно заменить более элегантными конструкциями CSS+(x)HTML. То же относится и к некоторым атрибутам вроде align, nowrap, hspace, vspace и т.д. Т.е., если чтото можно вынести в CSS и при этом код становится более логичным, удобочитаемым и меньше, то так и делайте. Подробнее... 2. Если необходимо выделить часть текста, то используйте логические теги вместо тегов форматирования strong вместо b em вместо i и т.д. Кроме того используйте такие теги как code, samp и т.д. Во-первых это логично. Во-вторых практично для задания стилей с помощью CSS И наконец это хорошая поисковая оптимизация Подробнее... 3. Таблицы (table) используются только для табличных данных. Исключение составляют те случаи, когда, слоями (дивами) просто не возможно сделать некоторые вещи, или когда это более разумный способ, но в 95 из 100 случаев такая необходимость отсутствует. 4. Форматируйте правильно CSS-код. Некоторые верстальщики полагают, что написав все в одну строчку они таким образом оптимизируют CSS-код. На самом деле это не так. Выигрыш от этого не большой, но вот код становится неудобочитаемым и легко запутаться. Если Вы считаете, что я не прав, то взгляните на CSS популярных и много-посещаемых порталов. Например http://www.i.ua/ 5. Не используйте CSS-хаки. Они не надежны, это не валидно и это не красиво. В 99 из 100 случаев достаточно использования условных комментариев для IE. Причем в 99% случаев достаточно конструкции вида <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="ie6.css"> <![endif]--> Т.е. отдельные стили для ИЕ ниже 7 версии. 6. Указывайте правильный доктайп. При неправильном (или отсутствующем) доктайпе ваша верстка будет очень отличаться в разных браузерах (Quirks mode). Подробнее... 7. Проверяйте код валидатором. Это позволит не только соблюдать валидность, но и избавит вас от случайных ошибок (например описок или незакрытых тегов). Валидаторы: Онлайн валидатор (x)HTML, Онлайн валидатор CSS Полезные плагины для Firefox: Валидация CSS, Валидация (x)HTML Существуют также "отладчики": Для Opera - Opera Dragonfly (как сделать оффлайновой) Для IE - IE Developer Toolbar Для Firefox - Firebug 8. Так лучше не верстать <li> <a href="http://google.com/"> <span> </span> <span> <p class="Stylz21"> <span class="Stylz21"> </span> </p> </span> </a> </li> <td class="menuplace"> Отступ слева</td> и т.п. 9. Стили должны быть вынесены в отдельный файл(ы) (или в крайнем случае тег <style>). Использование атрибута style="" крайне нежелательно. 10. Отключаем картинки. Все ли можно прочесть? Можно ли получить информацию, которую ваш сайт хочет донести посетителю? Доступна ли навигация? А теперь отключаем стили. Оцениваем собственную верстку. Пробуем различные комбинации вышеприведенного. 10.1. Для важных (те которые служат для навигации, фотографии и т.д.) картинок должен указываться атрибут alt="" с соответствующим описанием 10.2. Если у вас, к примеру светлый текст, а для фона используется темная картинка, не забудьте установить также темный цвет фона. 10.3. Должно быть правильное логическое разбиение структуры страницы. 10.4. Навигационное меню желательно делать не нумерованным списком (ul) 11. Удобно использовать следующую конструкцию в начале CSS-файла ul,ol {list-style: none;} ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;} img {border: 0;} 12. Оптимизируйте графику. Этим вы сэкономите трафик и время посетителя. 13. Проверяйте верстку в разных браузерах (Самые важные на данный момент браузеры это Internet Explorer 6, Internet Explorer 7, Firefox 2.x, Opera 9.x, Safari). Подробнее... Пример хорошей (с моей точки зрения верстки) http://www.fasthtml.ru/clients/omitrans/index.html Вы также можете поискать хорошие примеры самостоятельно (просматривайте код понравившыхся Вам сайтов, популярных сайтов, т.е. смотрите как верстают другие). Плохие примеры не привожу. Их в сети достаточно. Рекомендуется к прочтению Оценка качества верстки 70 идей экспертов для улучшения CSS кода Доступность сайтов для пользователей мобильных устройств Making Small Devices Look Great HTML ? XHTML ? XML XHTML Strict - элементы и атрибуты, которые не надо использовать Азбука веб стандартов P.S. Это всего лишь рекомендации. 100% следовать им не стоит и скорей всего даже не получится. Но это идеал к которому необходимо стремится.