Tình cờ gặp được bài viết khá hay . Hy vọng nó giúp ích cho các bạn. Mình đả đọc và đả làm theo =]] =]]…….còn bạn..
If you are a beginner to web development you have finally come to the correct place. This tutorial discuss the best practices you should follow to write clean, cross browser compatible and W3C validated XHTML and CSS codes. Here 15 tips are discussed and let’s see them one by one.
01. Keep Your Markup in Lower Case
Keep the markup lower-cased is an industry standard practice that you can follow easily. Capitalize markup will not affect how your web pages are rendered, but it will significantly reduce the readability of your markup.
02. Identify and Declare the Relevant DockType
The first thing in an HTML document is the DocType declaration, it is not an HTML tag. It gives an idea to the web browser about what version of the markup language the page is written in. As a best practice you can use XHTML 1.0 Strict, since it checks whether the markup is well-formed XML. Hear is an example.
If you are interested check the other recommended list of Doctype Declarations.
Always use external CSS files. You will feel easy to use inline styles, but it will cause more problems. Add styles once the page has been completely coded.
In your external CSS file you can add styles to that element.
04. Use Reserved Characters
For example, you cannot use the greater than (>) or less than (<) signs within your text because the browser could mistake them for markup. You must use > and < for reprecent those characters. As an example,
Will render as;
You can use the HTML ISO-8859-1 Reference to see the list of special characters.
05. Link all External CSS Files Inside the Head Tag
The HTML specification recommends that external CSS files should be linked within the document HEAD tag. The advantage is that your page’s load time will be reduced.
The Yahoo! Exceptional Performance team recommend placing scripts at the bottom of your page because when loading a script, the browser can’t continue on until the entire file has been loaded.
07. Close Your Tags and Make Them Nested Properly
You should always close your tags in the reverse order from the way they open. Otherwise it will cause validation problems.
08. Use FireBug
09. Use Separate CSS for IE
We all know that Internet Explorer is a real headache when it comes to web development. Lot of people complain “My site looks great in Firefox, but looks messed up in IE”
There is a simple way to get around most problems. You can create a conditional statement in your HTML to import a style sheet just for IE. This CSS file override the statements in the main CSS file just for IE. Hear are some few examples. Keep in mind to link those style sheets after the main CSS (style.css).
The first statement says “if the browser is later than or equal to IE6 than apply style sheet ie6.css”.
10. Use a CSS Reset
All browsers have presentation defaults for line heights, margins and font sizes of headings, and so on, but the problem is no browsers have the same defaults. That is why we have to reset all the values in the beginning. There I always use Eric Meyer’s CSS Reset file.
In the bigining of your main CSS file you can import this reset.css file like this.
11. Never Scale Images in HTML
Don’t use a bigger image by setting the width and height in HTML. If you use;
then your image (logo.jpg) should be 75px*75px rather than a scaled down 300px*300px image.
12. Always Set “Alt” Attribute to Images
It’s very important to put alt attributes within image tags for accessibility and validation reasons. Another thing is you must avoid empty Image src attributes which cripple your servers by sending a large amount of unexpected traffic.
13. Use Small Image for Backgrounds
If you are not using Web Safe Colors for your site background, I strongly recommend to use 5px * 5px small piece of image as background color. Otherwise there will be a difference between images and background as shown in the picture. This mainly occurs in MACs due to super high gamma output comparable to LCDs.
14. Validate Continuously
One can ask “My site looks good and works fine, why should I validate?”. There are lot of advantages you can get if you validate your pages. Search engines cannot properly index your site if there are serious HTML errors. Well written HTML will render better and faster than HTML with errors.