15 coding principles that Web developers have to know

HTML has gone through nearly 20 of the development process. From HTML4 to XHTML to the recently hot HTML5, it has almost witnessed the development of the entire Internet. However, even now, there are many basic concepts and principles that still require a high level of attention from developers. Here are some of the development principles that you should follow.

　　

1, use Div to layout

When developing a Web page, the first thing to consider is to differentiate the page focus. Include these in a div tag, and the page's code will look neat and indented in a good style.

<div id= "Header" ></div>

<div id= "Body-container" >

<div id= "Content" > <!--Content--> </div>

<div id= "Right-side-bar" > <!--right side bar Content area--></div>

</div>

<div id= "Footer" ></div>

2, the HTML tags and CSS style sheet separated

A good page should split the HTML tag from the CSS style sheet. This is one of the principles that every web developer should know when they first touch web development. However, until today, there are still many developers who do not strictly follow this principle.

Do not embed style sheet code in HTML tags. Developers should develop the habit of creating separate files for CSS stylesheets. This will also make it easier for other developers to get their work done quickly when they modify your code.

<p style= "color: #CCC; font-size:16px; Font-family:arial ">

An example to illustrate inline style in html</p>

3, optimize the CSS code

Nowadays, the practice of adding multiple CSS files to a Web site is common. However, when a Web site contains too many CSS files, it can slow down the response time of the site. The solution is to streamline the code and optimize multiple CSS files, merging them into one file. This approach can significantly improve the loading speed of the site. In addition, there are many tools that can be used to optimize CSS files, such as CSS Optimizer, clean CSS, and so on.

For CSS this piece, we also recommended you should know 9 excellent CSS framework, you can understand the CSS framework of the kind and related usage.

4, optimize JA vasc ript file, and put it to the bottom of the page

As with CSS, adding multiple ja vasc ript files to a page is also a common practice. But that will also slow down the Web site's response. To do this, developers should streamline and optimize these ja vasc ript files.

However, unlike CSS, browsers generally do not support parallel loading. This means that when the browser loads the JA vasc ript file, the other content will not be loaded at the same time. This causes the Web page to load faster as if it were slow.

A good solution is to put the load order of the JA vasc ript file at the end. To achieve this, developers can place the JA vasc ript code at the bottom of the HTML document, and the best place to put it is near the </body> tag.

5, use the TITLE element

6, in the appropriate place to use the appropriate HTML tags

HTML tags are the key to structuring the content structure of a specification. For example, the,<em> tag is used to emphasize key content. <p> tags apply to highlighted article paragraphs. If you want to add a blank line between paragraphs, do not use the <BR/> label.

For a set of related elements, it is recommended that you use the <ul>, <ol>, or <dl> labels. However, do not use the <blockquote> tag incorrectly, as it was originally used to define block applications.

7. Avoid abusing <div> labeling

Not all block elements should be created with the <div> tag. For example, you can add Display:block to the properties of an inline element and display it as a block element.

8, use the list to create navigation

You can create beautiful navigation menus by using the <ul> list tags and the corresponding CSS styles.

9, don't forget to close the label

Now, whenever I recall the first time I learned about web development in college, the importance of the HTML structure that the Professor mentioned was always on my mind. According to the standards of the consortium, labels should be closed. That is because, in some browsers, if the label is not closed according to the standard, there will be an abnormal display of the problem. This is particularly true in IE6, 7 and 8.

10. Label lowercase syntax

A label with lowercase syntax is an industry standard. Although the uppercase grammar does not affect the display of the page, the code is not readable. The following code is very poor in readability:

<DIV>

<a href= "#" title= "click here" >click here</a>

<p>some Sample Text</p>

</DIV>

11. Add alt attribute to picture label

In the tab, the ALT attribute is often useful. Because search engines usually can't grab picture files directly. However, if the developer adds a description of the image to the ALT attribute, it will be easy to crawl the search engine.

<!--has an ALT attribute, which'll validate, but Alt value is meaningless-->

<!--the correct way->

12. Use <label> and <fieldset> in the form

To improve code quality and make it easier for users to understand table content, we should create table elements with <label> and <fieldset> tags.

<fieldset>

<legend>personal particular</legend>

<label for= "name" >name</label><in put type= "text" id= "name" name= "name"/>

<label for= "Email" >e-mail</label><in put type= "text" id= "email" name= "email"/>

<label for= "Subject" >subject</label><in put type= "text" id= "subject" name= "Subject"/>

<label for= "message" >message body</label>

<textarea rows= "cols=" id= "message" name= "message" ></textarea>

</fieldset>

13, the browser compatible code marked information and separated from each other

Cross-browser compatibility is a key concern for a web developer. Typically, developers will encode for different browsers, or CSS hack. However, if the developer in the coding, can indicate which version of the code for the browser to write, will bring great convenience for future maintenance work. Here's a good example:

<!--[if IE 7]>

<link rel= "stylesheet" href= "Css/ie-7.css" media= "All" >

<! [endif]-->

<!--[if IE 6]>

<link rel= "stylesheet" href= "Css/ie-6.css" media= "All" >

<SC ript type= "Text/ja vasc ript" src= "Js/dd_belatedpng_0.0.8a-min.js" ></sc ript>

<SC ript type= "Text/ja vasc ript" >

Dd_belatedpng.fix (' #logo ');

</SC ript>

<! [endif]-->

14. Avoid excessive annotation

As a developer, adding comments to your code is a good habit, easy to understand and easy to maintain. This is common in other programming languages such as PHP, JAVA, and C #. However, html/xhtml is a text markup language that is very easy to understand. Therefore, you do not need to add comments for each line of code.

15. Test Code

The developer is recommended to test the code using the document-proof service. It is an efficient test tool that can help you find errors in your pages. Also, it can start with page faults and help you navigate to the appropriate code. This is usually difficult to do after coding is complete. But what developers need to be aware of is that the code that validates is not the code that performs well.