Плохие теги

Здесь речь пойдет о некоторых тегах HTML, которые остались еще со сказочных и доисторических времен. Плохие, гадкие, уродливые вещи, принадлежащие ушедшим в прошлое стандартам HTML, индивидуалистической чепухе, едва работающей в какой-нибудь единичной подверсии какого-нибудь одного браузера, либо теги, замененные более новыми тегами. Это если можно так выразится, учебник того, чего следует избегать.

Исповедуя философию отделения содержимого от визуального представления, HTML старается избавиться от репрезентативных функций. Такой подход ведет к веб-страницам значительно меньшего по объему кода, так как отдельный набор инструкций, определяющих внешний вид (во внешнем CSS файле), может подключаться к любому числу веб-страниц. К тому же обслуживать сайт становится гораздо проще, потому что изменение всего одного файла воздействует на все страницы, использующие его.

Одни "плохие теги" попросту отвечают за внешнее представление элемента (как тег <small>), и их можно заменить на нечто более значимое, либо использовать вместо них CSS. Другие же могут не только определять визуальное представление, но и быть к тому же излишне громоздки (как тег <font>) или ужасно пагубны для удобства использования веб-страницы (как тег <blink>).

Теги

Ниже приводится большинство общих тегов, у которых есть лучшая альтернатива:

  • <b> отображает текст жирным шрифтом. Вместо него можно использовать тег <strong>, который добавляет элементу дополнительное значение (усиленное выделение), либо, если необходимо просто отобразить текст жирным шрифтом, соответствующее свойство CSS выполняет ту же работу.
  • <i> отображает текст курсивом. Использование тега <em> также добавляет дополнительную информацию (выделение), а для обычной визуализации подойдет соответствующее свойство CSS.
  • <big> увеличивает размер отображаемого текста. Если текст используется в качестве заголовка, то лучше использовать теги заголовков (<h1>, <h2> и т.д.), которые именно для этого и предназначены, а для простого визуального выделения следует использовать свойство CSS font-size, которое предоставляет больший контроль над страницей.
  • <small> уменьшает размер отображаемого текста. Опять же для этого лучше использовать свойство CSS font-size.
  • <hr> создает горизонтальную линию. Тем не менее, в веб-странице, основывающейся на CSS, использование этого тега несколько необычно. Для этого вполне подойдет свойство CSS border-top или border-bottom, либо, в крайнем случае, старый добрый тег изображения сделает это лучше.

Ко всем перечисленным тегам последние стандарты HTML относятся достаточно лояльно, однако эти теги ничего не добавляют к значению контента, что обязаны делать "хорошие теги". Все эти "пустышки" могли бы быть более полезны, но они не приносят и вреда, в отличие от следующих "вредин":

  • <u> в свое время использовался для подчеркивания текста. Так получилось, что подчеркнутый текст прочно ассоциируется со ссылками. Именно поэтому этот тег давно умер, и именно поэтому крайне не желательно иметь в тексте подчеркнутые участки, не являющиеся ссылками.
  • <center> использовался для центрирования одного элемента относительно другого. Свойство CSS text-align имеет не только значение center, но и left, right и justify.
  • <layer> аналогичен тегу <div>, однако работает он только в старых версиях браузера Netscape и потому совершенно бесполезен.
  • <blink> или <marquee>. Наше твердое "Нет!". Они должны были делать мигающий текст, однако из-за ограниченной поддержки вскоре превратились в дурную шутку.
  • <font> использовался для определения имени, размера и цвета шрифта элементов. Этот тег снискал репутацию злого гения мира тегов. Старые сайты (и даже некоторые новые) подобно оспинами буквально испещрены тегами <font>. Большинство из них обязаны своему появлению различным программам автоматизации создания сайтов, вставляющие тег <font> вокруг всякого элемента, размер или цвет которого изменяет автор. Так как этот тег приходится вставлять вокруг каждого появления элемента (скажем, каждый раз, как используется элемент <p>), то при помощи свойств CSS это можно сделать при помощи одной маленькой строки кода и применить ее ко всему сайту. Такой способ не только делает код веб-страницы меньше, но и позволяет при модифицировании стиля изменить всего одну строку, а не отыскивать все теги <font> в коде всех веб-страниц. Тег <font> и неуместное использование таблиц – две наиболее частые причины распухания кода веб-страниц.

