• Техногрет
  • HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Сергей Золотухин

    Несколько принципов 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>
    				

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