HTML

Общее

HTML5 Doctype

Указывайте в начале каждой HTML-страницы тип документа HTML5 Doctype, чтобы браузер работал в режиме соответствия стандартам. Это обеспечит единое отображение страниц в разных браузерах.

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Lang

Для указания языка документа авторам рекомендуется прописывать атрибут языка в корневом элементе HTML. Это поможет инструментам синтеза речи определить какое произношение использовать, а инструментам перевода - какие правила.

HTML Specification

<html lang="ru">
  <!-- ... -->
</html>

Список кодов различных языков на Sitepoint.

Favicon

Помимо стандартной фавиконки 16х16 есть большое множество иконок, которые используются на различных платформах, — вплоть до 512х512. Если иконки отличаются деталями, то необходимо отрисовать их вручную. Если же иконки отличаются только размером, возьмите самую большую иконку и сгенерируете все остальные, рекомендуемый инструмент — Real Favicon Generator:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

Метатеги

  • IE каждой версии поддерживает работу «как предыдущая версия» и в зависимости от различных условий может автоматически отображать страницу как предыдущая версия. Метатегом можно заставить сайт отображаться в режиме последней версии.

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  • Всегда явно объявляйте кодировку символов. При этом вы сможете избежать использования символьных сущностей в HTML-коде, если их кодировка совпадает с кодировкой документа (как правило, utf-8).

    <meta charset="utf-8">

CSS

Для подключения CSS идеальный способ — использование Critical CSS, которые подключаются через <style>. Это позволяет уменьшить время до отображения контента. При невозможности использования просто подключайте link в head.

JS

Не подключайте скрипты в head, так как страница не отобразится, пока не загрузятся скрипты. Скрипты в head можно подключать, если вы используете атрибуты async \ defer.

Размещайте скрипты перед </body>, если на проекте есть поддержка старых браузеров.

Body

Общее

  • Избегайте использования лишних элементов.

    <!-- Недопустимо -->
<span class="avatar">
  <img src="avatars/csssr.png" alt="CSSSR">
</span>

<!-- Правильно -->
<img class="avatar" src="avatars/csssr.png" alt="CSSSR">

  • Не указывайте значение логическому атрибуту.

    <!-- Недопустимо -->
<input type="checkbox" checked="true" />

<!-- Правильно -->
<input type="checkbox" checked />

Ссылки

  • Не используйте <a> для элементов, нажатие которых не приводит к смене URL.

    <!-- Недопустимо -->
<a onclick="...">Открыть меню</a>

<!-- Правильно -->
<a href="/list.html">Список категорий</a>

  • Для заглушек для href у тех ссылок, адрес которых ещё неизвестен (но это будет именно ссылка, с переходом на другую страницу), используйте href="javascript:void(0);". Отличие от href="#" в том, что нажатие на ссылку с # приводит к скроллу наверх страницы, что может быть неудобно.

    <!-- Недопустимо -->
<a href="javascript:void(0);" onclick="...">Открыть меню</a>

<!-- Допустимо -->
<a href="#">Список категорий</a>

<!-- Правильно -->
<a href="javascript:void(0);">Список категорий</a>

  • Используйте <a> для всех элементов, которые могут куда-либо вести, даже если в макете этот элемент отрисован как обычный текст, так как в данном случае ссылка — логический элемент, а не визуальный.

    • tel:+79876543210 - для указания телефона. Номер должен начинаться с плюса и состоять только из чисел без спецсимволов типа пробелов, круглых скобок или дефиса;
    • mailto:sales@csssr.com - для указания e-mail;
    • skype:csssr.ru?chat - для указания Skype-контакта.
    <!-- Недопустимо -->
<span>+79876543210</span>

<!-- Правильно -->
<a href="tel:+79876543210">+79876543210</a>

Кнопки

  • Все интерактивные элементы, по которым происходит нажатие и которое не приводит к смене адреса, делайте через <button>. Ни в коем случае не используйте div, span и другие неинтерактивные элементы. 

    <!-- Недопустимо -->
<div onclick="...">Открыть меню</div>
<a onclick="...">Открыть меню</a>

<!-- Правильно -->
<button onclick="...">Открыть меню</button>

  • Всегда явно указывайте атрибут type для кнопки. По умолчанию он равен submit, поэтому если кнопка без типа окажется в форме, она по клику будет вызывать отправку формы.

    <!-- Недопустимо -->
<button>Открыть меню</button>
<button>Отправить форму</button>

