Стандарты кодирования HTML в Bootstrap

Синтаксис

• Используйте два пробела вместо табуляции -- это единственный способ обеспечить согласованное отображение во всех средах.
• Вложенные элементы должны иметь один отступ (то есть два пробела).
• В определениях атрибутов обязательно используйте двойные кавычки, никогда — одинарные.
• Не добавляйте завершающий слэш в конце самозакрывающихся элементов --спецификация HTML5явно утверждает, что это необязательно.
• Не опускайте необязательные закрывающие теги (например,</li>или</body>）。

Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png.html" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

⟦0¦HTML5 doctype

⟦0¦Добавляйте объявление стандартного режима первой строкой каждой HTML-страницы, чтобы обеспечить единообразную отрисовку во всех браузерах.

Пример:

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

⟦0¦Атрибут языка

⟦0¦Согласно спецификации HTML5:

⟦0¦Настоятельно рекомендуется указывать атрибут lang для корневого элемента html, тем самым задавая правильный язык документа. Это поможет инструментам синтеза речи определить, какое произношение им следует использовать, поможет инструментам перевода определить правила, которых им следует придерживаться при переводе, и т. д.

A list is provided hereof language code tables。

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

⟦0¦Режим совместимости IE

⟦0¦IE поддерживает использование определённого<meta>тег, определяющий, какая версия IE должна использоваться для отображения текущей страницы. Если нет строгих особых требований, лучше всего установить его врежим edge, тем самым сообщая IE использовать новейший поддерживаемый им режим.

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

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

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

<head>
  <meta charset="UTF-8">
</head>

Подключение файлов CSS и JavaScript

Согласно спецификации HTML5, при подключении файлов CSS и JavaScript обычно не нужно указыватьtypeатрибут, потому чтоtext/cssиtext/javascriptявляются их соответствующими значениями по умолчанию.

Ссылки на спецификацию HTML5

• Использование link
• Использование style
• Использование script

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css.html">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js.html"></script>

Практичность — король

Старайтесь следовать стандартам и семантике HTML, но не жертвуйте ради этого практичностью. Всегда старайтесь использовать как можно меньше тегов и поддерживать наименьшую сложность.

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

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

• class
• id, name
• data-*
• src, for, type, href
• title, alt
• aria-*, role

class используется для идентификации многократно используемых компонентов, поэтому он должен идти первым. id используется для идентификации конкретных компонентов, и его следует использовать с осторожностью (например, для закладок на странице), поэтому он идёт вторым.

<a class="..." id="..." data-modal="toggle" href="../index.html">
  Example link
</a>

<input class="form-control" type="text">

<img src="....html" alt="...">

Логические атрибуты

Логические атрибуты могут быть объявлены без значения. Спецификация XHTML требует, чтобы у них было значение, а спецификация HTML5 — нет.

Для получения дополнительной информации обратитесь к разделуWhatWG о логических атрибутах：

Логический атрибут элемента является истинным, если он присутствует, и ложным, если он отсутствует.

Если вамдействительнонужно присвоить значение, обратитесь к спецификации WhatWG:

Если атрибут присутствует, его значением должна быть либо пустая строка, либо [...] каноническое имя атрибута, без начальных или конечных пробелов.

Короче говоря, нет необходимости присваивать значение.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Сократите количество тегов

При написании HTML-кода по возможности избегайте лишних родительских элементов. Во многих случаях это требует итераций и рефакторинга. См. пример ниже:

<!-- Not so great -->
<span class="avatar">
  <img src="....html">
</span>

<!-- Better -->
<img class="avatar" src="....html">

Теги, сгенерированные JavaScript

Теги, сгенерированные с помощью JavaScript, затрудняют поиск и редактирование содержимого и снижают производительность. По возможности избегайте их.

Другие расширения