6. Delete unnecessary tags

First, let’s take a look at a screenshot of an example:

The above picture is obviously the production of a navigation menu. In the example above: there is a "p#topNav" wrapping the list "ul#bigBarNavigation", and the "p" and "ul" lists are both block elements, plus "p" used here to wrap "ul" has no effect at all. Although the appearance of "p" has brought us great benefits in making web pages, we don't need to use it everywhere. I wonder if you usually pay attention to such details? I made such a mistake. If you have also had such an experience, then starting from today, from now on, we will work together to correct such mistakes.

For information on how to use labels correctly, if you are interested, you can click: pitis: what it is, and how to cure it.

Seven. Use better naming

The naming mentioned here is to define class names or ID names for relevant elements in your page. Many students have this habit. For example, if an element has a red font, add "red" to it, or even layout They all write "left-sidebar", etc., but have you ever thought about what if this element is defined with "red" and the customer asks for "blue" in a few days? In other words, the "left-sidebar" sidebar at that time no longer wanted to be placed on the left, but on the right. In this way, our previous naming can be said to have no meaning at all, as shown in the picture below Shown:

Then it is very important to define a good name. Not only can I understand your code, but others can also easily understand your code. For example, a good class name and ID name "mainNav", "subNav", " footer" etc., he can describe what is involved. The bad ones are as mentioned above.

If you want to know more about this, you can click:

1. Standardizing CSS class and id names

2. 
   

3. CSS Tip #2: Structural Naming Convention in CSS

4. 
   

5. CSS coding: semantic approach in naming convention

6. 
   

7. CSS Naming Conventions and Coding Style

Eight, leave the version of CSS

When we design menus, we sometimes require the text of all menu options to be in uppercase. Do you usually set them to uppercase directly in the HTML tag? If so, I think it's not good. For better scalability in the future, we shouldn't set them to all uppercase in HTML. A better solution is to achieve it through CSS:

　9. Define the class name or ID name of

I don’t know if you have encountered such a problem when making web pages. The entire website uses the same layout and structure. In other words, you use the same structure and the same class name in the layout of the page. But suddenly your supervisor says that in response to customer demand, the layout of a page needs to be swapped between the sidebar and the main content. At this time, you don’t want to modify the structure of the entire page just to change the layout. A good solution is to define a special class name or ID name in the "" of your page. , so that you can easily achieve what you want. I don’t know if you have used this method before:

Defining a unique class and ID name for "" is very powerful, not only to help you change the layout like above, but the most important thing is that sometimes it can help you implement a certain part of the page to achieve special effects. It does not affect the performance of other pages. I don’t need to explain why there is such a function. I think everyone knows it. Because the content of each page is the descendant element of "".

If you want to know more about this, you can click:

1. ID Your Body For Greater CSS Control and Specificity

2. 
   

3. Case study: Re-using styles with a body class

　10. Verify your code

People will inevitably make mistakes, and it's the same when we write code. Sometimes you will always write in lowercase or more words. For example, you forget to close your element tags, and you don't remember to write the necessary attributes of the elements. Although there are some mistakes that will not be given. No matter what disastrous consequences you bring, it will also bring you mistakes that you cannot predict. Therefore, it is recommended that you verify your code after you finish writing it. Verified code is always better than unverified code:

In order to effectively verify your code, we can use relevant tools or browser plug-ins to help us complete it. If there are no errors in your code, the W3C verification tool will display green text in front of you, which makes you extremely excited, because it once again proves that the code you wrote can withstand W3C standards.

If you want to know more about this, you can click:

1. The W3C Markup Validation Service

2. 
   

3. XHTML-CSS Validator

4. 
   

5. Free Site Validator (checks entire site, not just one page)

　11. Logical sequence

This is a rare error situation, because I think everyone will not disrupt the logical order when writing pages. In other words, if possible, it is best to have a logical order for your website, such as first Write the header, then the body, and finally the footer. Of course, sometimes we encounter special circumstances. The footer part is above the sidebar of our code. This may be because it best suits your website design needs. This may be understandable, but if you have other ways to implement it, we You should put the footer at the end of a page, and then use specific techniques to make it meet your design needs:

Above we discussed several ways to get you started writing clean HTML code. From the beginning of a project, this is very easy, but if you need to fix an existing code, it will be more or less difficult. What I said above is mainly to tell you how to learn to write a good, clean HTML code and stick to it. I hope that after reading this article, you can start from scratch and insist on writing a clean HTML code in your next project.

Related documents: 10 most common HTML tag mistakes

English source: 12 Principles For Keeping Your Code Clean

The above is the detailed content of 11 rules to keep your code tidy. For more information, please follow other related articles on the PHP Chinese website!