❮ Bootstrap V2 Collapse Plugin Bootstrap Affix Plugin ❯

Bootstrap HTML Coding Standards

Syntax

Use two spaces instead of tabs for indentation — this is the only way to ensure consistent formatting across all environments.
Nested elements should be indented once (i.e., two spaces).
Always use double quotes for attribute values, never single quotes.
Do not add a trailing slash in self-closing elements — HTML5 specification explicitly states 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 decoding="async" src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 Doctype

Include a standard mode declaration on the first line of every HTML page to ensure consistent rendering across different browsers.

Example:

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

Language Attribute

According to the HTML5 specification:

It is strongly recommended to specify the lang attribute on the root html element, setting the correct language for the document. This helps speech synthesis tools to determine the proper pronunciation, translation tools to apply correct translation rules, etc.

A list of language codes is available.

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

IE Compatibility Mode

Internet Explorer supports setting the rendering mode for the current page using specific <meta> tags. Unless there is a strong need for a specific version, it is best to set it to edge mode to instruct IE to use the latest supported mode.

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

Character Encoding

By explicitly declaring the character encoding, you enable browsers to render content quickly and easily. This practice prevents the use of character entity references in HTML and ensures consistency with the document encoding (typically UTF-8).

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

Including CSS and JavaScript Files

According to the HTML5 specification, it is generally unnecessary to specify the type attribute when including CSS and JavaScript files, as text/css and text/javascript are their default values.

HTML5 spec links

Using link
Using style

Using script

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

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

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

Practicality Over Purity

Strive to follow HTML standards and semantics, but not at the expense of practicality. Use the least number of tags and maintain minimal complexity whenever possible.

Attribute Order

HTML attributes should be listed in the following order to enhance 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 be prioritized. ID is used to identify specific components and should be used sparingly (e.g., bookmarks within a page), hence it comes second.
```
<a class="..." id="..." data-modal="toggle" href="#">
  Example link
</a>

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

<img decoding="async" src="..." alt="...">
```

Boolean Attributes

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

For more information, refer to the WhatWG section on boolean attributes:

A Boolean attribute is true if it is present on the element and false if it is not.

If you must assign a value, refer to the WhatWG specification:

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

In short, do not assign a value.

&lt;input type="text" disabled>

&lt;input type="checkbox" value="1" checked>

<select>
  &lt;option value="1" selected>1</option>
</select>

Reducing Tag Count

When writing HTML, avoid unnecessary parent elements. This often requires iteration and refactoring. Consider the following examples:

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

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

JavaScript-Generated Tags

Tags generated by JavaScript make content harder to find and edit, and can reduce performance. Avoid them when possible.

❮ Bootstrap V2 Collapse Plugin Bootstrap Affix Plugin ❯