by Hayesha Somarathne

In previous articles I tried to drive you into some important areas in World Wide Web specially useful for Web authors and content generators. With the last month's version I focused your attention towards the main XHTML elements that is required to build a syntactically correct Web page. Although the HTML markup is not properly obeyed still most of the modern Web browsers  lets you display the content. But from the accessibility point of view the site is badly organized and there is very little possibility that your site could be accessed by other mediums, especially through hand-held devices like PDAs, mobile phones, etc..). Because today we are living in a world that has a shift towards a mobile device driven society. In the developed countries most people prefer to do their business related activities while on the move because its greatly reduces the time and helps them to utilize their energy efficiently and effectively. The best and the most effective method of getting connected with each other while on the move is through the use of mobile devices like Blackberry or  Smart phones. 

It's very important that we strictly adhere to the Web Accessibility Guidelines set by the W3C specially on the XHTML/HTML (Extensible Hypertext Markup Language/Hypertext Markup Language) when developing Web sites. Once the system is properly structured and developed according the the guidelines it could be very easily accessed by any medium with minimum effort and time. So lets dig deeper into most of the common mistakes we do as Web developers and see what are the ways that we can adapt to reduce such errors.

General rules

Following is a list of rules that must be considered as a list of differences between HTML and XHTML. If you have never written HTML documents before, consider this as a list of recommendations for a better structuring of the HTML markup.

• Non-empty tags must always be closed. There is no optional closing in XHTML.

o     Valid: <p> Paragraph </p>

o     Invalid: <p> Paragraph

• Empty tags must be correctly closed. To achieve this you can use a normal closing or you can close the tag by putting a space and a slash at the end of the start tag.

o     Valid: <img src="button.jpg"></img> <img src="button.jpg" />

o     Invalid: <img src="button.jpg" >

• Tags and attributes names must be lowercase to fit into the XML case-sensitivity (except for the HTML !DOCTYPE tag).

o     Valid: <a href="http://www.htmlquick.com/tutorials.html" > Anchor </a>

o     Invalid: <A Href="http://www.htmlquick.com/tutorials.html" > Anchor </A>

• The predefined values for some attributes must be lowercase due to the XML case-sensitivity.

o     Valid: <input type="submit" />

o     Invalid: <input type="SUBMIT" />

• The attributes' values must be properly enclosed by quotes (single or double). Quotation is not optional in XHTML.

o     Valid: <span id="id1" class="important" > Text </span>

o   Invalid: <span class=important > Text </span>

• Boolean attributes cannot be abbreviated (using only the attribute's name). As value you must specify the attribute's name.

o     Valid: <button id="button1" disabled="disabled" > Execute </button>

o     Invalid: <button id="button1" disabled> Execute </button>

• Nested elements must obey correctly to their hierarchical order.

o     Valid: <span class="double" > <b> Execute </b> </span>

o     Invalid: <span class="double" > <b> Execute </span> </b>

• Block level elements can not be declared as content of in-line elements.

o     Valid: <b><div class="double" > Execute </div> </b>

o     Invalid: <div class="double" ><b> Execute </b> </div>

• Some specific elements cannot be declared as content of other specific elements.

• The "a" element must not contain other "a" elements.
• The "pre" element must not contain the "img", "object", "big", "small", "sub" or "sup" elements.
• The "button" element must not contain other "input", "select", "textarea", "label", "button", "form", "fieldset", "iframe" or "isindex" elements.
• The "label" element must not contain other "label" elements.
• The "form" element must not contain other "form" elements.

• All ampersand symbols must be written using it's entity name (&), even in URLs.

o     Valid: <a href="buysell.php?id=1&amp;sub=2" > Buy &amp; sell </a>

o     Invalid: <a href="buysell.php?id=1&sub=2" > Buy&sell </a>

• Character entity references are case-sensitive due to the XML rule.

• Valid: á - á (for á)
• Invalid: á - &aAcuTe; (for á)

• The "alt" attribute must always be present in the HTML img tag.

o     Valid: <img src="bird.jpg" alt="A bird flying" ></img>

o     Invalid: <img src="bird.jpg" > </img>

• Commented text will be completely ignored by an XML parser, which means that commenting scripts or style codes to "hide" them from old browsers will be as erasing them. If the script or style code contains a character "&" or "<" they will be processed by the XML parser. To avoid this problem you can choose to declare them in external files or to use the CDATA block.

o     Valid: <style type="text/css">
   <![CDATA[
     p { color: blue; }
   ]]>
  </style>

o    Invalid: <style type="text/css">
    <!--
      p { color: blue; }
    -->
   </style>

• The "name" attribute have been formally deprecated for the elements a, applet, form, frame, iframe, img, and map, and may be excluded in future versions.

Browser Hacks

Today we find several different kinds of Web browsers which runs under different operating environments. The present Web browsers use different mechanisms to render the content of the Web page based on its underlaying the architecture. Because of this inherent differences the Web browsers tend to render the same Web page in different manner. So this has become a big issue.

With the advancement of the technology people came up with various standards that they can adhere to minimize the problems they face. Today we have several different Web browsers in the market such as Mozilla Firefox, Opera, Safari, Konqueror, Internet Explorer, etc… Out of these Opera Web browser is regraded as one of the best Web browser both with performance and adhering to the existing Web standards while Mozilla Firefox has become the most preferred Web browser among Web developers because it provides wide array of functionality through extensions, giving the total power to the developer play with it the way he/she wants.   

Developing a Web site adhering to W3Cs Web standards we use HTML/XHTML to markup the content while use CSS to control the presentation. So due to the different rendering mechanisms that are used by Web browsers we have to add additional chunks of codes to overcome their difference. With Internet Explore this is achieved by linking the required code fragment through Conditional Comments. There are 3 main things you have to keep in mind when using it.

Conditional Comments   

Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

• Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.
• Windows Explorer has been programmed to recognize the special <!--[if IE]> syntax, it resolves the if and parses the content of the conditional comment as if it were normal page content.
• Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

Let’s look at how to add conditional comments to Internet Explorer browser.

Syntax:

			   <!--[if condition IE version]>

	      Special instructions for IE version here

	   <![endif]-->

Condition: We can summarize the commands as follows

Version: You give the version of the Internet Explorer that you need the effects to be applied.

Summary

Finally we can summarize the important point so far discussed above, which will be useful to keep in mind during the Web development. 

• Flexibility
• Wider Accessibility
• Simple syntax

Have a problem in mind of what I have discussed so far or feels like need further clarification, please feel free to bug me.

Please note that the all trade names used in this article are owned by respective organization and I have only used them for informative purpose.

Previous Article