Bootstrap HTML coding specifications


Syntax

  • Use two spaces instead of tabs - this is the only way to ensure consistency in all environments method of presentation.

  • Nested elements should be indented once (i.e. two spaces).

  • For attribute definitions, be sure to use double quotes and never single quotes.

  • Do not add a trailing slash to a self-closing element - the HTML5 specification clearly states that this is optional.

  • Do not omit the optional closing tag (for example, </li> or </body>) .

Example:

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

HTML5 doctype

Adds a standard mode declaration to the first line of each HTML page to ensure consistent presentation in each browser.

Example:

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

Language attribute

According to the HTML5 specification:

It is strongly recommended to specify the lang attribute for the html root element to set 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.

More information about lang attributes can be learned from this specification.

The language code table is listed here.

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

IE Compatibility Mode

IE supports specific <meta> tags to determine the IE version that should be used to draw the current page. Unless there are strong special needs, it is best to set it to edge mode to notify IE to adopt the latest mode it supports.

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

Character encoding

By explicitly declaring the character encoding, it can ensure that the browser can quickly and easily determine how the page content is rendered. The advantage of this is that you can avoid using character entities in HTML, so that everything is consistent with the document encoding (usually UTF-8 encoding).

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

Introduce CSS and JavaScript files

According to the HTML5 specification, there is generally no need to specify the type attribute when introducing CSS and JavaScript files, because text/css and text/javascript are their default values ​​respectively.

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 is king

try your best Follow HTML standards and semantics, but don't sacrifice practicality. Try to use the fewest tags and keep complexity to a minimum at all times.

Attribute order

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

  • ##class

    • ##id
  • ,

    name

    • data-*

  • ##src
    • ,
  • for

    , type, href

    title
    • ,
  • alt

    aria-*
    • ,
  • role

    class is used to identify highly reusable components and therefore should be listed first. The id is used to identify a specific component and should be used with caution (for example, bookmarks within a page), so it comes second.

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

Example link

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

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

Boolean attributes

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

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

If the Boolean attribute of the element has a value, it is true, if it does not have a value, it is false.

If must be assigned a value, please refer to the WhatWG specification:

If the attribute exists, its value must be an empty string or [...] attribute Standardize the name and do not add leading or trailing whitespace.

To put it simply, 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

Write HTML When coding, try to avoid redundant parent elements. Many times, this requires iteration and refactoring to achieve. Please look at the following case:

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

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

JavaScript-generated tags

Tags generated through JavaScript make content difficult to find, edit, and reduce performance. Avoid it when you can.


←
→