Front End Coding Specification Summary: HTML

Each company will be trained before the new recruits, one of the most important training is the unity of code style, which involves the entire project code readability, maintainability. A good programmer should also develop a good coding style and habits.

Today, summarize the coding specifications in HTML.

Document type

Recommended for the HTML5 document type declaration: <! DOCTYPE html>

It is also recommended to use HTML in text/html format. Avoid using XHTML. XHTML and its properties, such as Application/xhtml+xml's application support and optimization space in the browser, are very limited.
It is best not to close the tag with no content element [1] in HTML, for example: Use <br> instead of <br/>

HTML validation

It is recommended that you use HTML code that can be validated by standard specifications, unless you have to compromise on performance optimization and control file size, using tools such as the world's HTML validator to detect.
The normalized HTML is a significant quality baseline that manifests the technical requirements and limitations, and it facilitates the use of HTML in a better way.

Recommended:

<! DOCTYPE html><meta charset= "Utf-8" ><title>test</title><article>this is only a test.</ Article>

omit an optional label

The HTML5 specification specifies that HTML tags can be omitted. However, in terms of readability, it is best not to do so in the source files that are developed, because omitting tags can cause some problems.
Omitting some of the optional tags does make the page size less, which is useful, especially for some large websites. In order to achieve this, we can compress the page at the end of the development period, in which the optional tags are completely omitted.

Script loading

For performance reasons, scripting asynchronous loading is critical. A script is placed inside Asynchronous load scripts can mitigate this performance impact. If you only need to be compatible with ie10+, you can add the async attribute of HTML5 to the script, which prevents parsing of the blocking DOM, and even you can write script references in If you need to be compatible with older browsers, practice indicates that you can use a script loader to inject scripts dynamically. You can consider Yepnope or LABJS. One problem with the injection script is that it waits until the CSS object document is ready before it starts to load (briefly after the CSS has been loaded), which causes a delay to the JS that needs to be triggered in time, which in some way affects the user experience.
As described above, when older browsers (ie9-) are compatible, the following best practices should be followed.
The script reference is written before the body end tag and with the async attribute. While the script is not loaded asynchronously in an old browser, it only blocks DOM parsing before the body end tag, which greatly reduces its blocking effect. In a modern browser, the script will be loaded when the DOM parser finds the script tag at the end of the body, which is loaded asynchronously and does not block CSSOM (but its execution still occurs after CSSOM).

Recommended:

Recommended only in modern browsers:

The semantics of
It is used based on the initial meaning of the element (sometimes falsely referred to as the "label") when it is created. For example, use the heading element to define the header title, the P element to define the text paragraph, the A element to define the link anchor point, and so on.
The use of HTML elements based on destination is significant for accessibility, code reuse, and code efficiency.
Multimedia backtracking
For media on the page, like pictures, videos, canvas animations, etc., make sure they have an alternative access interface. Image files We can use meaningful alternative text (ALT), video and audio files that we may add captions or subtitles to. Providing alternative content is important for usability.
(The Alt attribute of the picture is not filled in, the purely decorative picture can be used to do so: alt= ").
Separation of attention points
It's important to understand how and why a different point of interest is differentiated in the web. The focus here mainly refers to information (HTML structure), appearance (CSS), and Behavior (JavaScript). In order to make them maintainable, clean and tidy code, we need to separate them as much as we can.
Strictly ensure that the structure, performance, behavior of the three separate, and try to make the three do not have too much interaction and contact.
That is, try to include only structural HTML in the document and template, and move all the presentation code into the stylesheet, and move all the action behavior into the script.
In addition to this, in order to make the connection between them as small as possible, in the documents and templates as much as possible to introduce style and script files.
A clear layering means:
Do not use more than one or two style sheets (i.e. MAIN.CSS, vendor.css)
Do not use more than one to two scripts (learn to use merge scripts)
Do not use inline styles (<style>.no-good {}</style>)
Do not use the Style property on elements (Do not use inline scripting (<script>alert (' no Good ') </script>)
Do not use imagery elements (i.e. <b>, <u>, <center>, <font>, <b>)
Do not use the Representation class name (i.e. Red, left, center)
HTML content First
Don't let non-content information pollute your HTML. Now there seems to be a tendency to solve design problems through HTML, which is obviously wrong. HTML should only focus on content.
The purpose of HTML tags is to continually display content information. Instead of introducing specific HTML constructs to solve some visual design problems, do not use the IMG element as an element specifically designed for visual design.
HTML quotation marks
Use double quotation marks ("") instead of single quotation marks (").





Front End Coding Specification Summary: HTML