html.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   <!-- Плохо -->
   <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>

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

   <!-- Плохо -->
   <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>

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

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