Правила оформления HTML

Семантика

Использование семантики облегчает восприятие 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);
}