15 Best Practices for HTML Beginners

Here are 30 best practices for HTML beginners.

1. Keep the tags closed

In the past, I often saw code like the following:

Note that the outer wrapping UL/OL tag was omitted (whether intentional or not, who knows), and the closing LI tag was forgotten. By today's standards, this is clearly bad practice and should be 100% avoided. In short, keep tags closed. Otherwise, you may have problems validating html tags.

A better way

2. Declare the correct document type

I have participated in many CSS forums in the past. Whenever a user encounters a problem, we will recommend that he 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, and it tells the browser whether the page contains HTML, XHTML, or a mixture of both, so that the browser can parse it correctly.

There are four common document types to choose from:

There are different opinions on what document type declaration to use. It is generally believed that using the strictest declaration is the best option, but research shows that most browsers parse this declaration in a normal way, so many people choose to use the HTML 4.01 standard. The bottom line of choosing a statement is whether it is really suitable for you, so you have to consider comprehensively to choose the statement that suits your project.

3. Never use inline styles

When you are busy writing code, you may often add some inline CSS code conveniently or lazily, like this:

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

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

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

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

suggestion

4. Put all external css files into the head tag

Theoretically, you can import CSS style sheets anywhere, but the HTML specification recommends importing them in the head tag of a web page to speed up page rendering.

During the development process at Yahoo, we found that introducing style sheets in the head tag would speed up the loading of web pages because it would allow the page to be rendered gradually. ——ySlow Team

5. JavaScript files are placed at the bottom

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

If your JS file is only 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 method.

suggestion

6. Never use inline javascript. It’s not 1996 anymore!

Many years ago, there was a way to add JS code directly to HTML tags. This is especially common in simple photo albums. Essentially, an "onclick" event is attached to the tag, which has the same effect as some JS code. There is no need to discuss too much. This approach should not be used. The code should be transferred to an external JS file, and then use "addEventListener/attachEvent" to add event listeners. Or using a framework like jQuery, just use the "click" method.

7. Develop and verify at the same time

If you are just starting out with web design, I strongly recommend that you download the Web Developer Toolbar (Chrome users please search for it in the app store, IE users may not be so lucky) and use the "HTML Standards Validation" and "CSS Standards Validation" at any time during the coding process. If you think CSS is a very easy language to learn, then it will kill you. Your careless code will make your page full of loopholes and problems. A good way is to verify, verify, and verify again.

8. Download Firebug

Firebug is undoubtedly the best plug-in for web development. It can not only debug JavaScript, but also let you intuitively understand the properties and positions of page tags. Without further ado, download!

9. Use Firebug

According to the author's observation, most users only use 20% of Firebug's functions, which is such a waste. You might as well spend a few hours to systematically learn this tool. I believe it will help you get twice the result with half the effort.

10. Keep tag names lowercase

In theory, HTML is not case-sensitive, you can write whatever you want, for example:

But it is best not to write like this, the effort of typing larger letters does not serve any purpose and makes the code ugly.

suggestion

11. Use H1-H6 Tags

It is recommended that you use all six of these tags on your web pages. Although most people will only use the first four, using the most H will have many benefits, such as device-friendliness, search engine-friendliness, etc. You might as well replace all your P tags with H6.

12. Use an Unordered List (UL) to Wrap Your Navigation Menu

Usually a website will have a navigation menu, which you can define like this:

If you want to write beautiful code, it's best not to use this approach.

Why use UL to layout navigation menu? ——Because UL is born for definition lists

It is better to define it like this:

15. Learn how to deal with IE

IE has always been a nightmare for front-end developers!

If your CSS style sheet is basically finalized, you can create a separate style sheet for IE, and then it will only take effect on IE:

What these codes mean is: if the user's browser is IE6 or below, then this code will take effect. If you want to include IE7 as well, change “[if lt IE 7]” to “[if lte IE 7]”.

The above is the full content of this article. I hope it will be helpful for everyone’s study.