<!-- Правильно -->
<button type="button">Открыть меню</button>
<button type="submit">Отправить форму</button>

  • Блокируйте кнопки через атрибут disabled и не блокируйте только через JS (проверка по какому-либо условию) или только через отдельный класс (.button_state_disabled). При установке атрибута disabled кнопка становится неактивной для всех взаимодействий: по нажатию на неё не вызывается событие click, на неё нельзя навестиcь табом.

    <!-- Недопустимо -->
<button class="button button_state_disabled">Открыть меню</button>

<!-- Допустимо -->
<button class="button button_state_disabled" disabled>Открыть меню</button>

<!-- Правильно -->
<button class="button" disabled>Открыть меню</button>

Картинки

  • Вставляйте контентные картинки через тег <img>. Не меняйте его на другой элемент с background-image для использования background-size. В случае, когда это необходимо, используйте object-fit + полифил или деградацию для старых браузеров.

    <!-- Недопустимо -->
<div style="background-image: url(...)"></div>

<!-- Правильно -->
<img src="..." />

  • Картинка должна иметь атрибут alt, который поясняет содержимое картинки. Он отображается, когда картинка не загрузилась.

    <!-- Недопустимо -->
<img src="..." />

<!-- Правильно -->
<img src="..." alt="..." />

  • Если размер изображения заранее известен, то укажите его в атрибутах width и height. Это позволяет избежать скакания контента при загрузке картинки.

    <!-- Допустимо -->
<img src="..." />

<!-- Правильно -->
<img src="..." width="800" height="600" />

Формы и элементы форм

  • Делайте все формы через тег <form>. Даже в тех случаях, когда отправка формы обрабатывается через JS и не происходит перехода на другую страницу. Формы не должны представлять собой группу несвязанных полей + кнопку с type='button', по клику на которую происходит отправка формы. JS должен обрабатывать именно сабмит формы, а не клик на кнопку, так как форма может сабмититься разными способами.

    <!-- Недопустимо -->
<div>
  <input type="search" />
  <button onclick="...">Искать</button>
</div>

<!-- Правильно -->
<form onsubmit="...">
  <input type="search" />
  <button type="submit">Искать</button>
</form>

  • Создавайте все кастомные элементы формы поверх нативных соответствующих элементов и, если это возможно (например, чекбоксы \ радиокнопки), без использования JS. На мобильных устройствах используйте нативные элементы вместо кастомных выпадающих элементов (селектов, датапикеров). Нативные элементы должны быть доступны для спец. устройств (скрывать через visuallyhidden)

    <!-- Недопустимо -->
<div class="radio">
  <div class="radio__input"></div>
  <div class="radio__label">Радиокнопка</div>
</div>

<!-- Правильно -->
<label class="radio">
  <input type="radio" />
  <span class="radio__label">Радиокнопка</span>
</label>

<div class="radio">
  <input type="radio" id="radio"/>
  <label for="radio" class="radio__label">Радиокнопка</label>
</div>

Семантика и доступность

  • Старайтесь использовать элементы, которые отражают суть данного блока. Сведите к минимуму использование бессмысленных div и span. Хорошее описание семантики различных тегов можно найти на HTML5 Doctor.

    <!-- Недопустимо -->
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

<!-- Правильно -->
<header class="header"></header>
<main class="main"></main>
<footer class="footer"></footer>

  • Ставьте на каждой странице заголовок h1. Даже если дизайн не предполагает такого заголовка, всё равно поставьте его и скройте через visuallyhidden.

    <!-- Недопустимо -->
<body>
  <div class="title">Каталог товаров</div>
  ...
</body>

<!-- Правильно -->
<body>
  <h1 class="title">Каталог товаров</h1>
  ...
</body>

<body>
  <h1 class="visuallyhidden">Каталог товаров</h1>
  ...
</body>

  • Для всего контента, который не является текстом или может быть частично скрыт, оставляйте поясняющий текст:

    • для img — alt;
    • для кнопок, ссылок — title, который описывает действие (например, «Сохранить»), а не визуальную составляющую («Дискета»);
    • для контента, который частично скрыт и не открывается (например, через text-overflow) — title, чтобы была возможность прочитать полный текст.
    <!-- Недопустимо -->
<img src="..." />
<button>
  <span class="icon icon_save"></span>
</button>
<p>
  Длинный текст, который может быть частично скрыт и не виден пользователю
</p>

<!-- Правильно -->
<img src="..." alt="..."/>
<button title="Сохранить">
  <span class="icon icon_save"></span>
</button>
<p title="...">
  Длинный текст, который может быть частично скрыт и не виден пользователю
</p>

results matching ""

    No results matching ""