Front-end code standard best practices: HTML

In front-end Web code, HTML is fundamental, and CSS and JavaScript are also built around the existing HTML structure. Therefore, a good HTML code structure not only improves the readability of HTML code, in addition to maintainability and execution performance, the corresponding CSS and JavaScript code can also be better constructed. We will discuss some of the best practices of Web Front-end HTML today after discussing the best practices of JavaScript front-end code standards: JavaScript) and CSS front-end code standards: CSS.

1) Basic HTML code specifications 1. HTML naming and format

The confusion of any code begins with the confusion of naming and format, so there must be a unified and standardized naming and format. The following are some basic specifications.

All tag names and attributes of HTML code should be in lower case. Although HTML code is case insensitive, W3c standards recommend that it be in lower case. attribute values should be enclosed in double quotation marks.

Define the element id and class for all key elements to facilitate interaction with CSS and JavaScript. the keywords in the id name are connected by underscore _), and the keywords of the class are connected by hyphen, define a proper name based on the actual meaning and the hierarchical relationship of the Dom tree.

The hierarchical indentation of HTML code contains four spaces. The definition of an element with null values should occupy one row separately. The start tag and closed tag of the element containing child elements occupy one row separately.

Example:

 
 

  
  
<div id="info_container" class="info-container"> 
  
  
    <div class="container-top"></div> 
  
  
    <article> 
  
  
         ... 
  
  
    </article> 
  
  
    <div class="container-bottom"></div> 
  
  
</div> 
 
 

2. CSS code and HTML code separation

Style can be directly written in the style attribute of the label, or in the style label in the head area of the page. Both methods are not good, especially the first one. Styles should be separately written into css style files to facilitate code reuse and maintenance.

3. Write standard HTML code

All HTML tags should be properly closed. All element definitions must have start and end tags. Even if the element value is empty, the following tags can be closed: <br/>

Stop tags not supported by the specification. the following label specifications are no longer recommended, although the browser can correctly resolve them: <center> <font> <s> <strike> <u> <menu>.

Stop using attributes not supported by specifications. The following attributes are not recommended: background attribute of body, align attribute of some tags, nowrap attribute on td and th, the width and height attributes of some labels. In fact, the labels and attributes not recommended by these specifications are some labels and attributes that affect the appearance. They can be set through CSS styles.

Code standards should be regularly verified and the w3c verification tool Unicorn can be used.

2) highly readable HTML code

1. Use appropriate labels in appropriate places

HTML code is not purely intended for display by browsers, but also requires good readability to facilitate code inspection and maintenance. More importantly, various search engines can better identify page content, therefore, you need to write HTML code with semantics, that is, HTML Tag semantics that is often mentioned.

Div and span are two typical labels without any semantics. Therefore, before using these two labels, check whether there are more semantic tags that can be replaced.

<H1> ~ <H6>

H1 to h6 are titles, h1 is the highest level of titles, and these title tags should be used in the areas where titles are displayed on the webpage.

<Em> and <strong>

The semantics of these two labels is emphasized and emphasized, instead of the labels <I> and <B> without any semantics.

<Table>

Table labels are often used for layout at the earliest. So far, a large number of pages are laid out by tables. table layout has been unanimously put aside by front-end engineers, so many new users do not dare to use this label, here we should emphasize that table semantics is a table. If you need to list some statistical data, the table label is the first choice.

<Ul>, <ol>, <li>

<Ul> is an unordered list, and <ol> is an ordered list. Therefore, ul is the most suitable for navigation menus on a webpage, and some ordered lists, such as chapter lists, the ol label should be used.

Bad example:

 
 

  
  
<Div class = "title"> Article title </div>
  
  
 
  
  
<P>
  
  
Body content, <B> content to be emphasized </B>
  
  
</P>
  
  
 
  
  
<Div class = "main-menu">
  
  
<Span> Navigation 1 </span>
  
  
<Span> navigation 2 </span>
  
  
<Span> navigation 3 </span>
  
  
</Div>
 
 

Standard example:

 
 

  
  
<H1> Article Title  
  
 
  
  
<P>
  
  
Body content, <strong> content to be emphasized </strong>
  
  
</P>
  
  
 
  
  
<Ul class = "main-menu">
  
  
<Li> Navigation 1 </li>
  
  
<Li> navigation 2 </li>
  
  
<Li> navigation 3 </li>
  
  
</Ul>
 
 

 

2. Add necessary meta to the page

Meta Information describes the page information, which is placed in the head of the page for more friendly identification by search engines. Some common definitions are as follows:

 
 

  
  
<meta name="author" content="John Doe"> 
  
  
<meta name="copyright" content="&copy; 1997 Acme Corp."> 
  
  
<meta name="keywords" content="corporate,guidelines,cataloging"> 
  
  
<meta name="date" content="1994-11-06T08:49:37+00:00"> 
 
 

3. Do not omit attributes of some labels.

the alt attribute of a tag is used to replace text when the image cannot be normally displayed. <a> the title attribute of a tag can be used as a description, the prompt message is displayed when the mouse hover is clicked.

3) high-performance HMTL code

1. the CSS file is in front, the JavaScript file is in front, and the JavaScript code is placed at the bottom of the page.

The download and resolution of JavaScript files will block page loading. Therefore, in the head section, CSS references are written in front, while JavaScript file references are written in the back;

In addition, the script tag has two attributes: async and defer. If defer is set to true, the JavaScript file is delayed and does not affect page HTML Rendering. async is a newly introduced attribute in HTML5, this attribute is set to true, which means file loading and execution are asynchronous. The difference between the two properties is that async will be executed after the download is complete, while defer will still be executed in the order of the page, so the download and execution may not necessarily be continuous. You can set these two attributes based on the actual project conditions to speed up page loading.

2. Simplified HTML code

The simpler the HTML code, the shorter the page transmission time, the faster the page rendering time, and the better the corresponding user experience, therefore, it is necessary to streamline the HTML code for page loading.

Page streamlining mainly starts from the following:

Delete extra tags

Most of the extra labels are added to facilitate layout, for example, the following code:

 
 

  
  
<div> 
  
  
    <ul> 
  
  
        <li>item1</li> 
  
  
        <li>item2</li> 
  
  
        <li>item3</li> 
  
  
    </ul> 
  
  
</div> 
 
 

In most cases, the div tag in the Code is unnecessary. The ul tag in the code can play its role completely. You can delete the tag directly and adjust the ul style as appropriate.

Dynamic Loading and rendering of non-critical areas

Some areas on the page are not the areas that users focus on, such as page advertisements and statistical information. Such content can be dynamically loaded and displayed by javascript code after loading key areas on the page.

3. Use iframe with caution

Iframe has two disadvantages: 1. iframe blocks the Onload event on the home page; 2. iframe shares the connection pool with the home page, while the browser has restrictions on connections in the same domain, therefore, the parallel page loading is affected. Before using iframe, consider these two shortcomings.
If you need to use iframe, it is best to dynamically Add the src attribute value to iframe through javascript, so that you can bypass the above two problems.

Summary

The above are some common things that need to be paid attention to during HTML development. In fact, there are still many details about HTML, which need to be summarized continuously in practice. The purpose of this article is to let everyone focus on code readability, maintainability, and code performance, and consciously consider these issues during the development process, developing good coding habits is more important than getting familiar with a development technology.