Атрибуты

Можно думать, что используются "хорошие" теги, однако есть несколько раздражающих паразитических атрибутов, портящих эти теги.

  • text и bgcolor используются для определения цветов базового текста и фона страницы в открывающем теге <body>. Но то же самое могут сделать свойства CSS color и background-color, если применить их в селекторе body.
  • background используется с тегом <body> для определения фонового изображения страницы. Свойство CSS background-image позволяет манипулировать фоновыми изображениями гораздо лучше.
  • link, alink, vlink используются в теге <body> для определения цвета ссылок (непосещенные, активные и посещенные). CSS псевдоклассы:link, :active, :visited умеют это делать гораздо лучше.
  • align используется для выравнивания содержимого элемента (например, <div align="center">Текст</div>), однако, как и в случае с тегом <center>, здесь есть новый господин – свойство CSS text-align.
  • target используется для определения различных состояний открытия ссылки, обычно чтобы она открывалась в новом окне (например, <a href="//msiter.ru/wherever.html" target="_blank">Помощь</a>). Звучит мило, но этим вы можете только навредить своему сайту. Пользователи вовсе не ожидают возникновения чего-то (вроде нового окна браузера) из ниоткуда, и кроме этого большинство из них пользуются таким инструментом навигации браузера как кнопка "Назад", которая не работает, если ссылка открывается в новом окне. Таким образом этот атрибут следует использовать крайне осторожно.

Некоторые атрибуты представления, такие как width и height для изображений и cellpadding и cellspacing для таблиц, продолжают играть важную роль, так как очень часто приходится присваивать разные значения разным элементам. Они не идеальны, но если у вас на странице большое количество изображений или таблиц, то у вас попросту нет иного разумного выбора, как использовать эти атрибуты.

Самые непостижимые атрибуты представления принадлежать тегу <textarea>, где есть не только атрибуты cols и rows, признаваемые последними стандартами HTML обязательными.

Плохое использование хороших тегов

Набор HTML тегов ("хороших" тегов) был разработан для выполнения конкретных задач, и хотите верьте, хотите нет (лучше поверить), использование их для выполнения именно этих задач даст наилучшие результаты.

Наиболее часто не по назначению используются таблицы HTML. Вполне обычным стало использование их для создания макета страницы, хотя таблицы всегда предназначались только для отображения табличных данных. Способы не табличной верстки веб-страниц вовсе не является своего рода просвещением отсталых индивидуумов; они еще имеют и массу практических достоинств, и это не только значительное уменьшение "веса" страницы, но и более простое ее обслуживание и последующее изменение дизайна.

Иногда разработчики используют некоторые из упомянутых здесь тегов и атрибутов (и в том числе таблицы в качестве разметки страницы) для достижения традиционного дизайна, чтобы веб-страница была совместима со старыми браузерами (в частности с Netscape 4). Таблицы действительно дают больший контроль над визуальным представлением, чем CSS, не доступный в Netscape 4, но таких пользователей не много и их число постоянно уменьшается, в то время как тех, для кого табличная верстка является огромным неудобством, - пользователей, получающих доступ в Интернет с мобильных устройств – постоянно растет. Преимущества бестабличной разметки, уже упоминавшиеся выше, намного перевешивают недостатки и отчетливо проявляются на страницах, которые сохраняют полную функциональность во всех браузерах.

Фреймы

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

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

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

Если следовать следующим правилам, то можно избежать многих неприятностей:

  1. Если тег или атрибут хотя бы намекает на визуальное представление, не используйте его. Это работа CSS. И делает он ее гораздо лучше.
  2. Используйте теги только для того, для чего они предназначены. Таблицы для табличных данных. Заголовки для заголовков. И так далее, и так далее.
  3. Когда у вас появляется специфичный контент, используйте соответствующие теги.