Плохой код

Плохой код можно написать разными способами. На этой странице рассказано, как написать плохой код при помощи:

разметки структуры визуальными тегами;
визуальной разметки структурными тегами;
стилевых определениях в тегах;
неверного выбора способа соединения CSS с HTML.

Разметка структуры визуальными тегами

Довольно часто в HTML-коде можно встретить разметку, вроде приведённой ниже:

<B><FONT size="6" color="red">
Заголовок раздела</FONT></B><BR>
<FONT color="#1a1a1a">
  Первый абзац содержания раздела.<BR>
  Второй абзац содержания раздела.<BR>
</FONT>

Автор выделил заголовок крупным жирным шрифтом красного цвета и написал два абзаца, задав для них тёмно-серый цвет.

Автор думает, что он хорошо структурировал текст: разделил его на заголовок и два абзаца.

На самом деле в этом коде нет ни одного элемента, отражающего структуру. Здесь нет ни заголовков, ни абзацев. Код позаботился лишь о виде отдельных фрагментов текста, не давая ни малейшего намёка на роль этих фрагментов в структуре документа.

Почему это плохо?

Программа, автоматически создающая оглавление страницы, не сможет сделать свою работу, ибо никакой структуры в текст не заложено.
Поисковые системы особенно внимательно относятся к заголовкам, справедливо считая их важными структурными элементами. Первыми в результатах поиска они запишут сайты с заголовками, содержащими образец поиска. Но только не сайт с кодом, приведённым выше.
Голосовой браузер читает заголовки определенной интонацией, привычной пользователю или снабжает их комментарием («заголовок»). Никаких заголовков в тексте такой браузер не обнаружит.
Большой сайт содержит сотни и даже тысячи страниц. Когда сайт закодирован подобным образом, модификация дизайна становится практически невозможной.

Если потребуется изменить красный цвет заголовка на зелёный, придётся просматривать сотни страниц и править указание color="red" на color="green" в каждом теге FONT, принадлежащему заголовку.

Всю эту работу придётся делать вручную, просматривая строчки кода по порядку. Автоматический поиск не поможет, ибо тег FONT может встречаться не только в заголовках. Понятно, что такая работа просто не реальна. Даже если отважится на неё, пропуски «заголовков», или правки в «не заголовках» становятся неизбежными.

Нужна ли нам такая головная боль? А ведь можно написать красиво и совсем просто:

  <H1>Заголовок раздела</H1>

  <P>
Первый абзац содержания раздела.

  <P>
Второй абзац содержания раздела.

— Постойте, а как же красный цвет заголовка? (Это возмущается автор неструктурного кода.)

— Нет проблем. Добавляем в файл CSS определение, которое будет работать для заголовков всех уровней на всех страницах:

H1,H2,H3,H4,H5,H6 {color: red;}

— А тёмно-серый цвет текста?

— Ещё одно определение:

