Корпоративный стиль HTML

Синтаксис

  • Для отступов у вложенных элементов используются Tab
  • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
  • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
  • Необязательные закрывающие теги (например, </p>, </li> или </body>) не пропускаются.

Валидность

  • Документ должен проходить проверку на валидность. Для проверки используется современный валидатор html или Unicorn.

    Невалидность которую дают сторонние плагины и скрипты можно не исправлять

HTML-доктайп

  • В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
  • Doctype для HTML 5
    <!DOCTYPE html>

Кодировка символов

  • Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна. - 
    <meta charset="utf-8">

Поключение стилей

  • Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега не указывается, так как его значение text/css устанавливается по умолчанию.
    <link rel="stylesheet" href="mystyle.css">

Подключение скриптов

  • Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.
  • Исключение: скрипты требующие поддключения вверху (Modernizer, ect)
  • При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.

Порядок атрибутов

  • Атрибут класса у HTML-элементов пишется первым.
  • Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам.
  • Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов.
    <a class="element element-big" id="element" href="#" data-name="element">Ссылка</a>
<input class="form-control" type="text" name="test">
<img class="pets-picture" src="cats.jpg" alt="Изображение котиков">

Порядок атрибутов

  • Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе. 
    <!-- checked="checked" необязательно -->
<input type="checkbox" required checked>
<input type="text" disabled>
<select>
<option value="1" selected>1</option>
</select>

Подписи полей ввода

  • Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега

Размеры картинок

  • Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях или в процентах. В случае пикселей размерность не нужна.
  • По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
    <!-- Хорошо: размеры картинке заданы -->
<div class="logo-area">
<img src="logo.png" alt="" width="300" height="150">
</div>
<!-- Плохо: размеры картинке заданы в px -->
<div class="logo-area">
<img src="logo.png" alt="" width="300px" height="150px">
</div>
<!-- Плохо: размеры картинке не заданы -->
<div class="logo-area">
<img src="logo.png" alt="">
</div>

Исключение: респонсивные картинки

max-width: 100% или width:100% - по ситуации
display:block;

Атрибут языка

  • Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
    <html lang="ru">

results matching ""

    No results matching ""