11 principles that make your HTML code neat

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 12 aspects together, as long as everyone in the future when writing code to adhere to the following 12 principles, categorization malleability The quality of your code can go up, and the code you write will be loved by people.

First, DOCTYPE's statement

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>

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

w3c:recommended DTDs to use in your Web document

Fix Your Site with the right doctype!

No more transitional doctypes, please

1. Second, character sets and encoded characters

In the beginning of each page, we set the character set in

<meta charset= "UTF-8"/>

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 of him.

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

Wikipedia:utf-8

A tutorial on character code issues

The Extended ASCII table

4. 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, outside the chain CSS styles and JavaScript scripts

the page is written CSS styles are available in a number of ways, and some directly put the styles into the "

so we need to put CSS is presented separately, stored externally, so that the following pages can also be linked 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

We are writing HTML 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 should 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 "

Vi. Remove unnecessary labels

First, let's look at an example:

obviously is a navigation menu of the production, in the instance: there is a "Div#topnav" Wrapped in the list "Ul#bigbarnavigation", and "div" and "ul" List are block elements, plus "div" is used here to package "UL" There is no effect 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 some interesting words about how to use the label correctly, you can click: Divitis:what it is, and what to cure it.

Vii. use of better naming

The name here is the definition of the class name for the relevant element in your page or the ID name, many students have this chestnut 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 "red" after a few days customers asked to use "blue"? 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 The 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:

Standardizing CSS class and ID names

CSS Tip #2: Structural naming convention in CSS

CSS coding:semantic approach in naming convention

CSS naming conventions and Coding Style

1. viii. leave version of Css

when we design the menu, we sometimes require all the text of the menu options to be capitalized, and people are usually not directly in In the HTML tag, they are set to uppercase? 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. define the class name or ID name of the <body>

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, is the "<body>" 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 "<body>" 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 "<body>".

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

ID Your Body for Greater CSS Control and specificity

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:

The Markup Validation Service

Xhtml-css Validator

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 a number of how 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.

It says so much mostly tells you how you're going to learn to write a good, neat HTML code, and has persisted in writing this way.

hope to finish this article scale, in your next project, you can start from scratch, insist on writing a neat HTML code. I hope you enjoy this tutorial.

transferred from: Http://www.w3cplus.com/html/11-principles-for-keeping-your-code-clean

Desert

System Learning Web front end to know the http://www.zhihaijiangku.com

11 principles that make your HTML code neat