Front-end encoding specification (2) HTML specification, front-end Encoding

Last Update:2018-02-01 Source: Internet

Author: User

Tags html validator w3c html validator

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

Front-end encoding specification (2) HTML specification, front-end Encoding
Document Type

HTML5 document type statement is recommended:<!DOCTYPE html>

(Html in text/HTML format is recommended. Avoid using XHTML. XHTML and its attributes, suchapplication/xhtml+xmlLimited space for application support and Optimization in browsers ).

In HTML, it is better not to close tags with no content element [1]. For example, use<br>Rather<br />.

HTML Verification

Generally, we recommend that you use HTML code that can pass standard validation unless you have to make concessions on performance optimization and file size control.

Use tools such as W3C HTML validator for detection.

Standardized HTML is a significant quality baseline that shows technical requirements and limitations. It promotes better use of HTML.

Not recommended

<Title> Test </title>
<Article> This is only a test.

Recommendation

<! DOCTYPE html>
<Meta charset = "UTF-8">
<Title> Test </title>
<Article> This is only a test. </article>

Omit optional labels

The HTML5 specification specifies that HTML tags can be omitted. But in terms of readability, it is better not to do this in the development source file, because omitting tags may cause some problems.

Omitting some optional labels does reduce the page size, which is useful, especially for some large websites. To achieve this goal, we can compress the page at the end of development. In this step, these optional labels can be completely omitted.

Script Loading

For performance considerations, asynchronous Script Loading is critical. A script is placed inFor example<script src="main.js"></script>The DOM parsing will be blocked until it is fully loaded and executed. This causes the page display delay. In particular, some heavyweight scripts have a huge impact on user experience.

 Loading scripts asynchronously can alleviate this performance impact. If you only need to be compatible with IE10 +, you can add the async attribute of HTML5 to the script to prevent blocking DOM parsing. You can even write the script reference in.
 To be compatible with old browsers, we can use a script loader to dynamically inject scripts. You can consider yepnope or labjs. A problem with the injection script is that it takes a while to wait until the CSS object documents are ready to load (after loading CSS for a short time ), this causes a certain delay to the JS that needs to be triggered in time, which affects the user experience more or less.
 In conclusion, the following best practices should be followed when compatible with older browsers (IE9.
 The Script Reference is written before the end tag of the body and includes the async attribute. Although the script is not asynchronously loaded in old browsers, it only blocks DOM parsing before the body ends the tag, which greatly reduces the blocking effect. In modern browsers, the script is loaded only when the script tag at the end of the body is found in the DOM parser. loading is asynchronous loading, CSSOM is not blocked (but its execution still occurs after CSSOM ).
 Among all browsers, we recommend  
   
   <Html> 
   <Head> 
   <Link rel = "stylesheet" href = "main.css"> 
   </Head> 
   <Body> 
   <! -- Body goes here --> 
    
   <Script src = "main. js" async> </script> 
   </Body> 
   </Html> 
  
 Recommended only in modern browsers  
   
   <Html> 
   <Head> 
   <Link rel = "stylesheet" href = "main.css"> 
   <Script src = "main. js" async> </script> 
   </Head> 
   <Body> 
   <! -- Body goes here --> 
   </Body> 
   </Html> 
  
Semantic It is used based on the initial meaning of an element (sometimes incorrectly called a "tag") when it is created. For example, the heading element is used to define the header title, the p element is used to define the text section, and the element is used to define the link anchor.
 Using HTML elements based on a specific purpose is of great significance for accessibility, code reuse, and code efficiency.
Multimedia backtracking For media on the page, such as images, videos, and canvas animations, make sure that they have an alternative access interface. We can use meaningful alternative texts (alt) for image files. We can add instructions or subtitles to video and audio files.
 Providing alternative content is important to availability. Imagine how a blind user could know what an image is without @ alt.
 (The alt attribute of the image is not filled in, so the pure decorative image can be used as follows:alt="").  
   
    
  
Separation of concerns It is important to understand how to differentiate different points of attention in the web. The focus here is mainly on information (HTML structure), appearance (CSS), and behavior (JavaScript ). To make them maintained clean and tidy code, we should try to separate them as much as possible.
 Strictly ensure the separation of structure, performance, and behavior, and try to avoid too many interactions and connections between the three.
 That is to say, try to include only structured HTML in the document and template, move all the presentation code into the style sheet, and move all the action behaviors into the script.
 In addition, style and script files should be introduced as little as possible in documents and templates to minimize the connections between them.
 Clear layering means: 
   
   No more than one or two Style Sheets (I. e. main.css, vendor.css) are used) 
   Do not use more than one or two scripts (learn to use merged scripts) 
   Do not use the inline style (<style>.no-good {}</style>) 
   Do not use the style attribute on the element (
    <link rel="stylesheet" href="main.css" type="text/css">
 <script src="main.js" type="text/javascript"></script>
 Recommendation
   
      
      <Link rel = "stylesheet" href = "main.css"> 
      <Script src = "main. js"> </script> 
     
AvailabilityIf HTML5 semantic tags are used properly, many availability problems have been solved. The ARIA rule adds the default availability role attribute to some semantic elements. if used properly, most of the website availability has been established. If you usenav,aside,main,footer.
For more details, refer to ARIA specification.
Other role attributes can be used to present more availability scenarios (I. e.role="tab").
Use of Tab Index in availabilityCheck the tab switching order in the document and pass the value to the tabindex on the element. This allows you to rearrange the tab switching order based on the importance of the element. You can settabindex="-1"Disable its tab switching on any element.
When you add a function to a default element that cannot be focused, you should always addtabindexAttribute changes it to a focused state, and this also activates the pseudo class of its CSS:focus. Select an appropriatetabindexValue, or directly usetabindex="0"Organize the elements into the same tab order level and forcibly intervene in the natural reading order.
ID and anchorGenerally, it is better to add the ID to all header elements on the page. in this way, the corresponding ID name is included in the hash of the page URL to form a description, so that you can easily jump to the location of the corresponding element.
For example, when you enter a URL in your browserhttp://your-site.com/about#best-practices, The browser will go to the following H3.  
      
      <H3 id = "best-practices"> Best practices  
     
Formatting rulesAdd a blank row to each block element, list element, and table element, and indent the child element. Inline elements are written in one row. The block elements include a list and a table.
(It is acceptable to merge all elements into a row because of the unanticipated problem caused by the space in the line feed. The format warning is always better than the error warning ).  
      
      <Blockquote> 
      <P> <em> Space </em>, the final frontier. </p> 
      </Blockquote> 
       
      <Ul> 
      <Li> Moe </li> 
      <Li> Larry </li> 
      <Li> Curly </li> 
      </Ul> 
       
      <Table> 
      <Thead> 
      <Tr> 
      <Th scope = "col"> Income </th> 
      <Th scope = "col"> Taxes </th> 
      </Tr> 
      </Thead> 
      <Tbody> 
      <Tr> 
      <Td> $5.00 </td> 
      <Td> $4.50 </td> 
      </Tr> 
      </Tbody> 
      </Table> 
     
HTML quotation marksUse double quotation marks ("") instead of single quotation marks (").
Not recommended  
      
      <Div class = 'news-article'> </div> 
     
Recommendation  
      
      <Div class = "news-article"> </div> 
     
[1]: The blank element here refers to the following elements:area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr

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