As one of the few coders who were first introduced to XHTML prior to HTML, I was fortunate enough to not acquire the bad habits of HTML. However, I did have my share of encounters of bad HTML over the years. Back then, I remember being asked to fix a style issue on a page that was coded in all caps with no CSS style and why the page looked different in Firefox and Explorer. Today, these are the habits of the old. And now, there is XHTML to resolve such issues.
XHTML is the “new” HTML and it stands for Extensible HyperText Markup Language. XTHML is a form of XML which is designed to describe data. XHTML, on the contrary, is stricter and cleaner version of HTML. XTHML is the Word Wide Consortium’s (W3C) Recommendation, considering that all new browsers support it. Basically, this is the proper method of creating web pages.
Here are guidelines to write XTHML:
1. Elements must be properly nested.
Wrong:
<ul>
<li>Apple</li>
<li>Orange</li>
<ul>
<li>Banana</li>
<li>Mango</li>
</ul>
<li>Strawberry</li>
</ul>
Correct:
<ul>
<li>Apple</li>
<li>Orange
<ul>
<li>Banana</li>
<li>Mango</li>
</ul>
</li>
<li>Strawberry</li>
</ul>
2. Elements must always be closed.
Wrong:
<h1>Title
<p>Corresponding paragraph
Correct:
<h1>Title</h1>
<p>Corresponding paragraph</p>
Empty elements must either have an end tag or the start tag must end with />.
Wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="orange.gif" alt="Orange">
Correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="orange.gif" alt=" Orange" />
3. Elements must be in lowercase.
Wrong:
<BODY>
<DIV>This is a container</DIV>
</BODY>
Correct:
<body>
<div>This is a container</div>
</body>
4. Documents must have one root element.
All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
<html>
<head> ... </head>
<body> ... </body>
</html>
5. Attribute names must be in lower case.
Wrong:
<img src="apple.jpg" WIDTH="100" HEIGHT="50" ALT="Apple" />
Correct:
<img src="apple.jpg" width="100" height="50" alt="Apple" />
6. Attribute values must be quoted.
Wrong:
<table width=100%>
Correct:
<table width="100%">
7. Attribute minimization is forbidden.
Wrong:
<input checked>
<input readonly>
<input disabled>
<option selected>
Correct:
<input checked=”checked” />
<input readonly=”readonly” />
<input disabled=”disabled” />
<option selected=”selected” />
8. The id attribute replaces the name attribute.
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
Wrong:
<img src="banana.jpg" name="banana1" alt="Banana" />
Correct:
<img src="banana.jpg" id="banana1" alt="Banana" />
Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:
<img src=" banana.jpg " id=" banana1" name=" banana1" alt="Banana" />
IMPORTANT Compatibility Note:
To make your XHTML compatible with today’s browsers, you should add an extra space before the “/” symbol.
9. The XHTML DTD defines mandatory elements.
All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.
Document Type Definitions (DTD)
-A DTD specifies the syntax of a web page in SGML
-DTDs are used by SGML applications, such as HTML, to specify rules for documents of a particular type, including a set of elements and entity declarations
-An XHTML DTD describes in precise, computer-readable language, the allowed syntax of XHTML markup
There are three XHTML DTDs:
-1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use the strict DOCTYPE when you want really clean markup, free of presentational clutter. This is used together with CSS.
-XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Use the transitional DOCTYPE when you want to still use HTML’s presentational features. This is the most common 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">
Use the frameset DOCTYPE when you want to use HTML Frames to split the web page into two or more frames. This is the least common DTD because frames are not accessible.
The importance of XHTML is to provide support for XHTML document type that can be shared across different means of information appliances such as computers, televisions and mobile phones. XHTML makes it easy to write codes in different platforms. Since it has a stricter rules than HTML, it is much cleaner and web browsers are able to display the page quicker.
With W3C pushing XHTML as the standard, more and more software companies are providing editors toward XHTML-compliancy. As a web designer, writing one way to create a web site makes it easier, and with CSS, the flexibility of designing a site with different styles are endless.
More information can be found at the World Wide Consortium site at www.w3.org or W3 Schools site at www.w3schools.com.
RSS FEED