Bootstrap HTML coding conventions
- 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,
<!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>
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.
<!DOCTYPE html> <html> <head> </head> </html>
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.
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">
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>
type attribute as
HTML5 spec links
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.
HTML attribute should be in order of priority in the order given below, to ensure code readability.
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="...">