Часто используемые элементы и атрибуты

В данной главе мы рассмотрим особенности написания некоторых элементов, ставшими de facto при составлении HTML/XHTML документов.

Таблица: cellpadding, cellspacing, border, width

Типичное, и, на мой взгляд, правильное описание таблицы в HTML документе строгого дизайна выглядит следующим образом:

Таблица

<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”>

Указывать ширину, разумеется, необязательно, все зависит от обстоятельств. Что касается других атрибутов, то многие могут поспорить и сказать, что существуют их аналоги в CSS и, логичнее было бы один раз указать их в CSS для всех таблиц. Давайте их рассмотрим. Аналогом для cellspacing является утвержденное стандартом CSS свойство border-spacing. Однако, проблема в том, что это свойство не понимается, наиболее популярным в настоящий момент, браузером Internet Explorer 6.0. Поэтому, можно сказать, что это свойство совершенно бесполезно, по крайней мере до выхода новой версии Internet Explorer, где эта проблема наверняка будет решена. Впрочем, существует альтернатива определения этого свойства таблицы с CSS. Свойство border-collapse со значением «collapse» решает эту проблему (см. также 5.5.11).

Использование border-collapse как альтернативы для cellspacing

table { border-collapse: collapse; }

Аналогом для cellpadding является CSS свойство padding, элемента TD. Здесь придраться не к чему, кроме того момента, что cellpadding, описанный для конкретной таблицы, повлияет только на текущую таблицу. В свою очередь padding описанный для всех элементов TD будет иметь влияние на все таблицы, что не всегда приемлемо, особенно в случаях использования нескольких CSS файлов в одном документе, когда приоритеты некоторых описанных вами CSS стилей могут быть восприняты браузером неоднозначно. Что касается border, то он также может быть опущен, поскольку по умолчанию браузер не рисует рамку таблицы. Однако его присутствие может упростить отладку документа – для того чтобы увидеть структуру таблицы, достаточно изменить ноль на единицу: border=”1”.

Изображение: width, height, alt, border

Типичная запись для изображения выглядит следующим образом:

Изображение

<img src="mypic.jpg" height="70" border="0" alt="" />

Элемент IMG как правило должен содержать помимо обязательного атрибута SRC, атрибут ALT, регламентированный стандартом HTML 4 как обязательный. Атрибуты WIDTH и HEIGHT должны быть указаны для того, чтобы облегчить работу браузеру по построению отображаемой страницы. Дело в том, что если атрибуты WIDTH и HEIGHT не указаны, браузер не знает какого размера изображение до того момента пока оно не загружено. К тому же, наличие этих атрибутов сохранит правильное отображение документа даже в том случае, если загрузка изображений выключена пользователем. Не следует забывать и про атрибут BORDER, который как правило имеет значение 0 в документах строгого дизайна. Типичная проблема заключается в том, что когда тег IMG заключается в гиперссылку (элемент A), то на странице появляется нежелательный эффект – появляется рамка изображения. Для предотвращения этой проблемы, независимо от того, находится изображение внутри гиперссылки или нет, следует всегда применять атрибут BORDER со значением 0. Этот атрибут также может быть успешно замещен стилем, заданным в CSS (см. также 5.5.7):

Определение border для изображений в CSS

img { border-width: 0px; }

Такой записи будет достаточно, чтобы не использовать атрибут BORDER для каждого элемента IMG.

Элемент DIV

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

Атрибуты class и id

Атрибут CLASS определенно являются самым часто используемым атрибутом в HTML документе. Однако не стоит этим злоупотреблять. Наличие атрибута в каждом, или почти каждом, элементе документа говорит о плохом стиле. CSS должен быть грамотно составлен с тем, чтобы атрибутов CLASS в документе было как можно меньше. Например, если ячейки таблицы документа должны обладать некими одинаковыми свойствами, то эти свойства логичнее будет задать с помощью контекстного селектора (см. 5.2), а не прописывая атрибут CLASS для каждой ячейки таблицы, и уж тем более не определяя эти свойства для всех ячеек всех таблиц.

HTML код

<table class=”special-table” border=”0” cellpadding=”0” cellspacing=”0”>

<tr>

<td>…</td>

<td>…</td>

<td>…</td>

</tr>

</table>

CSS для ячеек таблицы

table.special-table td {

border: 1px solid #000000;

}

Существует возможность перечисления нескольких классов в качестве значения для атрибута CLASS. Все они будут применятся одновременно, по правилам приоритетов для селекторов, описанных в разделе 5.6. Названия классов должны быть разделены пробелом, как это показано в следующем примере:

Указание нескольких классов для одного элемента

<div class=”custom bordered”>…</div>

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