Bootstrap HTML Coding Standards

Syntax

  • Use two spaces instead of tabs -- this is the only way to ensure consistent rendering in all environments.
  • Nested elements should be indented once (i.e., two spaces).
  • For attribute definitions, make sure to use double quotes throughout, never single quotes.
  • Do not add a trailing slash at the end of self-closing elements --the HTML5 specificationexplicitly states that this is optional.
  • Do not omit optional closing tags (e.g.,</li>or</body>）。

Example:

<!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>

HTML5 doctype

Add a standard mode declaration as the first line of every HTML page, so as to ensure consistent rendering across every browser.

Example:

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

Language attribute

According to the HTML5 specification:

It is strongly recommended that the lang attribute be specified for the html root element, thereby setting the correct language for the document. This will help speech synthesis tools determine the pronunciation they should use, help translation tools determine the rules they should follow when translating, and so on.

A list is provided hereof language code tables。

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

IE compatibility mode

IE supports using a specific<meta>tag to determine which IE version should be used to render the current page. Unless there are strong special requirements, it is best to set it toedge mode, thereby telling IE to use the latest mode it supports.

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

Character encoding

By explicitly declaring the character encoding, you can ensure that browsers quickly and easily determine how to render the page content. The benefit of this is that you can avoid using character entity markup in HTML, keeping everything consistent with the document encoding (usually UTF-8).

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

Including CSS and JavaScript files

According to the HTML5 specification, when including CSS and JavaScript files there is generally no need to specify thetypeattribute, becausetext/cssandtext/javascriptare their respective default values.

HTML5 spec links

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

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

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

Practicality is king

Try to follow HTML standards and semantics, but do not sacrifice practicality to do so. Always try to use the fewest tags and maintain the lowest complexity.

Attribute order

HTML attributes should be arranged in the order given below to ensure code readability.

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

class is used to identify highly reusable components, so it should come first. id is used to identify specific components and should be used with caution (e.g., page bookmarks), so it comes second.

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

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

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

Boolean attributes

Boolean attributes may be declared without a value. The XHTML specification requires them to have a value, but the HTML5 specification does not.

For more information, please refer toWhatWG section on boolean attributes：

A boolean attribute on an element is true if it is present, and false if it is absent.

If youreallyneed to assign a value, please refer to the WhatWG specification:

If the attribute is present, its value must be either the empty string or [...] the canonical name of the attribute, with no leading or trailing whitespace.

In short, there is no need to assign a value.

<input type="text" disabled>

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

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

Reduce the number of tags

When writing HTML code, avoid superfluous parent elements as much as possible. In many cases, this requires iteration and refactoring. See the example below:

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

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

Tags generated by JavaScript

Tags generated via JavaScript make content harder to find and edit, and reduce performance. Avoid them whenever possible.

Other extensions