Specification for HTML coding of front-end development specifications

Principle
1. Specifications. Ensure that your code specifications, trend HTML5, far XHTML, to ensure that the structure of the performance of the behavior of each other separate.
2. Concise. Ensure the most simplification of the code, avoid unnecessary spaces, empty lines, maintain the semantics of the code, try to use elements with semantics, avoid using style attributes and behavior attributes. Always use as simple and as few elements as possible to solve the problem.
3. Practical. Conform to standards, but not at the expense of practicality.
4. Loyalty. Select a set of specifications, and then always follow. No matter how many people participate in the code, it should look like a person writes.

Grammar
1. Lowercase. HTML tags, HTML attributes are all lowercase.
2. Nesting. All elements must be nested correctly.
3. Closed. Double label must be closed, single label (self-closing label) not closed.
[HTML] View plaincopy on code to see a snippet derived from my Code slice

<!--  Bad  -  < BR />  < HR />  <!-- Good  -  < BR >  < HR >  

Comments

1. Detailed comments. Explain the code to solve the problem, solve the idea, whether it is a fresh plan, etc.
2. Module comments. GitHub does not recommend closing annotations with modules.
[HTML] view plaincopy on code to see a snippet derived from my Code slice   
<!--news list module-->  
<div class= " News ">&NBSP;&NBSP;...&NBSP;&NBSP;
<!--/News list module-->  
<!--There are many specifications that do not use end-module annotations because it's so ugly, It also increases the file load. -->  
3. Pending comments.
[HTML] view plaincopy on code to see a snippet derived from my Code slice   
<!--TODO: to-dos-->  ...  

Document
1. Document type use HTML5 standard document type, before document type declaration, no non-null characters are allowed to appear. Adding <meta> forcing changes to document mode is not allowed.
Specifies the lang attribute on the 2.html element. Displays the page language, helps the language synthesis tool to determine how to pronounce, and the rules that the translation tool decides to use, and so on.
3. Specify the explicit character encoding. Make it easy and quick for browsers to determine how to render content for your Web pages.
4.IE compatibility mode. Internet Explorer supports the use of compatibility <meta> tags to specify what version of IE to use to render pages. If this is not a special requirement, IE is usually notified via edge mode to use the latest compatibility mode.
[HTML] View plaincopy on code to see a snippet derived from my Code slice
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
5.head Part Order:a.<meta> element, B. js file required (eg. Moddernizr or HTML5 Shiv), C. <title> element, D. style sheet.
6. You can use IE conditional annotations in a way that is compatible with IE, but do not add additional style sheets.
[HTML] View plaincopy on code to see a snippet derived from my Code slice

<!-- Bad -  <!--[If ie8]> <link rel= "stylesheet" href= "/assets/styles/ie8.css" > <! [EndIf] -  <!--[If ie7]> <link rel= "stylesheet" href= "/assets/styles/ie7.css" > <! [EndIf] -    <!--Good -  <!--[If ie8]> -  <!--[If ie7]> -  

Property
1. Double quote attribute value, do not use single quotation marks.
2. Omit the type attribute. Use style, link, script without specifying the type attribute, because Text/css and text/javascript are their default values, respectively.
3. Omit the Boolean property value. The Boolean property does not have to add values, disabled,checked,selected, and so on.
4. Omit the URL Class Property resource protocol header.
5. Attribute order. HTML attributes should appear in a specific order to ensure legibility. Class->id,name->data-*->src,for,type,href->title,alt->aria-*,role.
6. Add an override attribute to the multimedia element. Images add alt attribute, audio and video add alternate text.
7. Do not set the TabIndex property manually, let the browser set automatically.

Elements
1. Avoid redundant labels.
2. Avoid JS generation tags.
3. The paragraph text should use <P> avoid <br>.
4. List items put <ul>, <ol>, <dl> Do not use a series of <div> or <p>
5.<input> uses the For property to bind <label>.
6. Use the <label> tag to wrap radio or checkboxes and their text without using the For property.
7. Use the radio, check instead drop-down menu. (Radio or CheckBox instead of select menu)
The 8.form button should have type types, using type= "Submit", type= "reset", or type= "button".
9. The primary form button appears first (in the DOM), especially where multiple submit buttons apply. The order in which the views are displayed can be modified using CSS.
10. Effective use of <thead>, <tfoot>, <tbody>, <th> (Scope properties). You can put <tfoot> before <tbody> to increase the loading speed.
[HTML] View plaincopy on code to see a snippet derived from my Code slice

<TableSummary= "This was a chart of invoices for.">    <thead>      <TR>        <thScope= "Col">Table Header 1</th>        <thScope= "Col">Table Header 2</th>      </TR>    </thead>    <tfoot>      <TR>        <TD>Table Footer 1</TD>        <TD>Table Footer 2</TD>      </TR>    </tfoot>    <tbody>      <TR>        <TD>Table Data 1</TD>        <TD>Table Data 2</TD>      </TR>    </tbody>  </Table>  

Format
1.soft tab.
2. Nesting indentation.
3. Delete line trailing spaces.
4. Block elements, list elements, table elements are placed on new rows.
The 5.inline element wraps as appropriate.
6. Try to keep each line length less than 80 columns if it is too long to wrap.
[HTML] View plaincopy on code to see a snippet derived from my Code slice

<!-- Bad -  <imgclass= "Block_element"ID= "Unicorn"src= "http://cl.ly/image/1a1u013e002z"alt= "unicorn, rainbows, poop and stuff"width= "$"Height= "The " />  <!--Good -  <imgclass= "Block_element"ID= "Unicorn"src= "http://cl.ly/image/1a1u013e002z"alt= "unicorn, rainbows, poop and stuff"width= "$"Height= "The "  >  

Specification for HTML coding of front-end development specifications