# HTML best practices

## Семантика

1. Объединять блоки не по их визуальному расположению, а по их смыслу.

Объединяем блоки вот так:
А не вот так:

2. Все элементы с текстом, контент которых формируется динамически, проверяем на то, чтобы они не ломались при большем количестве текста, чем на макете.

5. Использовать `<table>` только для реальных таблиц.

Если перед таблицей есть её текстовое описание, сделать это внутри тега `<table>` через `<caption>`.

Если у таблицы первая строка идет заголовком, то использовать `<thead>` и вложенные `<th>` для этого и использовать "scope" для этих ячеек.

Пример:

    <table>
      <caption>
        First two U.S. presidents
      </caption>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Took office</th>
          <th scope="col">Party</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>George Washington</td>
          <td>April 30, 1789</td>
          <td>n/a</td>
        </tr>
        <tr>
          <td>John Adams</td>
          <td>March 4, 1797</td>
          <td>Federalist</td>
        </tr>
      </tbody>
    </table>

6. Не использовать `<br>` нигде, кроме случаев, когда соблюдены все требования:

* Newlines are semantically meaningful.
* Indentation is not semantically meaningful (otherwise you should use a `<pre>`).
* There exists no other semantically appropriate tag, like a paragraph or header tag.

7. Использовать семантические теги.
[Блок-схема](http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf) для выбора семантических тегов.

## Теги

2. Структура тегов в первую очередь должна идти от содержания, а не от дизайна.
 — например, такой элемент можно оформить как четыре идущих подряд элемента: иконка сообщений, бадж с цифрой 10, иконка аватара и имя пользователя. Но тут надо явно объединить с помощью `<div>` два блока, чтобы семантически они были отдельными — блок с информацией по сообщению и блок про пользователя.

6. У каждой страницы должны быть теги `title` и мета теги `keywords`, `description` (на содержимое спросить контент у менеджера)
9. атрибуты должны именоваться `lower-case-hyphenated` (имена только маленькими буквами и через дефис) и, если значение строковое и показывает какое-то имя, то тоже должно быть `lower-case-hyphenated`. Кастомные атрибуты стараться начинать с data- (это стандартная практика, рекомендованная для HTML5).

Пример:

`<a href="/" data-index="33" data-page-name="main-page">Home</a>`

10. Не использовать id, кроме случаев, когда они семантически востребованы.

Когда гарантируется их уникальность, например, на уровне базы данных и когда вам нужно:

* сделать рабочую навигацию в рамках одной страницы (например, как на Википедии или на этом сайте сборника best-practices.
* связать `<label>` и `<input/>`, которые находятся в совершенно разных ветках дерева DOM (вообще, лучше всегда просто `<input/>` внутрь `<label>` ставить, и тогда никакие айдишники не нужны).
11. Все теги идут только с классами — никаких пустых `<div>`, `<section>`
12. Избегать по максимуму инлайновые стили и on* attributes in html
14. Не использовать ссылки с пустым или невалидным `href` (никаких `<a href="#">`) — тогда лучше использовать ссылку-заглушку на несуществующий урл, который явно говорит, что ссылка не проставлена.

Если вы верстаете проект, в котором есть страницы, которых нет в дизайне (допустим, они потом при интеграции с сервером динамически создаваться будут), то лучше ставьте адрес, который явно говорит, что это ссылка-заглушка. Причем все ссылки-заглушки должны в рамках проекта иметь один адрес, например `<a href="/mock-address/change-me"></a>`.

Для SPA иногда приходится динамически js-ом генерить такие ссылки (как минимум в angular, там для этого даже отдельный атрибут ng-href), которые бы поддерживали динамическую генерацию на основе чистого клиентского раутинга.

Не надо никаких `<a href="#">` или `<a href="javascript:someFunc(1)">`.

Плюс не надо сюда сохранять урлы до методов API на сервере, надеясь, что JS-ом вы сможете потом обработать клик, отправить ajax запрос на сервер по этому урлу и сами обработать ответ. Этого не произойдет, если юзер откроет ссылку в новой вкладке через контекстное меню или клик колесом мыши, например. Все урлы, указанные в href, должны открывать читаемый для человека контент, который целиком зависит только от сервера. Оригинал последнего абзаца.

15. Ссылки на чужие сайты должны содержать атрибут `target="_blank"`, чтобы открываться в новом окне. Все ссылки с `target="_blank"` должны так же содержать атрибут `rel="noopener noreferrer"`. and consider `nofollow`

19. Спрашивать у дизайнеров, какие элементы делать autofocus на какой странице.

23. Классические инлайн теги должны быть только inline или inline-block, и в них не должно быть ничего, кроме простого текста и других таких же инлайновых тегов.

Исключения: `<a>` — иногда ссылку надо сделать блочным элементом, но лучше использовать inline-block.

24. Для телефонов, емайл-адресов и скайп никнеймов нужно использовать `<a>` c соответствующим адресом.

      <a href="tel: [phone]">[phone]</a>
    <a href="mailto: [e-mail]">[e-mail]</a>
    <a href="skype: someskype?call">someskype</a>

25. Отображать примеры кода через тег `<code>`.

## Подключаемые файлы

1. Все картинки, шрифты и т. д. должны иметь уникальное название в рамках проекта. Если в проекте нет индивидуальных соглашений, то они должны именоваться в стиле lower-case-hyphenated.
5. Все фотографии и картинки, где нет прозрачности, делать в webp.
7. use srcsets

## accessibility

18. Все интерактивные элементы, для которых дизайнером задуман нетривиальный порядок полей, должны иметь атрибут `tabindex`, плюс всегда кнопка сабмита в `tabindex` должна быть последней (соответственно, если есть визуально поля под кнопкой, у них должен быть `tabindex` и он должен быть меньше, чем у кнопки).

## basic
21. Если у поля есть четкое назначение, то использовать соответствующий тип (email, number, color и т. д.).