15 coding principles that web developers must know
HTML has gone through nearly 20 years of development. From HTML4 to XHTML, and then to the recently very popular HTML5, it has almost witnessed the development of the entire Internet. However, even now, there are many basic concepts and principles that developers still need to pay close attention to. Below, I will introduce to you the development principles that should be followed.
1. Make good use of DIVs for layout
When developing a Web page, the first thing to consider is to distinguish the focus of the page. By including these contents in DIV tags, the code on the page will appear neat and well-indented.
<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 and CSS style sheets
A good page should separate HTML tags and CSS style sheets. This is a principle that every web developer should know when they first come into contact with web development. However, until today, there are still many developers who do not strictly follow this principle.
Don’t embed style sheet code in HTML tags. Developers should develop a habit of creating separate files to store CSS style sheets. This will also make it easier for other developers to complete their work quickly when modifying your code.
<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 very common to add multiple CSS files to a website. However, when a website contains too many CSS files, it will slow down the website's response speed. The solution is: streamline the code and optimize multiple CSS files and 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, etc.
For CSS, we have also recommended 9 excellent CSS frameworks that you should know. You can learn about the types and related usage of CSS frameworks.
4. Optimize Javascript files and place them at the bottom of the page
Like CSS, it is also common to add multiple Javascript files to the page. But this will also reduce the response speed of the website. For this reason, developers should streamline and optimize these Javascript files.
But one thing is different from CSS, browsers usually do not support parallel loading. This means that when the browser loads a Javascript file, it will no longer load other content at the same time. This causes the page loading speed to seem to slow down.
A good solution is to put the loading order of Javascript files last. To achieve this, developers can place Javascript code at the bottom of the HTML document, and the best location is close to the
