Monday, August 23, 2010

Top 15 HTML Best Practices

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"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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.
@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 : JSCompress, JavaScript Compressor
CSS Compression Services: CSS Optimiser, CSS Compressor

Thursday, August 19, 2010

Welcome

Welcome to the Sencide Blog

Sencide was founded in May 2009 as a Sri Lankan software Development Company recognized for innovation, customized and cost effective solutions. We believe in small teams, solid development and great design using standards.

Related Posts Plugin for WordPress, Blogger...