15 Best Practices for HTML Beginners

The following are thirty best practices for HTML beginners, shared with everyone for your reference, the specific content is as follows

1. Keep tags closed

In the past, I often saw similar The following code (Annotation: How long ago was this...):

Some text here.     

Some new text here.     

You get the idea.

Note that the UL/OL label of the outer package is omitted (who knows whether it is intentional or unintentional), and also forgets to close the LI label . By today's standards this is clearly bad practice and should 100% be avoided. Anyway, keep the tag closed. Otherwise, you may encounter problems when validating html tags.

Better way

        
• Some text here. 
        
• Some new text here. 
        
• You get the idea. 
     

2. Declare the correct document type

The author has joined many CSS forums earlier, and whenever users encounter problems, we will advise them Do two things first:

1. Verify the CSS file to ensure there are no errors.

2. Confirm that the correct doctype is added

DOCTYPE appears before the HTML tag. It tells the browser whether the page contains HTML, XHTML, or a mixture of the two, so that the browser can correctly parse.

There are usually four document types to choose from:

nbsp;HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>  
  
  
nbsp;HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>  
  
  
nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  
  
nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

There have been different opinions on what document type declaration to use. It is generally considered that using the strictest declaration is the best choice, but research shows that most browsers will use the ordinary way to parse this declaration, so many people choose to use the HTML4.01 standard. The bottom line when choosing a statement is whether it is really suitable for you, so you have to consider it comprehensively to choose a statement that is suitable for your project.

3. Never use inline styles

When you are immersed in writing code, you may often add a little inline css code casually or lazily, like this

<p>I'm going to make this text red so that it really stands out and makes people take notice! </p>

This seems convenient and no problem. However, this is a mistake in your coding practice.

When you write code, it is best not to add style code until the content structure is complete.

This coding method is like guerrilla warfare, a very copycat approach. ——Chris Coyier

A better approach is to define the P style in an external style sheet file after completing the tag part.

Recommendation

#someElement > p {     
  color: red;     
}

4. Put all external css files into the head tag

Theoretically, you can introduce CSS style sheets anywhere, but the HTML specification recommends Introduced in the head tag of the web page, this can speed up the rendering of the page.

During the development process of Yahoo, we found that introducing a style sheet in the head tag will speed up the loading of web pages, because this allows the page to be rendered gradually. —— ySlow Team

     
<title>My Favorites Kinds of Corn</title>     
<link>     
<link>     

5. Put the javascript file at the bottom

One principle to remember is to make the page appear in front of the user as quickly as possible. When a script is loaded, the page will pause loading until the script is fully loaded and executed. Therefore, more time of the user will be wasted.

If your JS file only needs to implement certain functions (such as button click events), then feel free to introduce it at the bottom of the body. This is definitely the best way.

Recommendation

<p>And now you know my favorite kinds of corn. </p>     
<script></script>     
<script></script>