html.md

Оформление HTML кода

Часть правил оформления будет проверена автоматически,
на остальные обратят внимание менторы во время ручной проверки.

Ознакомиться с механизмом вы можете на демонстрационной задаче:
https://github.com/urfu-2016/demo-task-2

Правила для автоматической проверки

Когда вы отправляет пулл-реквест, ваш код автоматически проходит проверку
на соответствие этим правилам при помощи анализатора кода Htmllint.

В случае, если проверка не прошла внизу пулла вы увидите:

Обратите внимание на ссылку «details», перейдя по ней, вы сможет найти ошибки:

Анализатор подскажет в каких файлах и на какой строке произошла ошибка, а так же какое именно правило было нарушено. В данном примере «the alt property must be set for image tags» – не указан alt для изображений.

Cписок правил можно изучить по ссылке: https://github.com/htmllint/htmllint/wiki/Options

Мы дополнили анализатор рядом своих правил, нарушение которых вы увидите ниже:

Если код удовлетворяет всем правилам, вы увидите:

Вы можете не ждать автоматической проверки и всегда проверить код вручную,
выполнив локально команду npm i && npm test

Правила, на которые мы смотрим дополнительно

• Не оставляйте лишних строк

  <!-- Плохо -->
  <p>Абзац текст</p>
  
  
  <p>Ещё один</p>
  <ul>
      <li>Cats</li>
  
      <li>Not cats</li>
  </ul>
  
  <!-- Хорошо -->
  <p>Абзац текст</p>
  <p>Ещё один</p>
  <ul>
      <li>Cats</li>
      <li>Not cats</li>
  </ul>

• Не оставляйте лишних пробелов

  <!-- Плохо -->
  <ul>
      <li> Cats </li>
      <li> <strong>Not cats</strong></li>
  </ul>
  <abbr  title = "Health Points">HP</abbr>
  
  
  <!-- Хорошо -->
  <ul>
      <li>Cats</li>
      <li><strong>Not cats</strong></li>
  </ul>
  <abbr title="Health Points">HP</abbr>

• Соблюдайте правила вложенности согласно примеру

  <div>Здесь мало текста, он влезает в 110 символов, не переносим</div>
  <div>
      А здесь уже более длинный текст, не влезает в 110 символов, переносим его
      на новую строку внутри элемента и делаем отступ в 4 пробела.
  </div>
  <div>
      <div>
          Вложенные элементы (кроме текстовых) переносим внутрь родительского
          элемента на новую строку и делаем отступ в 4 пробела.
      </div>
      Ещё немного текста
      <div>Ещё один элемент</div>
  </div>
  <div>
      <div>
          Текстовые <em>элементы ведут себя как текст, каким бы длинным не было
          их содержимое</em>, такие дела.
      </div>
  </div>