Советы и правила по созданию качественной HTML-верстки

Март, 16. 2010 год

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

  • Прежде чем приступить к верстке, следует детально изучить элементы во всех предоставленных шаблонах и найти схожие по стилю блоки. Это позволит в разы сократить CSS.

  • Отслеживать процесс верстки лучше всего в самом проблемном браузере. На данный момент таковым является IE6

  • Ключевым и уникальным блокам на странице следует присваивать идентификатор, а в css описании отталкиватся от идентификатора. Это позволит использовать одинаковые имена классов в разных блоках.

    Пример: 

    <div id="maincol">
	<div class="block">
		<p>В css описании следует отталкиватся от 
		идентификатора. Это позволит использовать 
		одинаковые имена классов в разных блоках.</p>
	</div>
</div>

    не правильно:

    div.block {
	/* описание свойств ... */	
}

    правильно:

    #maincol div.block {
	/* описание свойств ... */	
}

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

    Пример:

    не правильно:

    <div class="usefull_tips">
	<div class="tip">
		<p>Абстрактные имена классов 
		вносят меньше путаницы.</p>
	</div>
</div>

    правильно:

    <div class="items">
	<div class="item">
		<p>Абстрактные имена классов 
		вносят меньше путаницы.</p>
	</div>
</div>

  • Старайтесь использовать связные классы для схожих по стилю блоков.

    Пример:

    не правильно:

    HTML:

    <div class="type1">
	<p>С помощью связных классов можно 
	сократить размер CSS-файла.</p>	
</div>
 
<div class="type2">
	<p>Чем меньше дублирующих блоков 
	в CSS-файле - тем лучше</p>
</div>

    правильно:

    HTML:

    <div class="block type1">
	<p>С помощью связных классов можно 
	сократить размер CSS-файла.</p>
</div>
 
<div class="block type2">
	<p>Чем меньше дублирующих блоков 
	в CSS-файле - тем лучше</p>
</div>

    CSS:

    div.type1 {
	margin:1em 0;
	font-size:1.2em;
	color:red;
}
 
div.type2 {
	margin:1em 0;
	font-size:1.2em;
	color:blue;
}

    CSS:

    div.block {
	margin:1em 0;
	font-size:1.2em;
}
 
div.type1 {
	color:red;
}
 
div.type2 {
	color:blue;
}

  • Старайтесь давать осмысленные имена классам и не перегружать их названия излишними данными для облегчения понимания верстки сторонними лицами

    Пример:

    не правильно:

    HTML:

    <div id="header">
	<ul class="head_menu">
		<li>пункт 1</li>
		<li>пункт 2</li>
		<li>пункт 3</li>
	</ul>
</div>

    правильно:

    HTML:

    <div id="header">
	<ul class="menu">
		<li>пункт 1</li>
		<li>пункт 2</li>
		<li>пункт 3</li>
	</ul>
</div>

    CSS:

    #header div.head_menu {
	/* some css here... */
}

    CSS:

    #header div.head {
	...
}

  • Не следует использовать графику там, где можно спокойно обойтись текстовыми символами.

  • Не рекомендуется использовать параметр style в HTML тегах.

  • При описании размера шрифта и межстрочного интервала лучше использовать относительные единицы измерения — em.

  • Старайтесь в CSS-описании блоков сортировать свойства по следующим группам:

    • свойства текста и шрифта
    • оформление
    • размеры и отступы
    • позиционирование
    • поведение

  • Настоятельно не рекомендуется стилизовать под единичное использование теги акцентного оформления текста (strong, em, small, span, sup, sub и т.д.) в тех местах где предполагается размещение динамического контента.

  • Не стоит полностью отказываться от использования таблиц в пользу слоев: в некоторых случаях они более уместны.

  • Стилизуйте элементы, по возможности, на более высоком уровне вложенности.

    Пример:

    <h2><a href="#">Стилизованный заголовок</a></h2>

    не правильно:

    h2 {
	/* пусто */
}
 
h2 a {
	font-size:2em;	
	text-decoration:normal;
}

    правильно:

    h2 {
	font-size:2em;	
	text-decoration:normal;
}
 
h2 a {
	/* пусто */
}

  • Не оставляйте ссылки без содержимого. Также, рекомендуется использовать параметра title в ссылке, если в стиле содержимое самой ссылки скрывается. Для того, чтобы скрыть в стиле содержимое из ссылки используйте свойство text-indent.

    Пример:

    не правильно:

    <div class="logo">
	<a href="#"></a>
</div>

    правильно:

    <div class="logo">
	<a href="#" title="на главную">Название сайта</a>
</div>

  • Используйте тег img только для контентных изображений. Таковыми считаются: изображения, которые сопровождают тексты, аннотации и т.д., банеры, счетчики.

  • Предпочтительно подбирать нужные теги под логическую разметку страницы, а не создавать ее через css стили. Для лучшего понимания использования тегов, при верстке рекомендуется сначала сделать HTML-каркас без подключения CSS. Если посмотреть на такую страницу из веб-браузера, то будет наглядно видно, где возникают нелогичные ситуации, например «слипание» текста.

    Пример:

    не правильно:

    <div class="head">Заголовок</div>
 
<div class="menu">
	<a href="#">пункт 1</a>
	<a href="#">пункт 2</a>
	...
</div>

    правильно:

    <h1>Заголовок</h1>
 
<ul class="menu">
	<li><a href="#">пункт 1</a></li>
	<li><a href="#">пункт 2</a></li>
	...
</ul>

  • Использовать элементы input, select и textarea в связке с label. Связка осуществляется посредством параметров for в label и id в вышеприведенных элементах.

    Пример:

    <label for="firstname">Имя:</label>
<input type="text" name="firstname" id="firstname" />

  • Если в дизайне планируется размещение наименований полей формы в самих полях, следует использовать тег label вместо прописывания значений в параметр value.

    Пример:

    не правильно:

    <input type="text" name="login" value="логин" />
<input type="password" name="pass" value="пароль" />

    правильно:

    <label for="login">логин:</label>
<input type="text" id="login" name="login" />
<label for="pass">пароль:</label>
<input type="password" id="pass" name="pass" />

  • Для удобства навиции по полям формы рекомендуется использовать параметр tabindex в элементах форм.

  • Не рекомендуется использовать инлайновые и блоковые элементы в одном уровне вложенности.

    Пример:

    не правильно:

    <div class="text">
	<a href="#">навигация</a>
	<p>Инлайновые и блоковые элементы
	 не стоит располагать рядом</p> 
</div>

    правильно:

    <div class="text">
	<p><a href="#">навигация</a></p>
	<p>Инлайновые и блоковые элементы 
	не стоит располагать рядом</p> 
</div>

  • Для стилизации отступов у абзацев нужно использовать свойство margin.

  • При стилизации блоков, содержащих динамический контент недопустимо задавать свойство height.

Метки: ,