HTML Programming Specification

2.1 Indent and line feed
[Force] uses 4 spaces as an indent level, with no 2 spaces or tab characters allowed.
Explanation: Indents between non-HTML tags, such as script or style tags, are indented with the indentation of the script or style label.

Example:

<style>
/* The first level indent of style content is aligned with the style label that belongs to */
UL {
padding:0;
}
</style>
<ul>
<li>first</li>
<li>second</li>
</ul>
<script>
The first-level indentation of the script code aligns with the owning script tag
Require ([' app '], function (APP) {
App.init ();
});
</script>
[Recommended] No more than 120 characters per line.
Explain:

Too long code is not easy to read and maintain. But considering the particularity of HTML, do not make the hard request.

2.2 Naming
[Mandatory] class must have the word full letter lowercase, the word between-separated.
The [mandatory] class must represent the content or functionality of the corresponding module or part and should not be named with style information.
Example:

<!--good-
<div class= "sidebar" ></div>

<!--bad---
<div class= "left" ></div>
The [force] element ID must guarantee that the page is unique.
Explain:

In the same page, different elements contain the same ID, which does not conform to the ID's attribute meaning. And the use of document.getElementById can lead to problems that are difficult to track down.

The [recommended] ID suggests the words are all lowercase and the words are separated by-. The project must be consistent in style.
The [Recommended] ID, class name, as short as possible to avoid conflicts and describe clearly the premise.
Example:

<!--good-
<div id= "NAV" ></div>
<!--bad---
<div id= "Navigation" ></div>

<!--good-
<p class= "comment" ></p>
<!--bad---
<p class= "com" ></p>

<!--good-
<span class= "Author" ></span>
<!--bad---
<span class= "Red" ></span>
[Mandatory] Disables the creation of class without style information for hook scripts.
Explain:

Class is not allowed only for JavaScript to select certain elements, and class should have explicit semantics and style. Otherwise, it can easily lead to CSS class flooding.

Using ID, attribute selection as hooks is a better way.

[Force] The same page, avoid using the same name and ID.
Explain:

IE will confuse the ID of the element with the name attribute, and document.getElementById may get undesirable elements. So it takes great care to name the element's ID and name attribute.

A good practice is to use different nomenclature for ID and name.

Example:

<input name= "foo" >
<div id= "foo" ></div>
<script>
IE6 will display the INPUT
Alert (document.getElementById (' foo '). TagName);
</script>
2.3 Tags
The [mandatory] Label name must use lowercase letters.
Example:

<!--good-
<p>hello styleguide!</p>

<!--bad---
<p>hello styleguide!</p>
[Mandatory] self-closing is not allowed for labels that do not require self-closing.
Explain:

It is common to have input, BR, IMG, HR, etc. without self-closing tags.

Example:

<!--good-
<input type= "text" name= "title" >

<!--bad---
<input type= "text" name= "title"/>
[Force] A closed label that is allowed to be omitted in the HTML5, and not allowed to omit a closed label.
Explain:

An exception to the scenario where code volume is very demanding. For example: The delivery system used by third party pages.

Example:

<!--good-
<ul>
<li>first</li>
<li>second</li>
</ul>

<!--bad---
<ul>
<li>first
<li>second
</ul>
The [mandatory] label use must conform to the tag nesting rules.
Explain:

For example, Div should not be placed in P, tbody must be placed in table.

Detailed tag nesting rules are described in the Elements definition section of the HTML DTD.

Recommendations The use of HTML tags should follow the semantics of the tags.
Explain:

The following are common label semantics

P-Paragraph
H1,h2,h3,h4,h5,h6-Hierarchy Title
Strong,em-Emphasis
INS-inserting
Del-Delete
ABBR-Abbreviation
Code-ID
Cite-Quote the title of the source work
Q-Reference
BLOCKQUOTE-A paragraph or lengthy reference
UL-unordered list
OL-Ordered list
DL,DT,DD-Definition List
Example:

<!--good-
<p>esprima serves as an important <strong>building block</strong> for some JavaScript language TOOLS.&L T;/p>

<!--bad---
<div>esprima serves as an important <span class= "strong" >building block</span> for some JavaScript Lang Uage tools.</div>
[Recommended] You should not use a table to lay out your CSS when you can achieve the same requirements.
Explain:

As far as compatibility permits, semantic correctness should be maintained. Exceptions, such as multi-column complex forms, are allowed for scenarios where the grid has stringent requirements for alignment stretching.

[Recommended] The use of the label should be as concise as possible to reduce unnecessary labels.
Example:

<!--good-

<!--bad---
<span class= "Avatar" >

</span>
2.4 Properties
The [Force] property name must use lowercase letters.
Example:

<!--good-
<table cellspacing= "0" >...</table>

<!--bad---
<table cellspacing= "0" >...</table>
The [Force] property value must be surrounded by double quotation marks.
Explain:

Single quotes are not allowed and no quotation marks are allowed.

Example:

<!--good-
<script src= "Esl.js" ></script>

