[ZT]Web Standard and ASP.NET – Part1 XHTML Quick Start
Web Standard and ASP.NET – Part1 XHTML Quick Start
Dflying | 26 March, 2006 18:47Web Standard is more and more important in current web based application development. In these series of posts I am going to sharing some of my ideas about how to build Web Standard applications using ASP.NET 2.0.
This post is the first in these series. It introduces some basic XHTML concepts and a quick guide for HTML developers to get familiar with XHTML.
The famous HTML markup language is officially outdated now while the replacement and successor is XHTML (http://www.w3.org/MarkUp/). If you write Web pages with the stricter rules of XHTML, your Web pages will work consistently with current browsers, and you can expect they will continue to work with new versions of current browsers in the future. You will also get more cross-browser, cross-device, and cross-operating system compatible.
XHTML has two major goals:
- Separate document structure (using XHTML markup) and presentation (using CSS).
- Reformulate HTML as an application of XML.
For the first goal, W3C removed some HTML tags and attributes such as <font> and bgcolor, for these kinds of tags/attributes have nothing to do with the document structure and should be defined in CSS. Also, particular tags should not be assumed as having particular appearance. E.g. <h1> words may be smaller than some <p> words based on CSS definitions. Different tags are used to tell different document structures but not different appearances.
For the second goal, XHTML is to enforce the stricter rules of XML on HTML developers. XHTML 1.0 is a reformulation of HTML 4.01 as an XML 1.0 application (http://www.w3.org/MarkUp/). In other words, when you build an XHTML Web page using, you are actually creating an XML document. An XML document has a much stricter syntax than an HTML document which will be discussed later.
Also XHTML has three versions:
- XHTML 1.0 Transitional
- XHTML 1.0 Strict
- XHTML 1.0 Frameset
XHTML 1.0 Transitional contains all of the tags and attributes from HTML 4.01 Transitional. The XHTML 1.0 Transitional standard was introduced to enable existing HTML designers and developers to migrate to XHTML easily.
XHTML 1.0 Strict differs from XHTML 1.0 Transitional by enforcing a cleaner separation between document structure and presentation which requires you using CSS to control the page appearances.
XHTML 1.0 Frameset documents are intended to be documents that use the <frameset> tag to partition a browser into multiple frames (XHTML 1.0 Transitional and Strict pages cannot contain <frameset> tags).
Hmmm, okay for these. I am not going to explain the whole things of XHTML and of course you may find many resources and details by Google or MSN Search, or just by leaving a comment here. In the following section I want to show some basic rules of writing XHTML pages.
An XHTML page must be a well-formed and valid XML document which is much stricter than HTML. The differences between HTML and XHTML are summarized in Section 4 of the XHTML 1.0 recommendation. Here's a list of the most important issues for building a valid XHTML page:
- The page must include a valid XHTML DOCTYPE.
A valid XHTML page must include an XHTML DOCTYPE before any of its content. When you create a new ASP.NET page in Visual Studio 2005 or Microsoft Visual Web Developer, the correct DOCTYPE for XHTML 1.0 Transitional is automatically included in the page. Here are the four standard XHTML DOCTYPES:
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Adding a DOCTYPE to a page has an impact on how the page is rendered in a browser. To be discussed later.
- The root element must refer to the XHTML namespace
The opening <html> tag of an XHTML page must specify a default namespace of http://www.w3.org/1999/xhtml. E.g. an XHTML 1.0 Transitional page.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- All element and attribute names must be lowercase.
XML is case-sensitive. So, there is a difference between the <p> tag and the <P> tag. Only the <p> is a valid XHTML paragraph tag.
- Attribute values must always be quoted.
Always wrap attribute values in either double or single quotation marks. E.g., the following is invalid XHTML.
<a href=SomePage.aspx>Next</a>
In this case, the href attribute is missing quotation marks. The following is valid XHTML.
<a href="SomePage.aspx">Next</a>
You can configure Visual Studio 2005 and Visual Web Developer to automatically quote attribute values, by selecting the menu option Tools, Options, Format.
- All non-empty elements that have an opening tag must have a matching closing tag.
If you have an opening <p> tag, then you must include a closing </p> tag to mark the end of the paragraph. In the case of tags that never contain any content, such as the <br> tag, you can either supply a both an opening and closing <br></br> tag, or you can use the empty element shorthand <br />.
In order to make your XHTML pages backward-compatible with existing HTML browsers, you need to be careful about how you open and close your tags. For example, existing HTML browsers tend to misinterpret an opening and closing <br></br> tag as two <br> elements. For that reason, you should use the empty element shorthand <br />.
Furthermore, existing HTML browsers have problems with the empty element shorthand <br /> unless you are careful to add a space before the closing slash. So, you should add a <br> element to a page using <br [space] /> and not <br/>.
- There must be no overlapping tags.
You can nest tags, but you are not allowed to overlap tags. For example, the following XHTML is valid.
<b><i>This is bold and italic</i></b>
However, the following XHTML is invalid.
<i><b>This is bold and italic</i></b>
- There must be no attribute minimization.
All attributes must have a value, even when it looks a little strange. For example, the tag <input type="checkbox" checked /> is invalid XHTML, because the checkedattribute does not have a value. The tag should be written <input type="checkbox" checked="checked" />.
- The id attribute must be used instead of the name attribute.
In HTML, you use the name attribute to identify <a>, <applet>, <form>, <frame>, <iframe>, <img>, and <map> elements. While you can use the name attribute when building XHTML 1.0 Transitional pages, the name attribute has been removed from the XHTML 1.0 Strict and XHTML 1.1 standards. You should use the idattribute to identify these elements instead.
- The contents of <script> and <style> elements must be wrapped in CDATA sections.
If you use special characters such as < or &, or entity references such as < or & in a script or style sheet, then you'll need to mark the contents of your script or style sheet as a CDATA (character data) section, as follows.
<script type="text/javascript"> <![CDATA[ function isLess(a, b) { if (a < b) return true; } ]]> </script>
Notice that the JavaScript function contained in the script includes a < character. If you do not wrap the script in a CDATA section, then the < character would be interpreted as marking the start of an XHTML tag.
Using a CDATA section will not work with all browsers. For example, Internet Explorer considers a CDATA section in a <script> tag a syntax error. You can avoid this problem by adding JavaScript comments, as follows.
<script type="text/javascript"> /* <![CDATA[ */ function isLess(a, b) { if (a < b) return true; } /* ]]> */ </script>
JavaScript uses /* and */ to mark the beginning and end of a comment. Therefore, the CDATA section is hidden from the JavaScript, but not from the browser that parses the page. In general, it is a better idea to place your style rules and scripts in external files and reference the files from your XHTML pages. Using external style sheets and scripts enables you to avoid all of these issues.
