Home > Developer > Web Develop
Write Web pages as we build houses, the foundations are firm and the House does not fall. Similarly, we make the Web page also, a good HTML structure is to make a beautiful site of the beginning, the same, good CSS only exists in the same good HTML, so a clean, semantic html is a lot of advantages, so in peacetime production, we do this? Let's look at a picture:
Showing two pieces of code, I think everyone will just like the first one, we do not say its semantics, at least his structure let us look refreshing, and the second kind? A look at the code is bad code, annoying code. So how do you write a good code, neat code? Below we will learn from the following 11 aspects together, as long as everyone in the future when writing code can adhere to the following 12 principles, categorization malleability Your code quality can go up, and you write code will people see people love.
I. Statement of the DOCTYPE
If we want to do a good job, first of all we have to know what rights we have to do, like the "DOCTYPE" statement, We do not need to discuss whether the use of HTML4.01 or XHTML1.0 or the present HTML5 are available in a strict version or a transition version, which can be well supported by our code:
Since we do not need a table layout to make a good layout now, we can consider using the strict "DOCTYPE" without using the transition type, and for backwards compatibility, I recommend using HTML5 's declarative mode:
<!DOCTYPE HTML><html lang="en-US">
If you want to know more about this, you can click:
No more transitional doctypes, please
Second, character sets and encoded characters
In the beginning of each page, we set the character set in, we use "UTF-8" here
And when we usually write the page, often encounter "&" Such symbols, then we should not directly on the page to write "&":
We should use character encoding in our code, for example, "&" We should use "&" in our code instead.
If you want to know more about this, you can click:
The Extended ASCII table
Third, the correct code indentation
In page editing, the indentation of the code is not correct, he will not affect any features of your site, but if you do not have a standard indentation principle, so that people who read your code is very angry, so that the correct code indentation can enhance your code readability. The indentation of the standard program should be a tab (or a few spaces), the image of a little bit we look at the beginning of the article, or together to see the picture shown below, you can see after you know how to write your own code to let people see the cool:
Needless to say, everyone likes the code below. This is only a person's habit problem, but the proposal from the beginning to do well, the benefit of the people. There is an introduction to this, you can also refer to: Clean up your Web pages with HTML TIDY
Four, the chain of your CSS style and JavaScript script
There are a number of ways to write CSS styles on a page, and some directly put styles in the "" section of the page, which is a bad habit, because it will not only mess up our markup, but these styles are only suitable for this HTML page. So we need to put the CSS separately, save in the external, so that the subsequent page can also link to these styles, if you need to modify the page, we only need to modify the style file. As shown in:
What we're talking about is just a style, but JavaScript scripts are the same as CSS styles. I finally want to say, "in the production of Web pages, try to put your CSS style and JavaScript script in a single file, and then link to refer to these files, the greatest benefit is to facilitate your style and script management and modification." ”
Five, the correct label nesting
When we write HTML, we always need the level nesting of tags to help us complete the HTML writing, but these HTML nesting is a certain rule, if you want to elaborate, we may have to use a few chapters to describe, then I would like to say here today, we write HTML should not make the following such a super error:
Structure We are common, such as the title of the home page, then we should pay attention to, can not put "
In the label, in other words, you cannot put the block element in the inline element. Above is just an example, just hope that everyone in the normal production should not make such a super error. (Web front-end Learning Exchange Group: 328058344 prohibit small talk, non-happy do not enter!) ）Vi. Remove unnecessary labels
First, let's look at an example:
Obviously is a navigation menu production, in the instance: there is a "div#topnav" in the list "Ul#bigbarnavigation", and "div" and "ul" List are block elements, plus "div" here to package "UL" does not play any role at all. Although the "div" appeared to us to create a Web page to bring great benefits, but we do not need to everywhere such a disorderly use, do not know whether people usually pay attention to such details? I made such a mistake, and if you have had such a experience, then from today onwards, from now on, we are working together to correct such a mistake.
There are interesting words about how to use tags correctly, and you can click: Divitis:what it is, and what to cure it.
Vii. use of better naming
The name here is to give you the relevant elements of the page definition class name or ID name, many students have this kind of habit, for example, there is an element font is red, add "red" to him, even the layout is written "Left-sidebar", etc., but have you ever thought, if this element defines the " Red "After a few days customers asked to use the" blue "it? Or, then, the "Left-sidebar" sidebar at this time does not want to put on the left, but want to put on the right side, so that our previous name can be said to be a bit meaningless, as shown in the following diagram:
Then define a good name is very much, not only can you understand your code, and others can easily read your code, such as a good class name and ID name "Mainnav", "Subnav", "footer" and so on, he can describe the things involved. It's not good, like what I said earlier.
If you want to know more about this, you can click:
CSS naming conventions and Coding Style
Viii. leaving the version of CSS
When we design menus, we sometimes require all the text in the menu options to be capitalized, and do people usually set them to uppercase directly in the HTML tag? If so, I feel bad, if in order to have a better extensibility in the future, we should not be in the HTML to set them to all uppercase, a better way to do this is through CSS:
Ix. defined class name or ID name
We usually make a Web page do not know if you have encountered such a problem, is the whole station down, using the same layout and structure, in other words, you use the same structure on the layout of the page, the same class name, but suddenly your supervisor said that the needs of customers, There is a page layout that requires sidebar and main content to swap. At this point you do not want to change the layout and modify the structure of the entire page, there is a good solution, that is, in your page "" To define a special class name or ID name, so that you can easily achieve the requirements you want. Such use, do not know everyone used did not:
Defining a unique class and ID name for "" is very powerful, not just to help you change the layout as above, but the main thing is that sometimes he can help you achieve a special effect on one part of the page without affecting the effect of other pages. Why is there such a function, don't I say I think everybody knows. 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. Case study:re-using styles with a body class
Ten, verify your code
People can make mistakes, we write code is the same, you sometimes always lowercase or write more, for example, forget to close your element tag, do not remember to write the attributes required by the element, although some errors will not give you any disastrous consequences, but also will bring you can not estimate the error. So it is advisable to verify your code when you have finished writing the code. The code after validation is always stronger than the code that is not validated:
For an effective verification of your code, we can use the relevant tools or browser plug-ins to help us complete. If your code does not have any errors, the tool will appear in front of you green text, so that you are extremely exciting, because the code you write again to stand up to the standard.
If you want to know more about this, you can click:
Free site Validator (checks entire Site, not just one page)
Xi. logical Order
This is a very rare error situation, because I think you can write the page does not disturb the logical order, in other words, if possible, let your site has a logical order is the best, such as first write the page header, write the page body, and finally write the footer. Of course sometimes encounter special circumstances, how the footer part of our code in the sidebar above, this may be because it is best for your site design needs, this might be understandable, but if you have another way to achieve, we should put the footer is placed in the end of a page, Then make it up to your design needs with a specific technology:
Above we discussed several ways to get you started writing a neat HTML code. From the beginning of a project, it's all very easy, but if you need to fix an existing code, it's going to be a little tricky. The main thing to say is to tell you how to learn to write a good, neat HTML code, and keep writing it. Hopefully, after reading this article, in your next project, you can start from scratch and stick to a neat HTML code. I hope you enjoy this tutorial. If you have any good experience, hope to share with us.
Web front-end: 11 principles to keep your code clean
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
