Latest web development tutorials

Bootstrap HTML coding conventions

grammar

  • With two spaces instead of tabs (tab) - This is the only way to ensure a consistent approach to show in all environments.
  • Nested elements should be indented once (ie two spaces).
  • For the definition of property, make sure that all use double quotes, never use single quotes.
  • Do not self-closing (self-closing) element tail add a slash - the HTML5 specification clearly stated that this is optional.
  • Do not omit optional end tag (closing tag) (for example, </li> or </body> ).

Example: 

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

HTML5 doctype

For each of the first line of HTML pages Add a standard mode (standard mode) statement, this can ensure that you have a consistent display in each browser.

Example: 

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

Language property

According to the HTML5 specification:

It is strongly recommended to specify the lang attribute html root element, so as to set the correct language for the document. This will help to speech synthesis tools should be used to determine their pronunciation, translation tools will help determine its translation should comply with the rules and so on.

More on lang attribute knowledge from this specification understanding of.

Here are the language code table . 

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

IE compatibility mode

IE support through specific <meta> tag to determine the current version of IE rendering pages should be used. Unless there is a strong special needs, otherwise it is best to set the edge mode, thereby notifying the IE using the latest models it supports. 

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

Character Encoding

By explicitly declare the character encoding, the browser can be secured quickly and easily determine page content rendering. The advantage of this is to avoid the use of character entities mark (character entity) in HTML, which is consistent with the entire document encoding (generally use UTF-8 encoding). 

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

The introduction of CSS and JavaScript files

According to the HTML5 specification, at the time of the introduction of CSS and JavaScript files generally do not need to specify the type attribute as text/css and text/javascript are their default values.

HTML5 spec links 

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

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

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

Practical is king

Try to follow HTML standards and semantics, but not at the expense of practicality for the price. Any time possible with minimal label and maintain a minimum of complexity.

Attribute Order

HTML attribute should be in order of priority 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, and should therefore be at the top. id is used to identify specific components, should be used with caution (such as bookmarks within the page), it came in second place. 

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

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

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

Boolean (boolean) type attribute

Boolean attribute may not be assigned at the time of declaration. XHTML specifications for its assignment, but the HTML5 specification is not required.

For more information, please refer to the WhatWG sectionTop ON Boolean Attributes :

Boolean attribute element if the value is true, if no value is false.

If you must assign a value, please refer WhatWG specification:

If the attribute exists, its value must be the empty string or [...] attribute canonical name, and do not add whitespace at the beginning and end.

Simply, it is not assigned. 

<input type="text" disabled>

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

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

Reduce the number of labels

When writing HTML code to avoid unnecessary parent element. In many cases, this requires an iterative and reconstruction to achieve. Consider the following case: 

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

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

JavaScript generated label

Tags generated by JavaScript so that content becomes difficult to find, edit, and reduce performance. Try to avoid to avoid.