Сегодня я прочитал статью на сайте www.artlebedev.ru «HTML-шаблоны».

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

Теги. Если мы используем <h2></h2> вместо <div class="h2"></div>, <li></li> вместо <div class="menuitem"></div> — это делает код (как HTML, так и CSS) более простым и читаемым. В дополнение, это позволяет сайтам хорошо отображаться без CSS, упрощает вёрстку.

Атрибуты. Если заметка про теги не явилась для меня откровением, то использование атрибутов явилось более серьёзным поводом для раздумий. Например, если мы пропишем таблице с данными border="1", то потом мы всё равно сможем переопределить (сбросить) это в CSS, но сделаем приятно пользователям, у которых CSS отключен. Также полезно будет прописывание align="..." ячейкам таблиц.

Ещё один интересный приём — текущий пункт меню выделять как <b class="selected"></b>. Жирное выделение мы сможем снять в CSS, а для нестандартных браузеров это позволит отобразить меню в приемлемом виде.

Не стоит забывать про версии для печати/КПК.

В статье есть ещё несколько интересных заметок. Тем, кто увлекается вёрсткой, рекомендую прочитать.


Предполагаю сразу вопросы, которые могут возникнуть у достаточно опытных верстальщиков.
«Зачем мне следить за тем, как отображается сайт без CSS, если сейчас это актуально менее чем для одного процента пользователей?»

Да, я тоже много думал об этом. Я бы ответил на этот вопрос следующим образом. Всегда надо думать, оправдают ли наши затраты полученную выгоду. Есть вещи, которые явно уменьшают затраты, повышая при этом пользу. Например, если мы будем использовать больше тегов вместо сотни стилей CSS, то это облегчит написание и, главное, сопровождение кода. Выгода от создания сайта, работающего корректно с отключенным CSS, может быть не столь очевидна. Но здесь я хочу обратить внимание вот на что. Если мы следим за тем, как отображаются наши сайты без CSS, затраты наши мы практически не увеличиваем. Возможно, на первом этапе это будет занимать какое-то время, но после того, как войдёт в привычку, это не будет обременять нас. Например, что проще — прописать <b style="selecteditem"></b>, или <span style="selecteditem"></span>? Да никакой разницы нет. То есть затраты остаются почти теми же. А вот полученная польза увеличивается. Потому что существует хотя бы сотня пользователей во всём мире, которые пользуются совсем старыми браузерами. И существует много тысяч пользователей, которые сидят на модемах/GPRS. И иногда у них обрывается связь как раз во время загрузки CSS-файла (у меня, например, на GPRS частенько CSS подгружается намного позже основной страницы). И если можно с теми же затратами облегчить чтение сайта этим пользователям — наверное, правильно будет это сделать.

Поэтому пусть наш код будет красивым 


Это сообщение отредактировал(а) dm9 - 22.8.2006, 13:17

Неужели кто-то использует вместо <h2> <div class="h2">? Просто непонятно, какой смысл, если всегда можно переопределить h2 в стилях


А зачем это нужно?


А вы таких встречали?


Написание и сопровождение кода облегчит полное отделение верстки от дизайна, о чем давно уже книжки написаны. 
Например, "Философия CSS-дизайна", написаная по мотивам сайта csszengarden.com, в котором сверстан один макет, и для него сторонние дизайнеры пишут css-файлы с дизайном (сам макет - http://csszengarden.com/zengarden-sample.html, а вот один из многочисленных вариантов дизайна к нему - http://csszengarden.com/?cssfile=/194/194.css&page=0). Т. е. это конкретный пример выгодны такого подхода. г-н Токмаков в конце статьи и приводит к этому выводу, только он опоздал года на 3-4 =)




Это сообщение отредактировал(а) faost - 22.8.2006, 13:07

faost, большое спасибо за отзыв.
Я только замечу, что Лебедев — не автор данной статьи. Ещё, в данной статье мы не говорили об отделении дизайна от информации и смысл статьи нисколько не противоречит данному отделению  Говорилось о другом, как в моём сообщении, так и в тексте самой статьи. Наверное, просто надо было прочитать то, что написано, перед тем, как отвечать  Прошу воспринимать не как «наезд», а как предложение 

Добавлено @ 13:14 
Ага, что Лебедев — не автор, уже было замечено и исправлено. Спасибо 

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

dm9, согласен с тобой.
К этому можно еще добавить верстку различных меню, используя <ul>,<li> и <a>

Встречный вопрос: а какой смысл переопределять стиль тега <h2> если можно задать скажем тегу <span> нужный стиль и не париться с убиранием ненужных отступов и т.п.?

dm9, как я понимаю отделение CSS от HTML-кода существует так же и для упрощения редактирования внешнего вида страницы, т.е. скажем проще прописать font-weight: bold; в одном стиле чем пробежать несколько шаблонов в котором надо будет поставить <b></b>. 
Вобщем-то статья ничего, но не всегда так нужно делать 

Хотя бы для индексации сайта в поисковиках.


Куксикус, можно сверстать весь сайт на одних div'ах (изврат), прописав стили для каждого элемента, но логики в этом не будет. То есть ты сам через некоторое время не сможешь понять что там написано...
Плюс опять же теги <strong> лучше индексируются поисковиками чем <span style="font-weight: bold;">
Для использования XSLT преобразований тоже будет лучше разбавлять свой код другими тегами окромя <div>.

И напоследок пример XML кода, в котором вся логика вынесена.. куда вынесена - сами решайте 

красивый и интуитивно понятный код  

что мешает сделать 
?
зато, как уже неоднократно было подмечено, при недогруженных стилях, точно так же, как и при отключенных стилях, всё будет нормально выглядеть. 
dm9, спасибо за ссылку на статью. Очень пригодится.

skyboy, только    

Illuminaty, он про то, что если везде стоит <b> то не стоит его убирать а можно прописать ему стиль чтобы жирность пропала 

skyboy, но я то имел ввиду обратное действие 

Угу. Именно  Спасибо.

А я имел в виду, что можно определить одинаковый класс для разных участков. И отключать/включать жирность независимо друг от друга. А если говорить про отключенную обработку CSS и про то, что даже <b style="font-weight: NORMAL;"> станет жирным, так ещё неизвестно, что хуже: <span style="font-weight: BOLD;"> без жирности, или <b style="font-weight: NORMAL;"> с жирностью. Учитывая, что выделение шрифтом применяется только для стОящих элементов(заголовки, смысловые ударения), то я за второй вариант - пущай уж лучше "лишние" элементы выделяются жирным, чем совсем без выделения быть...
Illuminaty, я понял, что мне больше всего понравилось в приведенном тобою коде. Я представил, как средствами DOM буду искать ссылки