253  /  328

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

Просмотров: 823 (Статистика ведётся с 06.02.2017)
Дата последнего изменения: 13.10.2016

Новая строка для каждого блочного или табличного элемента

Выделяйте новую строку для каждого блочного элемента, ставьте отступы для каждого дочернего элемента.

Плохо:
<div class="menu">
<div class="menu-item"><span class="menu-item-title">Home</span></div><div class="menu-item"><span class="menu-item-title">Search</span></div>
</div><div class="breadcrumb"></div>
Хорошо:
<div class="menu">
    <div class="menu-item">
        <span class="menu-item-title">Home</span>
    </div>
    <div class="menu-item">
        <span class="menu-item-title">Search</span>
    </div>
</div>
<div class="breadcrumb"></div>

Двойные кавычки в атрибутах

Значения HTML-атрибутов всегда пишутся в двойных кавычках.

Плохо:
<div class='navigation'>
    <div class=menu></div>
</div>
Хорошо:
<div class="navigation">
    <div class="menu"></div>
</div>

Множественные атрибуты

Теги с большим количеством атрибутов можно переносить на новые строки. Это улучшит читаемость кода, а также облегчит сравнивание файлов в системе контроля версий (diff).

Атрибуты в одну строку:

<a class="task-detail-special-link" id="task-detail-special-link-id" data-id="13" href="" title="Special Link">
    <span class="task-detail-special-text">Link</span>
</a>

Атрибуты с разбивкой на две строки:

<a class="task-detail-special-link" id="task-detail-special-link-id"
   data-id="13" href="" title="Special Link">
      <span class="task-detail-special-text">Link</span>
</a>

Сортировка атрибутов

HTML-атрибуты должны быть перечислены в следующем порядке:

  1. class
  2. id
  3. атрибуты тега (src, href, title и другие.)
  4. data-*

5
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии