Tuesday, February 10, 2009

How to write clean X/HTML document


Warning: XMP tag is an officially deprecated tag as of HTML specification 3.02. So follow this advise at your own risk.


Use <xmp/> tag instead of the using many <br/> tags to pre-format ourmultiline texts inside a <p> tag. We should use <xmp/> tag for plain text and demonstrated code listings instead of using escaped stuff (entities) such as &lt; and &gt; Escaping characters are such tedious chores and we are all better off with using <xmp/> tag. If we want to have the HTML content of our tags still interpreted as HTML content then we choose to use the <pre/> tag instead of <xmp/> tag (ref: Listing 1) Listing 1: <pre> <b><u>HI THERE!</u></b> XMP is sweet. I don't know why such as useful tag is deprecated. </pre> Listing 1 will still be interpreted as HTML content and render as the following: (notice how the rendered text includes the invisible 'tab' characters). Let's compare it to what we would have to do in Listing 2 below if we don't use <xmp/> Listing 2: &nbsp;&nbsp;&nbsp;&nbsp;<b><u>HI THERE!</u></b><br/> &nbsp;&nbsp;&nbsp;&nbsp;XMP is sweet.<br/> &nbsp;&nbsp;&nbsp;&nbsp;I don't know why such as useful tag is deprecated.<br/> Which codeblock is easier to work with? Just for writing:
	HI THERE!
	XMP is sweet.
	I don't know why such as useful tag is deprecated.
We could alternatively use CSS to control our content like the following: Listing 3: <p style="white-space: pre;"> My multi line content inside a paragraph &lt;p/&gt; tag </p> to render the following:

My multi line content inside a paragraph <p/> tag

Although the sample in Listing 3 takes the white-space character and carriage-return/line-feed character, it does not take the tab character and other invisible characters that may be inside our text content-not to mention more typing compared to using <pre/> tag. If it is still chosen, IE will fault us (if we are reading this using IE, we will see the above example above as a single-line, instead of what it should be). Using the <xmp/> tag and/or <pre/> tag helps us reduce the mess that other developers would see when they view the source of our program. What mess am I talking about? Think about this: How often do we use &nbsp; like the above example? Yep, that's what I'm talking about :) So what if we want to stylize an <xmp/> content?
All we have to do is use a CSS class as we would in any other case:
For example: we could do the following:
Listing 4:
<xmp style="color: blue; font-weight: bold;">Content</xmp>
Such that the result renders as the following: Content We should be careful and test the use of <xmp/> tag carefully since this tag has been officially deprecated as of HTML standard 3.02 and is replaced by the <pre/> tag (see: WARNING at the top of this page), despite the fact that the <pre/> tag is available, it doesn't completely offer all the simple escaping facilities offered by the <xmp/> tag.

No comments: