Семантика

Использование семантики облегчает восприятие html-кода страницы и понимание логического и функционального назначения каждого тега. В HTML существует довольно много тегов, которые в своем названии несут четкую семантику: <a>, <p>, <i>, <menu>. Не стоит с помощью CSS таким тегам менять их базовый смысл. Идеально для верстальщика было бы удобно использовать теги с произвольными названиями.

<users>
	<user>
		<avatar></avatar>
		<name></name>
	</user>
</users>

HTML5 предлагает механизм для создания произвольных тегов (Web Components). Но реализация этого механизма не самая простая (нужно писать JavaScript) и поддержка в браузерах неполная. Единственный нормальный способ писать семантический код - использовать атрибут class. Он позволяет описать смысл тега естественными словами, не требователен к уникальности (в отличие от атрибута id) и поддерживает возможность указать несколько классов к одном тегу.

Основы верстки

• Используйте теги div (для блочных элементов) и span (для строчных и строчно-блочных элементов).
• Остальные теги используйте только согласно их базовому смыслу.
• Теги <b>, <i>, <s>, <p>, с <h1> по <h6>, <ul>, <li> - используются только для форматирования текста. Как правило, эти стили находятся в шаблоне сайта и в стилях компонентов не присутствуют.
• Для привязки CSS-свойств к тегу используйте только атрибут class.
• Если нажатие на элемент приводит к открытию новой страницы, используйте тег <a>. В противном случае используйте <span> или <div>.
• Отступы между логическими блоками никогда не делайте пробелами или тегом <br>.
• Структуру html-тегов необходимо делать по сетке дизайна. "Колонки" и логические блоки одного уровня обязательно помещайте в контейнер.

  Плохо:

  <span class="task-detail-sidebar-info-link">сменить</span>
  <div class="task-detail-sidebar-info-title">Ответственный</div>
  <div class="task-detail-sidebar-info-user">
  	<a href="#" class="task-detail-sidebar-info-user-photo"></a>
  	<a href="#" class="task-detail-sidebar-info-user-name">Иван Петров</a>
  	<div class="task-detail-sidebar-info-user-post">Бухгалтер</div>
  </div>

  Лучше:

  <div class="task-detail-sidebar-info">
  	<div class="task-detail-sidebar-info-head">
  		<div class="task-detail-sidebar-info-link">сменить</div>
  		<div class="task-detail-sidebar-info-title">Ответственный</div>
  	</div>
  	<div class="task-detail-sidebar-info-user">
  		<a href="#" class="task-detail-sidebar-info-user-photo"></a>
  		<div class="task-detail-sidebar-info-user-title">
  			<a href="#" class="task-detail-sidebar-info-user-name">Иван Петров</a>
  			<div class="task-detail-sidebar-info-user-post">Бухгалтер</div>
  		</div>
  	</div>
  </div>

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

  Плохо:

      <div class="task-detail-group">Задача в проекте: <div class="task-detail-link">добавить</div></div>

  Хорошо:

  <div class="task-detail-group">
  		<span class="task-detail-group-label">Группа:</span>
  		<span class="task-detail-group-name">Название группы</span>
  </div>

• Каждый компонент должен иметь родительский контейнер. Для этого элемента в CSS необходимо указать шрифт (font-family), а также размер текста (font-size), чтобы избежать конфликтов со стилями шаблона сайта.

Особые случаи

• Внимательно относитесь к элементам inline-block, перевод строки между ними будет отображен как пробел. Чтобы не писать теги в одну длинную строку, можно воспользоваться следующим приемом:

  <div class="inline-block-items"><?
  	?><span class="inline-block-item">Inline Item 1</span><?
  	?><span class="inline-block-item">Inline Item 2</span><?
  	?><span class="inline-block-item">Inline Item 3</span><?
  	?><span class="inline-block-item">Inline Item 4</span><?
  ?></div>

  Визуально теги разбиты и отделены отступами, а в результирующем HTML-коде будет одна строка. Другой прием с помощью HTML-комментариев:

  <div class="inline-block-items"><!--
  	--><span class="inline-block-item">Inline Item 1</span><!--
  	--><span class="inline-block-item">Inline Item 2</span><!--
  	--><span class="inline-block-item">Inline Item 3</span><!--
  	--><span class="inline-block-item">Inline Item 4</span><!--
  --></div>

• Элементы с обтеканием (float)
  • Неприятной особенностью свойства float является то, что такой блок может "вывалиться" из блока-родителя. Это происходит из-за того, что float-элемент удаляется из потока и родитель не выделяет место под него. Решить эту проблему можно несколькими способами:
    • Поставить родителю overflow: hidden/auto.
    • Поставить родителю float.
    • Добавить в родителя элемент с clear. Чтобы не добавлять в HTML-код лишний элемент, можно задать его через :after.
  • Элементы с обтеканием обязательно должны находится в контейнерах, чтобы не влиять на соседние логические блоки.
• Для повторяющихся элементов в строчку (пункты меню, список фотографий) отдавайте приоритет inline-block вместо float.

Тип документа

Создавайте новую верстку по стандарту HTML5. В старых шаблонах по возможности избавляйтесь от XHTML (слешей в конце тегов <br />, <img />).

<!DOCTYPE html>

Альтернативные атрибуты (alt, title)

Очень часто разработчики забывают указывать альтернативные подписи к иконкам, кнопкам или другим графическим элементам. Наличие атрибутов title и alt в верстке поможет решить эту проблему.

Разделение ответственности

Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму. Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение - в скрипты.

Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.

Формы

• В верстке всегда должен присутствовать тег <form>.
• Подписи полей должны быть слинкованы к соответствующим элементам формы.
• Должно быть показано, как выводится ошибка и/или сообщение об успешном выполнении операции.
• Переключение между элементами формы по клавише Tab.
• Интерактивность: смена фокуса должна визуально подсказывать пользователю активный элемент.

Картинки

• Используйте SVG вместо растровых изображений.
• В случае, если SVG использовать затруднительно, используйте формат PNG.
• Объединяйте картинки в спрайты. Это ускорит отображение страницы.
• Называйте файлы с указанием имени модуля и блока, к которому относится изображение. Для разделения слов используйте дефис (-).

  Плохо:

  .crm-lead-history {
  	background-image: url(images/sprite.svg);
  }
  
  .crm-lead-log {
  	background-image: url(images/arrow_left.svg);
  }

  Хорошо:

  .crm-lead-history {
  	background-image: url(images/crm-lead-sprite.svg);
  }
  
  .crm-lead-log {
  	background-image: url(images/crm-lead-arrow-left.svg);
  }