Bootstrap HTML encoding specification
Grammar
-
Replace tabs (tabs) with two spaces -- the only way to ensure consistent presentation in all environments.
-
Nested elements should be indented once (i.e. two spaces).
-
For the definition of a property, make sure that you use double quotes completely, never single quotes.
-
Do not add slashes to the tail of the self-closing element -- html5 specifications make it clear that this is optional.
-
Do not omit the optional end tag (for example,
</li>or</body>
Instance:
<!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
Add a standard mode declaration to the first line of each HTML page, which ensures a consistent presentation in each browser.
Instance:
<!DOCTYPE html><html> <head> </head></html>
The language property
According to the HTML5 specification:
It is highly recommended that you specify the lang property for the html root element to set the correct language for the document. This will help speech synthesis tools determine the pronunciation they should adopt, translation tools determine the rules to be followed when translating, and so on.
More about
lang
can be
found in
this specification.
The language code table is listed here.
<html lang="zh-CN"> <!-- ... --></html>
IE-compatible mode
IE supports the
<meta>
determine which version of the IE should be used to draw the current page.
Unless there is a strong special need, it is best to set
it to edge mode
to notify IE of the latest mode it supports.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Character encoding
By explicitly declaring character encoding, you can ensure that the browser can quickly and easily judge how the content of the page is rendered. The benefit of this is that you can avoid using character entity tags in HTML, which are all consistent with document encoding (typically UTF-8 encoding).
<head> <meta charset="UTF-8"></head>
Introduce CSS and JavaScript files
According to the HTML5 specification, you generally do not need to specify type properties
type
CSS and JavaScript
text/css
text/javascript
are their default values, respectively.
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 for the king
Try to follow HTML standards and semantics, but don't sacrifice practicality. Use minimal labels at all times and maintain minimal complexity.
The order of the properties
HTML properties should be arranged in the order given below to ensure that the code is readable.
-
class -
id,name -
data-* -
src,for,type,href -
title,alt -
aria-*,role
Class is used to identify highly refurfunsable components and should therefore come first. id is used to identify specific components and should be used with caution (for example, bookmarks within a page) and therefore ranked second.
<a class="..." id="..." data-modal="toggle" href="#"> Example link</a><input class="form-control" type="text"><img src="..." alt="...">
Boolean-type properties
Boolean properties can be declared without a value. The XHTML specification requires that it be assigned a value, but the HTML5 specification does not.
For more information, please refer to WhatWG section on boolean attributes:
The Boolean property of an element is true if it has a value, and false if there is no value.
If you must assign it a value, refer to the WhatWG specification:
If the property exists, its value must be the canonation name of the empty string or the ....) property, and no more blank characters should be added at the end.
Simply put, you don't have to assign values.
<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, try to avoid extra parent elements. M any times, this requires iteration and refactoring. Take a look at the following example:
<!-- Not so great --><span class="avatar"> <img src="..."></span><!-- Better --><img class="avatar" src="...">
The label generated by JavaScript
Labels generated by JavaScript make content difficult to find, edit, and degrade performance. Avoid when you can.