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:<br /> <pre><br /> <b><u>HI THERE!</u></b><br /> XMP is sweet.<br /> I don't know why such as useful tag is deprecated.<br /> </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).<br /><br />Let's compare it to what we would have to do in Listing 2 below if we don't use <xmp />Listing 2:&#160;&#160;&#160;&#160; <b><u>HI THERE!</u></b><br />&#160;&#160;&#160;&#160; XMP is sweet.<br />&#160;&#160;&#160;&#160; 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:<br /><p style="white-space: pre;"><br /> My multi line<br /> content inside a paragraph &lt;p/&gt; tag<br /></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).<br /><br />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.<br />What mess am I talking about?<br />Think about this: How often do we use&#160;&#160; like the above example?<br /><br />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: ContentWe 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:

Post a Comment