These days we all talk about web standards and pretty much of every web developer knows about XHTML (at least what that means, duh, if you are not). I’m a big fan of Web Standards and the benefits it bring towards the manageability of the code base and the cross browser issues that any web developer has to deal with.
Well, if you are put that “W3C XHTML 1.0″ compliant stamp on to your page you have to validate your page against the W3C Markup Validation Service. There is a huge laundry list of items that you should have to take care of to get your pages stamped but at least you should have to make sure you comply with these 9 of the most important requirements,
- 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. See the section below entitled XHTML and DOCTYPE Switching.
- 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. Here’s a sample of a valid opening <html> tag for 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. Therefore, there is a difference between the <p> tag and the <P> tag. Only the former is a valid XHTML paragraph tag.
- Attribute values must always be quoted.
Always wrap attribute values in either double or single quotation marks. For example, 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 checked attribute 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 id attribute 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.
Hope it helps.