<!--bad---
<script src= ' esl.js ' ></script>
<script src=esl.js></script>
[Recommended] Boolean type property, we recommend not to add property values.
Example:

<input type= "Text" disabled>
<input type= "checkbox" value= "1" checked>
[Recommended] Custom properties are recommended to be prefixed with xxx-, data-is recommended.
Explain:

Using prefixes helps differentiate between custom attributes and standard-defined properties.

Example:

<ol data-ui-type= "Select" ></ol>
3 General
3.1 DOCTYPE
[Force] to use HTML5 's DOCTYPE to enable standard mode, it is recommended to use uppercase DOCTYPE.
Example:

<! DOCTYPE html>
[Recommended] Enable IE Edge mode.
Example:

<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
[Recommended] Set the correct lang attribute on the HTML tag.
Explain:

Helps improve the accessibility of the page, such as making the speech synthesis tool determine the pronunciation it should use, so that the translation tool determines its translation language, and so on.

Example:

3.2 Encoding
The [mandatory] page must use a condensed form to explicitly specify the character encoding. The meta of the specified character encoding must be the first direct child of the head.
Explain:

See HTML5 CharSet can use it.

Example:

<meta charset= "UTF-8" >
......
<body>
......
</body>
Recommendations HTML files use UTF-8 encoding without a BOM.
Explain:

UTF-8 coding has a wider adaptability. The BOM can cause unnecessary interference when working with programs or tools to process files.

3.3 CSS and JavaScript Introduction
[Mandatory] The introduction of CSS must indicate rel= "stylesheet".
Example:

<link rel= "stylesheet" href= "Page.css" >
[Recommended] It is not necessary to specify the type attribute when introducing CSS and JavaScript.
Explain:

Text/css and Text/javascript are the default values for type.

The presentation definition is placed in an external CSS and the behavior definition is placed in an external JavaScript.
Explain:

The code separation of structure-style-behavior is good for improving the readability and maintainability of the code.

[Recommended] To introduce all the CSS resources required by the page in the head.
Explain:

In the process of page rendering, the new CSS may cause the element's style to be recalculated and drawn, and the page will blink.

Recommendations JavaScript should be placed at the end of the page, or asynchronously loaded.
Explain:

Placing the script in the middle of the page blocks rendering of the page. For performance reasons, if not necessary, follow this recommendation.

Example:

<body>
<!--a lot of elements--
<script src= "Init-behavior.js" ></script>
</body>
[Recommended] for mobile environments or Web apps designed for modern browsers only, it is recommended that you omit the protocol prefix if the URL agreement section referencing the external resource is the same as the page.
Explain:

Using the protocol-relative URL to introduce CSS, under IE7/8, two requests are made. Whether to use the protocol-relative URL should take full account of the environment the page targets.

Example:

<script src= "//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js" ></script>
4 Head
4.1 Title
The [mandatory] page must contain the title tag declaration header.
The title must be a direct child of the head and immediately after the CharSet declaration.
Explain:

If a character other than ASCII is included in the title, the browser needs to know the character encoding type in order to decode it, otherwise it may cause garbled characters.

Example:

<meta charset= "UTF-8" >
<title> Page Title </title>
4.2 Favicon
[mandatory] to ensure that Favicon is accessible.
Explain:

When Favicon is not specified, most browsers request Favicon.ico under the Web Server root directory. To ensure that the favicon is accessible and avoid 404, you must follow one of the following two methods:

Place the Favicon.ico file in the Web Server root directory.
Use link to specify Favicon.
Example:

<link rel= "shortcut icon" href= "Path/to/favicon.ico" >
4.3 viewport
[Recommended] If the page is to be mobile-friendly, specify the viewport of the page.
Explain:

Viewport META tag allows you to set the width and initial zoom size of the viewable area to prevent page display from appearing unhealthy on mobile devices.

For example, if you need IOS device-friendly When the page width is less than 980px, you should set the viewport width value to fit your page width. Also, because different mobile device resolutions are different, the device-width and device-height variables should be used when setting up.

In addition, in order to make the viewport normal work, in the page content style layout design should also make corresponding adjustments, such as avoiding absolute positioning. For more information about viewport, see the introduction to the Safari Web Content Guide

5 pic
[Force] The SRC value of the prohibit IMG is null. Delayed loading of the picture also has to add the default src.
Explain:

The value of SRC is null, which causes some browsers to reload the current page, refer to: HTTPS://DEVELOPER.YAHOO.COM/PERFORMANCE/RULES.HTML#EMPTYSRC

[Recommended] Avoid adding unnecessary title attributes to IMG.
Explain:

The excess title affects the viewing experience and increases the page size.

[Recommended] Add ALT attribute to important picture.
Explain:

You can improve the user experience when a picture fails to load.

[Recommended] Add the width and Height properties to avoid page jitter.
[Recommended] There are download requirements of the image using the IMG tag implementation, no download requirements of the picture is implemented using CSS background.
Explain:

