15 coding principles that Web developers should know

HTML has gone through nearly 20 of the development process. From HTML4 to XHTML to the most recent fiery HTML5, it has almost witnessed the development of the entire Internet. However, even now, there are many basic concepts and principles that still require the developer to be highly aware. Below, we introduce the development principles that should be followed.

1, use Div to layout

When developing a Web page, the first thing to consider is to differentiate the page from the main point. By including the content in div tags, the code of the page will show a neat, well-indented style.

1 2 3 4 5 6

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

A good page should separate the HTML tag from the CSS style sheet. This is a principle 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 get into the habit of creating files separately to store CSS stylesheets. This will also make it easier for other developers to get the job done quickly when modifying your code.

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

3. Optimize CSS Code

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

4. Optimize JavaScript files and place them at the bottom of the page

As with CSS, it is common practice to add multiple JavaScript files to a page. But it also reduces the responsiveness of the site. To do this, developers should streamline and optimize these JavaScript files.

However, unlike CSS, browsers typically do not support parallel loading. This means that when a browser loads a JavaScript file, it will no longer load other content at the same time. This causes the page to load as if it were slowing down.

A good solution is to put JavaScript files in the last order of loading. To achieve this, developers can put JavaScript 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

1 2 3

<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 the right place

HTML tags are the key to constructing a canonical content structure. For example,,<em> tags are used to emphasize emphasis. <p> tags apply to highlight article paragraphs. If you want to empty lines between paragraphs, do not use the <BR/> label.

0 S	<em>emphasized text</em> <strong>strongly emphasized text</strong>

For a set of related elements, it is recommended to use the <ul>, <ol>, or <dl> tags. However, do not use the <blockquote> tag incorrectly because it was originally used to define the block application.

7. Avoid Misuse <div> labeling

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

8. Create a navigation using the list

You can create beautiful navigation menus by using the <ul> List tab, with the corresponding CSS style.

9, do not forget to close the label

Now, whenever I recall the first lesson I learned about web development in college, the importance of the HTML structure that the Professor mentions always comes to mind. According to the standard, labels should be closed. That is because, in some browsers, if you do not follow the standard to close the label, there will be a problem showing the abnormal. This is particularly evident in IE6, 7 and 8.

10. Label lowercase syntax

The use of lowercase syntax for labels is an industry standard. Although the uppercase syntax does not affect the display of the page, the code is poorly readable. The following code is very poor in readability:

1 2 3) 4 5

<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 alt attribute for picture label

In the tab, the ALT attribute is often useful. Because search engines are often unable to crawl image files directly. However, if the developer adds a description of the image to the ALT attribute, it will be convenient for the search engine to crawl.

1 2 3) 4 5

<!-- 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 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.

1 2 3 4 5 6 7 8

<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, the browser-compatible code to identify information and separate from each other

Cross-browser compatibility is a key concern for a web developer. In general, developers will code for different browsers, which is CSS hack. However, if the developer is coding, it can be noted that the code for which version of the browser is written, will be very convenient for future maintenance work. Here's a good example:

1 2 3

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

1 2 3 4 5 6 7

<!--[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 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, there is no need to add comments for each line of code.

15. Test Code

Developers are recommended to test the code using the text tag verification service. It is an efficient test tool that can help you find errors in the page. It also allows you to navigate to the appropriate code, starting with a page fault. This is often difficult to do after the coding is complete. However, developers need to be aware that the code passed by the validation is not the code that performs well.