Writing a Web page is like building a house. The house won't fall if the foundation is solid. Similarly, we make the same web page. A good HTML structure is the beginning of creating a beautiful website. Similarly, good CSS only exists in the same good HTML, so a clean and semantic HTML has many advantages. Do we do this in normal production? Let's take a look at an image:
I think everyone will only like the first one. Let's not talk about its semantics, at least its structure makes us look fresh, but what about the second one? At first glance, it is a bad code and annoying code. So how can we write a good code and clean code? Next we will learn from the following 12 aspects, as long as you can stick to the following 12 principles when writing code in the future, ensure that your code quality can be improved, in addition, the code you write will be easy to understand.
1. doctype Declaration
If we want to do one thing well, we must first know what rights we have to do, just as the doctype statement, we do not need to discuss whether to use html4.01 or xhtml1.0 or the current HTML5 provides a strict version or a transitional version, which can well support the code we write:
Because our current layout does not require a table layout, we can consider using a strict "doctype" instead of a transition type. To achieve backward compatibility, I suggest using the HTML5 declaration mode:
| 12 | <! Doctype HTML> <HTML lang = "En-us"> |
To learn more about this, click:
1. W3C: Recommended dtds to use in your web document
2. Fix your site with the right doctype!
3. No more transitional doctypes, please
Ii. Character Set and encoding characters
At the beginning of each page, we set the character set in
| 1 | <Meta charset = "UTF-8"/> |
In addition, we often encounter symbols like "&" when writing pages, so we should not directly write "&" on the pages like this:
We should use character encoding in the Code. For example, we should use "&" in the code to replace it.
To learn more about this, click:
1. Wikipedia: UTF-8
2. a tutorial on character code issues
3. The extended ASCII table
3. correct code indentation
In page editing, whether the code indentation is correct does not affect any functions of your website. However, if you do not have a standard indentation principle, it will make people who read your code very angry, so correct code indentation can enhance the readability of your code. The indentation of the standard program should be a tab (or a few spaces). Let's take a look at the figure at the beginning of the article, or let's take a look at the figure shown below, you can see how your code will be written in the future:
Needless to say, you all like the following code. This is just a habit of a person, but it is recommended to do well from the beginning. For more information, see clean up your web pages with HTML tidy.
4. External links your CSS styles and JavaScript scripts
There are many ways to write CSS styles on a page. Some of them directly put the styles into the page's "
The above is just a style. In fact, JavaScript scripts are the same as CSS styles. In the end, what I want to express is"When creating a web page, try to put your CSS style and Javascript script in a separate file, and then reference these files through links. The biggest benefit of doing so is that, you can easily manage and modify styles and scripts."
5. Correct tag nesting
When writing HTML, we always need tag-level nesting to help us write HTML. However, these HTML nesting rules must be detailed, we may use several chapters to describe it. What I want to talk about today is that we should not make the following super errors when writing HTML:
The structure of is common. For example, the title of the homepage, we should pay attention to it. We cannot put "
6. Delete unnecessary tags
First, let's take a look at an instance:
Obviously, a navigation menu is created. In the example, a "Div # topnav" contains the list "Ul # bigbarnavigation ", the "Div" and "Ul" lists are both block elements, and adding "Div" here is used to pack "Ul" does not play any role at all. Although the appearance of "Div" has brought us great benefits for creating web pages, we do not have to use them in such a mess. Do you know if you pay attention to such details? I have made such a mistake. If you have had such an experience, we will try our best to correct it from today and now.
For details about how to use tags correctly, click divitis: what it is, and how to cure it.
7. Better naming
The name mentioned here is to define the class name or ID name for the relevant elements on your page. Many people have this habit. For example, there is an element whose font is red, add "red" to him, and even write "left-Sidebar" to the layout, but have you ever thought about it? If this element defines "red, in a few days, what should the customer require to use "blue? Or, the "left-Sidebar" sidebar at that time does not want to be placed on the left, but on the right. In this way, the name above can be said to have no meaning at all, as shown in the following figure:
So it is necessary to define a good name. Not only can you understand your code, but others can also easily understand your code, for example, a good class name and ID "mainnav", "subnav", and "footer" can describe the content. Not good, as mentioned above.
To learn more about this, click:
1. Standardizing CSS class and ID names
2. CSS Tip #2: Structural naming convention in CSS
3. CSS coding: semantic approach in naming convention
4. CSS naming conventions and coding style
8. Exit the CSS version
When designing menus, we sometimes require that all texts of all menu options be capitalized. Do you usually set them to uppercase directly in HTML tags? If so, I think it is not good. For the sake of better scalability in the future, we should not set them to all uppercase in HTML. A better solution is to implement it through CSS:
9. Define the class name or ID name of the <body>
When you create a web page, you do not know if you have encountered such a problem: the whole site uses the same layout and structure. In other words, you have used the same structure in the layout of the page, the same class name, but suddenly your superior supervisor said that according to the customer's needs, there is a page layout that needs to be swapped between the sidebar and the main content. At this time, you do not want to modify the structure of the entire page to change the layout. At this time, there is a good solution, define a special class name or ID name in <body> on your page, so that you can easily meet your needs. I don't know if you have used this method:
Defining a unique class and ID name for "<body>" is very powerful, not just to help you change the layout as above, the most important thing is that sometimes he can help you implement a certain part of the page to achieve special effects without affecting the effects of other pages. Why is there such a function? I don't need to say that I think everyone knows it. Because the content of each page is a descendant element of "<body>.
To learn more about this, click:
1. ID your body for greater CSS control and specificity
2. Case study: re-using styles with a body class
10. Verify your code
Errors are inevitable. The same is true when we write code. Sometimes you write in lower case or more. For example, if you forget to close your element tag and do not remember to write the attributes required by the element, although there are some errors that will not bring you any disastrous consequences, they will also bring you unexpected errors. So it is recommended that you verify your code when writing the code. The verified code is always better than the unverified code:
To effectively verify your code, we can use related tools or browser plug-ins to help us complete the process. If your code has no errors, the W3C verification tool will display green text in front of you, which makes you very exciting, it proves that the code you write can withstand W3C standards.
To learn more about this, click:
1. The W3C markup validation service
2. XHTML-CSS validator
3. Free site validator (checks entire site, not just one page)
XI. Logical Order
This is a rare error, because I don't think everyone will disrupt the logic order when writing pages. In other words, if possible, it is best to make your website have a sequential logic order, for example, first write the page header, write the page body, and then write the footer. Of course, sometimes we may encounter special situations. The footer part is above the sidebar of our code. This may be because it is best suited to your website design needs. This may be understandable, however, if you have other methods, we should put the footer at the end of a page, and then let it meet your design requirements through specific technologies:
We have discussed how to write a clean HTML code. From the very beginning of a project, this is all very easy, but if you need to fix an existing code, it will be somewhat difficult. As mentioned above, it mainly tells you how to learn and write a good and neat HTML code, and keeps writing it like this. I hope that after reading this article, you can write a neat HTML code from the beginning in your next project. I hope you will like this tutorial.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