Product logo, user avatar, user-generated images and other potential download needs of the picture, in the form of IMG, can be convenient for users to download.
No download requirements of the picture, such as: icon, background, the image of the code used, as far as possible using CSS background map.
6 form
6.1 Control title
A control that has a text caption must use a label label to associate it with its caption.
Explain:

There are two ways of doing this:

Place the control inside the label.
The label's for property points to the control's ID.
It is recommended to use the first one to reduce unnecessary IDs. If the DOM structure does not allow direct nesting, then the second type should be used.

Example:

<label><input type= "checkbox" name= "Confirm" value= "on" > I have confirmed the above terms </label>

<label for= "username" > user name:</label> <input type= "textbox" Name= "username" id= "username" >
6.2 button
The Type property value must be specified when using the button element.
Explain:

The default type of the button element is submit, and if placed in the form element, clicking will cause the form to submit. For the display to differentiate its function conveniently, you must give the type attribute.

Example:

<button type= "Submit" > Submit </button>
<button type= "button" > Cancel </button>
[Recommended] Try not to use the Name property of the button class element.
Explain:

Because of browser compatibility issues, using the button's Name property presents many problems that are difficult to discover. Refer to this article for details.

6.3 Accessibility (A11Y)
[Recommended] The main function of the button in the DOM is in the order of the front.
Explain:

The buttons that are responsible for the main function should be relative to the front to improve accessibility. If Float:right is specified in the CSS, it may cause the visual primary button to be in front of the main button in the DOM.

Example:

<!--good-
<style>
. buttons. button-group {
Float:right;
}
</style>

<div class= "Buttons" >
<div class= "Button-group" >
<button type= "Submit" > Submit </button>
<button type= "button" > Cancel </button>
</div>
</div>

<!--bad---
<style>
. Buttons button {
Float:right;
}
</style>

<div class= "Buttons" >
<button type= "button" > Cancel </button>
<button type= "Submit" > Submit </button>
</div>
[Recommended] When a form submission is made using JavaScript, the native commit feature should work correctly if the conditions permit.
Explain:

When the browser JS run error or close JS, the submission function will not work. If the Action property of the form element and the Name property of the form control are specified correctly, the submission can continue.

Example:

<form action= "/login" method= "POST" >
<p><input name= "username" type= "text" placeholder= "username" ></p>
<p><input name= "password" type= "password" placeholder= "password" ></p>
</form>
[Recommended] When developing a page for a mobile device, specify the Type property of the input box based on the content type.
Explain:

You can get a friendly input experience by specifying the type of input box based on the content type.

Example:

<input type= "Date" >
7 Multi-media
[Recommended] When using audio and video tags in modern browsers, you should be aware of the format.
Explain:

Audio should be covered as much as possible in the following format:

MP3
Wav
Ogg
The video should be covered as much as possible in the following format:

MP4
WebM
Ogg
It is recommended to use audio and video tags to define audio-visual elements in browsers that support HTML5.
It is recommended to support multiple browsers using a method that is degraded to plug-ins.
Example:

<audio controls>
<source src= "Audio.mp3" type= "Audio/mpeg" >
<source src= "Audio.ogg" type= "Audio/ogg" >
<object width= "height=" Data= "Audio.mp3" >
<embed width= "height=" src= "audio.swf" >
</object>
</audio>

<video width= "height=" controls>
<source src= "Video.mp4" type= "Video/mp4" >
<source src= "Video.ogg" type= "Video/ogg" >
<object width= "height=" Data= "Video.mp4" >
<embed width= "height=" src= "video.swf" >
</object>
</video>
[Recommended] only when necessary to turn on the automatic playback of audio and video.
[Recommended] A description inside the object tag that indicates that the browser does not support the label.
Example:

<object width= "" "height=" Data= "something.swf" >do not support this tag</object>
8 HTML in a template
[Recommended] Indentation precedence of template code guarantees the indentation rules for HTML code.
Example:

<!--good-
{if $display = = true}
<div>
<ul>
{foreach $item _list as $item}
<li>{$item .name}<li>
{/foreach}
</ul>
</div>
{/if}

<!--bad---
{if $display = = true}
<div>
<ul>
{foreach $item _list as $item}
<li>{$item .name}<li>
{/foreach}
</ul>
</div>
{/if}
The [recommended] template code should be based on the correctness of the HTML single label syntax.
Example:

<!--good-
<li class= "{if $item. type_id = = $current _type}focus{/if}" >{$item. Type_name}</li>

<!--bad---
<li {if $item. type_id = = $current _type} class= "Focus" {/if}>{$item. type_name}</li>
[Recommended] When looping over template data to construct a table, it is recommended that the data be grouped before the output is recycled, if each row is required to output a fixed number of rows.
Example:

<!--good-
<table>
{foreach $item _list as $item _group}
<tr>
{foreach $item _group as $item}
<td>{$item. Name}</td>
{/foreach}
<tr>
{/foreach}
</table>

<!--bad---
<table>
<tr>
{foreach $item _list as $item}
<td>{$item. Name}</td>
{if [email protected] is div by 5}
</tr>
<tr>
{/if}
{/foreach}
</tr>
</table>

HTML Programming Specification