Cross-browser friendly HTML code

In the frenzy of high-speed Web page development and short turnaround times, we Java developers tend to forget some of the most common and very simple practices that, if followed, could save us from a lot of debugging effort during cross-browser testing. Here are some basic guiding principles to keep in mind while designing any HTML page.

Include the doctype

Always include the doctype in each Web page. “<!Doctype=…” should be the very first tag in any HTML page. doctype is not an HTML tag and refers to document type declaration. We normally ignore this tag since it does not explicitly interfere with the HTML display. However, doctype inclusion helps restrict many browsers from switching to "quirks mode." It will not leave the page in a non-standard format and will also avoid various compatibility obstacles. The doctype categorizes all versions of HTML according to the W3C standard. I usually prefer using strict doctype because it provides a separation of structure and presentation, which makes the website so much easier to maintain.

Avoid using deprecated tags

Avoid using ancient/deprecated html tags. They are no longer supported and have been superseded with more flexible and arguably better alternatives. For example:

Font:  As the <font> tag is deprecated in HTML 4.01 /XHTML 4.01 strict DTD, it should be specified in CSS as below:
 

body {

font: 0.9em verdana,arial,sans-serif;

}

 
Center: If you want the div text to be centrally aligned, use the following CSS:

 
div.text {

margin-left: auto;

margin-right: auto;

}

 
There are a number of sites available which specify the list of deprecated HTML tags and their better alternatives. Lots of information about deprecated tags and their attributes is available on the W3C website.

HTML 5 features and support

HTML 5 includes various powerful tags such as <input type =”date” /> and its variants which are a great time saver when you want to include date related features in your Web page. There are many other rich features like drag and drop and extended video and audio playing functionalities that HTML5 also supports. However, not every browser supports HTML5 as of the date this is posted. So, you should avoid using HTML 5 specific tags until it is universally supported, otherwise you might end up adding alternate fixes for each browser (and possibly even each browser version) that does not carry HTML5 support.

Code Validation and cleanup

There are many times when you could find that your site looks fine on Internet Explorer but not on all other browsers. This is because IE is very forgiving of incorrect HTML. So, when you face similar problems, the first thing to do is to check your code for closing tags, missing tags or partial tags. The chances of missing or incorrect tags are greater if you are using generated HTML code (i.e.  Dreamweaver, Flash etc.). I always prefer handwritten code because it reduces the frequency of such mistakes.

Another thing to point out is that you might not explicitly see the positive impact of eliminating the invalid or irrelevant code. But my personal experience with this exercise is that it is very beneficial for attaining cross-browser compatibility.

Various online services are available to validate the codes. For example, the HTML Validator add-on in Firefox, W3C Validator, and others can validate your code automatically. However, over a period of time I have realized that it is better to have an offline validator (download one and install it). Having it on my machine helps me remember to validate my code; going online to validate the code tends to put off the validation till later. And the earlier the validation is done, the less it takes to rework the code.