P {color: #1a1a1a;}

— А как теперь изменить цвет в заголовках на зелёный?

— Очень просто! Делаем всего одну правку в CSS-файле:

H1,H2,H3,H4,H5,H6 {color: green;}

И все заголовки на всех станицах станут зелёными.

— Постойте! Получилось плохо. Я использовал тег BR, и мои заголовки близко примыкали к тексту, а Ваши, выводимые H1, отстоят от него далеко. Это противоречит моему замыслу. Придётся отказаться от H1, дизайн для меня очень важен.

— Вы ещё не поняли? HTML язык не для дизайна. HTML предназначен для разметки структуры.

Забудьте про HTML, когда нужно изменить вид объекта на экране.

Для дизайна предназначен язык CSS. Вам не нужен отступ заголовка от текста? Пожалуйста:

H1,H2,H3,H4,H5,H6 
{
  color: red;        /* задаём красный цвет */
  margin-padding: 0; /* убираем отступ внизу */
  margin-bottom: 0; 
}

Теперь все заголовки на всех страницах будут примыкать к тексту плотно (как это было с вашим тегом BR).

— Еще проблема. В своём коде я писал:

  Первый абзац содержания раздела.<BR>
  Второй абзац содержания раздела.<BR>

Абзацы снабжались пробелами в первой строке, как это делают в бумажных книгах. С применением элемента P они выводятся без красных отступов и отделяются пустыми строками.

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

Красные отступы ломают ровный левый край. Получается, что такой текст не выровнен ни слева, ни справа, читать его трудно, и он некрасиво смотрится, ибо отсутствие выравнивания всегда воспринимается как визуальная погрешность.

Если к тому же абзацы не отделены пустыми строками, весь текст на странице превращается в один сплошной абзац с неровными краями. Читать практически невозможно.

— Вы хотите сказать, что тег BR вообще не нужен для HTML-кодирования? А если надо записать вертикальное меню ссылок? Такое меню я всегда записываю так:

ссылка 1<BR>
ссылка 2<BR>
ссылка 3<BR>
ссылка 4<BR>

— Давайте, наконец, договоримся: HTML — язык для разметки структуры документа. А для дизайна существует язык CSS. И баста.

Ваш набор ссылок можно записать в виде маркированного списка:

<UL class=setlinks>
  <LI>ссылка 1
  <LI>ссылка 2
  <LI>ссылка 3
  <LI>ссылка 4
</UL>

Список — это структура, а Ваша запись с BR никакой структуры не отражает.

— Мне не нужны маркеры и списочные отступы!

— Нет проблем, берём в руки CSS и пишем нужное определение:

.setlinks
{
  list-style: none; /* убираем маркеры */
  padding: 0;       /* убираем отступы */
  margin:  0;           
}

Теперь элементы списка будут выводиться без маркеров и отступов. Заметим, что это CSS-определение будет работать только для списков, в которых записан атрибут class со значением setlinks и не затронет другие UL, которые будут отображаться на экране обычным образом (с маркерами и отступами).

Визуальная разметка структурными тегами

Очень плохо, когда структурные элементы используют в коде не по назначению. Например, элемент Hn употребляется для выделения обычных слов или фраз, не являющихся заголовками, а элемент BLOCKQUOTE для записи обычного текста с отступами.

В примере, который приводится ниже, автор сайта поступил именно таким образом:

<BLOCKQUOTE>
  На этом сайте рассказаны 
  потрясающие истории!
  <H1>ЗАХОДИТЕ К НАМ!!!</H1>  
</BLOCKQUOTE>

Разработчик знает, что браузер выводит Hn на экран укрупнённым шрифтом повышенной жирности, а BLOCKQUOTE с отступами, и использует эти элементы для дизайна, игнорируя их структурный смысл.

Давайте скажем «нет» таким приёмам, они не добавляют порядка в наш код.

Структурные элементы предназначены для разметки структуры, и не должны использоваться для визуальных нужд.

Стилевые определения в тегах

Вместо раскритикованного в начале заметки кода:

<B><FONT size="6" color="red">
Заголовок раздела</FONT></B><BR>
<FONT color="#1a1a1a">
  Первый абзац содержания раздела.<BR>
  Второй абзац содержания раздела.<BR>
</FONT>

автор написал другой плохой код:

<DIV style="font-size:150%;
font-weight:bold;color:red">
Заголовок раздела</DIV>
<DIV style="color:#1a1a1a">
  Первый абзац содержания раздела.<BR>
  Второй абзац содержания раздела.<BR>
</DIV>

и премного порадовался удачному решению! Автор решил, что использование CSS привело код в соответствие с современным уровнем сайтостроения.

На самом деле ничего не изменилось.

Код не стал структурным, потому что в нём не использованы структурные элементы HTML.

Визуальная разметка по-прежнему уложена на один диван с содержанием.

Автор вместо визуальных атрибутов использовал CSS свойства, внедряя их прямо в теги. Никаких плюсов это не принесло. Код стал длиннее, а проблемы сохранились.

Способы соединения CSS с HTML

Скажем сразу: для отделение содержания от дизайна, последний нужно помещать в отдельный CSS-файл.

А всего существуют три способа соединения стилевых правил CSS с кодом HTML.

Стилевые определения размещаются в отдельном CSS файле, а в каждом HTML-файле записывается ссылка на эти определения при помощи элемента LINK в головной части HTML-кода. Мы получаем те преимущества, о которых говорилось: отделение дизайна от содержания, уменьшение общего кода почти на 50%, простой редизайн сайта. И плюс к этому: единый стиль для всех страниц сайта.
Стилевые определения размещаются в головной части HTML-файла. Так заданные стилевые определения действуют только внутри того файла, в котором они записаны.
Стилевые определения размещаются в открывающем теге элемента в качестве значений атрибута style.

По правилам каскадирования стилевое определение в теге главнее стилевого определения в головной части HTML-кода, а последнее главнее определений, заданных в отдельном стилевом файле.

Рассмотрим области использования этих трёх вариантов соединения CSS с HTML-кодом.

Вариант, при котором стилевые определения задают единый шаблон страниц в отдельном CSS-файле является основным. Именно он позволяет, действительно, отделить дизайн от содержания, разведя их по разным кодам и файлам.

Вариант размещения CSS-определений в головной части можно использовать, чтобы переопределить для данной страницы свойства общего шаблона.

Вариант размещения CSS-определений в тегах противоречит рекомендациям стандарта (никакого разделения дизайна и содержания не получается) и надо избегать такого кодирования.