15 coding principles that Web developers cannot know

HTML has gone through the development process of nearly 20. From HTML4 to XHTML to the recently popular HTML5, it almost witnessed the development of the entire internet. However, developers still need to pay close attention to many basic concepts and principles. The following describes the development principles to be followed.

1. Make good use of DIV Layout

When developing a Web page, the first thing to consider is to differentiate the page focus. To include the content with the DIV label, the page code will show a clean and indent style.

123456

<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. Separate HTML tags from CSS style sheets.

A good page should split the HTML Tag and CSS style sheet. This is a principle that every Web developer should know when getting started with Web development for the first time. However, till today, many developers have not strictly followed this principle.

Do not embed style sheet code in HTML tags. Developers should develop a habit of creating files separately to store CSS style sheets. This also facilitates other developers to quickly complete their work when modifying your code.

12	<p style="color: #CCC; font-size:16px; font-family: arial">　　　　An example to illustrate inline style in html</p>

3. Optimize CSS code

Nowadays, it is common to add multiple CSS files to a website. However, when the website contains too many CSS files, the response speed of the website will be reduced. Solution: streamline the code and optimize multiple CSS files to merge them into one file. This method can significantly increase the loading speed of websites. In addition, there are many tools that can be used to optimize CSS files, such as CSS Optimizer and Clean CSS.

4. Optimize the Javascript file and put it at the bottom of the page

Like CSS, it is also common to add multiple Javascript files to a page. However, this will also reduce the website response speed. To this end, developers should streamline and optimize these Javascript files.

However, unlike CSS, browsers generally do not support parallel loading. This means that when the browser loads Javascript files, it will not load other content at the same time. This causes the webpage loading speed to become slower.

A good solution is to put the loading sequence of Javascript files at the end. To achieve this goal, developers can place Javascript code at the bottom of the HTML document, and the best position is to place the Javascript code close to the </body> tag.

5. Make full use of the title Element

<H1> to

123	<h1>This is the topmost heading</h1><h2>This is a sub-heading underneath the topmost heading.</h2><h3>This is a sub-heading underneath the h2 heading.</h3>

6. Use appropriate HTML tags in appropriate places

HTML tags are the key to constructing a standard content structure. For example, the <em> label is used to emphasize the key content. <P> the label applies to highlighting the article section. If you want to add blank lines between paragraphs, do not use the <br/> label.

12	<em>emphasized text</em><strong>strongly emphasized text</strong>

We recommend that you use <ul>, <ol>, or <dl> tags for a group of related elements. However, do not use the <blockquote> label incorrectly because it was originally used to define block applications.

7. avoid abuse of <div> labels

Not all block elements should be created using the <div> label. For example, you can add a display: block to the attribute of an inline element to display it as a block element.

8. Use the list to create a navigation bar

You can create beautiful navigation menus by using the <ul> List label and CSS style.

9. Do not forget to close the tag.

Now, whenever I recall the first lesson about Web development in college, the importance of the HTML structure mentioned by the professor always comes to my mind. According to W3C standards, tags should be closed. That's because, in some browsers, if the tag is not closed according to the standard, the display will be abnormal. This situation is particularly evident in IE6, 7, and 8.

10. Tag lowercase syntax

The use of lower-case syntax for tags is an industry standard. Although the upper-case syntax does not affect the page display effect, the code is poorly readable. The following code is very readable:

12345

<DIV><IMG SRC="images/demo_image.jpg" alt="demo image"/><A HREF="#" TITLE="click here">Click Here</A><P>some sample text</P></DIV>

11. Add the alt attribute for the Image Tag

In the label, the alt attribute is usually very useful. Because the search engine usually cannot directly capture image files. However, if the developer adds the image description in the alt attribute, the search engine can easily capture the image.

12345

<!-- has an alt attribute, which will validate, but alt value is meaningless -- ><img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" /> <!-- The correct way -- > <img id="logo" src="images/bgr_logo.png" alt="Anson Cheung - Web Development" />

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

To improve the code quality and make it easy for users to understand the table content, we should use the <label> and <fieldset> labels to Create Table elements.

12345678

<fieldset>    <legend>Personal Particular</legend>    <label for="name">Name</label><input type="text" id="name" name="name" />    <label for="email">E-mail</label><input type="text" id="email" name="email" />    <label for="subject">Subject</label><input type="text" id="subject" name="subject" />    <label for="message" >Message Body</label>　　<textarea rows="10" cols="20" id="message" name="message" ></textarea></fieldset>

13. Mark and separate the compatible browser code

Cross-browser compatibility is a key concern for a Web developer. Generally, developers code different browsers, that is, CSS hack. However, if the developer can specify the version of the code written by the browser during encoding, it will bring great convenience for future maintenance work. The following is a good example:

123	<!--[if IE 7]><link rel="stylesheet" href="css/ie-7.css" media="all"><![endif]-->

1234567

<!--[if IE 6]><link rel="stylesheet" href="css/ie-6.css" media="all"><script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script><script type="text/javascript">        DD_belatedPNG.fix('#logo');</script><![endif]-->

14. Avoid excessive comments

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

15. Test code

We recommend that you use the W3C text mark verification service to test the code. It is an efficient test tool that helps you discover errors on the page. In addition, it can also help you locate the corresponding code from page errors. This scheme is often difficult to achieve After encoding. However, developers should note that the code that passes verification is not code with excellent performance.

Link: http://www.cnblogs.com/oooweb/p/web-development-mode-evolve.html

10 + HTML Best practices for Web Developer