HTML coding specification
Code style.
Indent and line feed
[Force] Use 4 Spaces as an indentation level. 2 Spaces or TAB characters are not allowed.
[Suggestion] Each line contains a maximum of 120 characters.
named
[Mandatory] class The words must be lowercase and separated by hyphens (-).
[Mandatory] The class must represent the content or functionality of the corresponding module or part and must not be named with style information.
Element ID must be page unique.
[Suggestion] ID You are advised to separate the new words with hyphens (-) and lowercase letters. The project must be consistent in style.
[Suggestion] The name of the ID and class should be as short as possible on the premise of avoiding conflicts and making the description clear.
[Mandatory] Disallows the creation of a class without style information for hook scripts.
[Mandatory] Do not use the same name and ID on the same page.
The label
[Mandatory] The label name must use lowercase letters.
[Mandatory] The label that does not need to be self-closed cannot be self-closed.
[Mandatory] It is not allowed to omit closed tags specified in HTML5.
[Mandatory] Label usage must comply with the label nesting rules.
[Suggestion] The use of HTML tags should follow the semantics of tags.
[Suggestion] Do not use tables for layout when the CSS can meet the same requirements.
[Suggestion] Use labels simply and reduce unnecessary labels.
attribute
Attribute names must use lowercase letters.
Attribute values must be enclosed in double quotes.
[Suggestion] Attribute of Boolean type. Do not add attribute value.
[Suggestion] User-defined attributes You are advised to use data- and XXX – as the prefix.
general
DOCTYPE
Use HTML5 docType to enable standard mode. Uppercase doctype is recommended.
[Suggestion] Enable the IE Edge mode.
[Suggestion] Set the correct lang attribute on the HTML tag.
coding
The page must be in a compact form with an explicit character encoding. The meta that specifies the character encoding must be the first direct child of head.
[Suggestion] Use UTF-8 encoding without BOM for HTML files.
CSS and JavaScript introduced
When importing CSS, you must specify rel=”stylesheet”
[Suggestion] It is not necessary to specify the type attribute when importing CSS and JavaScript.
[Suggestion] Put presentation definitions in external CSS and behavior definitions in external JavaScript.
[Suggestion] Import all CSS resources required by the page in the head.
[Suggestion] JavaScript should be placed at the end of the page or loaded asynchronously.
[Suggestion] In mobile environments or Web applications designed only for modern browsers, if the protocol part of the URL referencing external resources is the same as that of the Web page, omit the protocol prefix.
head
title
The page must contain the title tag to declare the title.
[Enforces] The title must be a direct child of the head and follow the charset declaration.
favicon
[Force] Make favicon accessible.
viewport
Suggestion: If the page is to be mobile-friendly, specify the viewport of the page.
The picture
[Mandatory] Disable the value of SRC of img from being empty. Lazy-loaded images should also be added with the default SRC.
[Suggestion] Do not add unnecessary title attributes to img.
[Suggestion] Add Alt attributes for important images.
[Suggestion] Add width and height attributes to avoid page jitter.
[Suggestion] Use img tags for images that need to be downloaded, and use CSS background images for images that do not need to be downloaded.
The form
Controls the title
A control with a text title must be associated with its title using the Label label.
button
The type attribute must be specified when using the button element.
[Suggestion] Try not to use the name attribute of the button element.
Accessibility (A11Y)
[Suggestion] Buttons that are responsible for major functions should be in the first order in the DOM.
[Suggestion] When using JavaScript for form submission, make the native submission function work properly if possible.
[Suggestion] When developing a page for mobile devices, specify the type attribute of the input box based on the content type.
multimedia
[Suggestion] When using the Audio and video tags to play audio and video in modern browsers, pay attention to the format.
[Suggestion] Use audio and video tags to define audio and video elements in preference to HTML5 enabled browsers.
[Suggestion] Use retrogression to plug-in to support multiple browsers.
[Suggestion] Enable automatic playback of audio and video only when necessary.
[Suggestion] Provide a description inside the object tag indicating that the browser does not support the tag.
HTML in templates
[Suggestion] Indentation of template code preferentially ensure the indentation rules of HTML code.
[Suggestion] Template code should be based on the principle of ensuring the correctness of the syntax of each HTML tag.
[Suggestion] If you need to output a fixed number of data in each row when constructing a table by cyclic processing template data, you are advised to group the data first and then loop the output.