Top 15 HTML Best Practices


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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>My Title</title>
 </head>
 <body>
  .
  .
 </body>
</html>

If you are interested check the other recommended list of Doctype Declarations.

03. Never Use Inline Styles and Inline JavaScript

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.

Instead of;

 
<div>
 <a href="#" style="font-size:14px;" onclick="myFunction()" >My Link</a>
</div>

Use;

<div id="myID" >
 <a href="#" id="someLink">My Link</a>
</div>

In your external CSS file you can add styles to that element.

#myID a{
 font-size:14px;
}

You can move the JavaScript code to an external JS file and use a framework like jQuery to add the “click” method.

$('# someLink').click(function() { 
 alert('Hellow !'); 
});

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 &gt; and &lt; for reprecent those characters. As an example,

It is true that 5 &gt; 3 &amp; 1 &lt; 2

Will render as;

It is true that 5 > 3 & 1 < 2

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.

<head
 .
 .
 <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" /> 
 <link href="css/layout.css" rel="stylesheet" type="text/css" media="screen" /> 
</head

06. Place JavaScript Files Just Before the Closing BODY Tag

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>My Title</title>
 </head>
 <body>
   .
   .
   <p>This is a sample paragraphe</p
  </div><!--end of footer-->
  <script type="text/javascript" src="js/jquery.js"></script
  <script type="text/javascript" src="js/nav_menu.js"></script
 </body
</html

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.

Instard of;

<li>another text
<li><b>text goes hete</li></b>

Use;

<ul
 <li><b>text goes hete</b></li>
 <li>another text</li>
</ul>

08. Use FireBug

Firebug is the best free and open source plug-in you can use when creating websites. It integrates with Firefox and it allows the debugging, editing, and monitoring of any website’s CSS, HTML, DOM, and JavaScript, and provides other Web development tools. Download 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).

 
<head>
 <title>Sencide | We Care Your Satisfaction</title>
 <link type="text/css" rel="stylesheet" href="css/style.css" media="screen" />
 <!--[if lte IE 6]>
  <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />
 <![endif]-->
 <!--[if IE 7]>
  <link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" />
 <![endif]-->
 <!--[if gt IE 7]>
  <link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen" />
 <![endif]-->
</head>

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.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
/* remember to define focus styles! */
:focus {
 outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

In the bigining of your main CSS file you can import this reset.css file like this.

1
@import url('reset.css');

11. Never Scale Images in HTML

Don’t use a bigger image by setting the width and height in HTML. If you use;

<img src="logo.jpg" alt="Logo" width="75" height="75" />

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.

Instard of;

<img src="logo.jpg" />
<img src="" />

Use;

<img src="logo.jpg" alt="Logo" />
<img src="path_to_your_image.jpg" alt="Image Caption" />

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.

Instard of;

div.content_wrapper{
 float:left;
 width:600px;
 background-color:#2B2A26;
}

Use;

div.content_wrapper{
 float:left;
 width:600px;
 background : #2B2A26 url(../images/bg.jpg) repeat;
}

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.

You can download the Web Developer Toolbar and use the “Validate HTML” and “Validate CSS” options continuously or you can use W3C Markup Validation Service

15. Compress CSS and JavaScript Files

By compressing your CSS and JavaScript files, you can reduce the size and that will improve page load times. You can do this using following services after the development of your site.

JavaScript Compression Services : JSCompressJavaScript Compressor
CSS Compression Services: CSS OptimiserCSS Compressor

http://blog.sencide.com

Posted in Web. 1 Comment »

One Response to “Top 15 HTML Best Practices”

  1. web designing professional Says:

    Good article. I will be facing many of these issues as well.
    .


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: