Несколько принципов HTML 21 апреля 2006

Здесь приведены основные принципы, которых я придерживаюсь при создании HTML-кода. Конечно, всегда существуют исключения, но они немногочисленны и весьма специфичны.

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

01 
02 
03 
04 
05 
06 
07 
08 

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
	<tr>
		<td width="67%"></td>
		<td width="33%" valign="top">
			<p class="small_body">Content with left margin</p>
		</td>
	</tr>
</table>
				

Использование HTML-элементов по назначению 

Если требуется поставить в тексте гиперссылку, используйте элемент a, а не span c комбинацией обработчиков событий, ибо не нужно эмулировать возможность, и так предоставляемую браузером.

Вполне возможно, что для многих этот экстремальный пример не показателен, однако взглянем на наш подопытный код. Там встречается конструкция <p class="small_body">...</p>. Цель преследовалась простая: отобразить текст, размером меньшим, чем основной. Конечно, в данном случае возможна масса вариантов, но я использую специальный элемент small, ведь именно для этого он и был придуман.

Кроме того, элемент p, предназначенный для разметки абзацев, является блоковым элементом и обычно имеет отступы по вертикали, что не всегда уместно.

В общем, «брюки превращаются» в

01 
02 
03 
04 
05 
06 
07 
08 

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
	<tr>
		<td width="67%" valign="top"></td>
		<td width="33%" valign="top">
			<small>Content with left margin</small> 
		</td>
	</tr>
</table>
				

Выделение повторяющихся элементов оформления в CSS 

При кодировании я всегда исхожу из предположения о том, что чем меньше кода я напишу, тем лучше он будет: повышаются читаемость, скорость загрузки страницы и структурируемость. И первое место, на котором можно экономить, это повторяющиеся атрибуты HTML-элементов. В нашем примере это атрибут td/@valign и, в глобальном смысле, все атрибуты (кроме bgcolor) у элемента table, ведь в 90% случаев разработчики используют конструкцию <table border="0" cellpadding="0" cellspacing="0" width="100%">. Соответственно код можно трансформировать так:

01 
02 
03 
04 
05 
06 
07 
08 

<table bgcolor="#000000">
	<tr>
		<td width="67%"></td>
		<td width="33%">
			<small>Content with left margin</small>
		</td>
	</tr>
</table>
				

плюс CSS-придаток:

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 

table
{
	border-collapse: collapse;
	width: 100%;
}

td
{
	margin: 0em;
	padding: 0em;
	vertical-align: top;
}
				

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

Максимальное упрощение кода 

По сути здесь пойдет речь о том же, что и в первом пункте «Использование HTML-элементов по назначению», но в более глобальном смысле.

Если внимательно рассмотреть код, мы увидим, что автор хотел разместить текст Content with left margin с отступом от левого края и для получения данного отступа использовал пустую ячейку таблицы с заданной шириной. Однако, мне кажется, есть и более разумные подходы к решению данной задачи. Например, использование div с отступом, заданным с помощью CSS:

01 
02 
03 

<div style="padding-left:67%; background:#000000;">
	<small>Content with left margin</small>
</div>
				

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