Specification for writing flexible, stable, high-quality HTML code

Last Update:2016-08-19 Source: Internet

Author: User

Tags closing tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

No matter how many people are involved in the same project, make sure that each line of code is written as if it were the same person.

Grammar

Use two spaces instead of tabs (tab)-This is the only way to ensure consistent presentation in all environments.

Nested elements should be indented one time (that is, two spaces).

For the definition of a property, make sure to use double quotes and never use single quotes.

Do not add a slash at the end of the self-closing (self-closing) element--HTML5 The specification explicitly stated in this is optional.

src="images/company-logo.png" alt="Company">

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

HTML5 DOCTYPE

Adding a standard mode declaration to the first line of each HTML page ensures a consistent representation in every browser.

<!DOCTYPE html>

Language properties

According to the HTML5 specification:

It is strongly recommended that you specify the lang attribute for the HTML root element to set the correct language for the document. This will help the speech synthesis tool determine the pronunciation it should use, and help the translation tool determine the rules it should follow when translating.

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

lang="zh-CN">

The Language Code table is listed here.

IE compatibility mode

IE supports the use <meta> of specific tags to determine which version of 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, which informs IE to use the latest mode it supports.

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

Character encoding

By explicitly declaring character encodings, you can ensure that your browser is quick and easy to determine how the page content is rendered. The advantage of this is that you can avoid using character entity tags (character entity) in HTML, which is all consistent with the document encoding (UTF-8 encoding is generally used).

<meta charset="UTF-8">

Introducing CSS and JavaScript files

According to the HTML5 specification, it is generally not necessary to specify properties when introducing CSS and JavaScript files type , because text/css and text/javascript respectively, they are their default values.

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

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

Practical for the King

Try to follow HTML standards and semantics, but not at the expense of practicality. Try to use the fewest tags and keep the minimum complexity at all times.

Attribute Order

HTML attributes should be arranged in the order given below to ensure 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 should therefore be ranked first. ID is used to identify specific components and should be used with caution (for example, bookmarks within a page), so it is ranked second.

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

<input class="form-control" type="text">src="..." alt="...">

Boolean (Boolean) Type property

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

For more information, refer to WhatWG section on Boolean attributes:

The Boolean attribute of the element is true if it has a value, or false if there is no value.

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

If the property exists, its value must be the canonical name of an empty string or [...] property, and do not wrap up the add whitespace.

Simply put, there is no need to assign a value.

Reduce the number of labels

When writing HTML code, try to avoid unnecessary parent elements. Many times, this requires iterative and refactoring to implement. Take a look at the following example:

<span class="avatar">  src="..."></span>
Switchclass="avatar" src="...">

JavaScript-Generated tags

Tags generated by JavaScript make content difficult to find, edit, and degrade performance. Avoid as much as you can avoid.

Specifications for writing flexible, stable, high-quality HTML code

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More