Web Tips and News
Bookmark this web page to keep up on the latest news and techniques in web development.
What is XHTML? Posted: December 15, 2007
XHTML has been planned as the predecessor to HTML. It is the merging of HTML and XML (or reformulation of HTML as an XML application). XHTML, which leverages XML, is intended to add the following capabilities to web pages:
- XHTML would require web pages to be written using stricter, well-formed code (unlike XHTML doucments, HTML allowed syntactical errors to be overlooked, which could cause web browsers to interpret and display the web pages diferently).
- XHTML requires the content of web pages (the HTML) be seperated from the presentation, or formatting, of the web page using Cascading Style Sheets (CSS). The results in cleaner, feaster, more maintainable, flexible and efficient web pages.
- XHTML improves the accessibility and portability of web pags allowing them to be displayed on any device (PDA, cell phone, etc.), as well by screen readers and other adaptive technology.
- XHTML is extensible, meaning new tags can be added to it via 'namespaces', and other XML tools can be used with it, such as Scalable Vector Graphics (SVG), Synchronized Multimedia Integration Language (SMIL), and Wireless Markup Language (WML), Really Simple Syndication/Rich Site Summary (RSS), tools that allow XHTML documents to be converted to PDF, MathML, XSL, and XSLT.
Stricter Code/Syntax
As indicated above, coding (and validating your code) as XHTML, requires that more specific syntactical rules must be followed. HTML has always been very lenient with syntactical rules. XHTML is not. These additional, stricter rules in XHTML include:
- DocType - XHTML documents must begin with a valid XHTML DocType declaration.
- Root Element – The root of the document must designate the namespace. This goes after the DocType tag.
- Lowercase – All tags (element and attribute) must be lowercase.
- No Empty Tags – All tags in XHTML must be closed.
- Proper Nesting – XHTML tags must be opened and closed in the correct order, i.e. nested sets of tags/elements must be closed in the reverse order in which they were opened.
- Quotations - All attribute values must be encased in double quotes.
- Abbreviations - All attributes must written be long form and not abbreviated or minimized.
Valid: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Valid: <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
Invalid: <IMG SRC="header.jpg" ALT="ABC Heading Image"> Valid: <img src="header.jpg" alt="ABC Heading Image">
Invalid: <img src="car.jpg"> Valid: <img src="car.jpg"></img> or <img src=”car.jpg” />
Invalid: <b><i>This text is bold and italic</b></i> Valid: <b><i>This text is bold and italic</i></b>
Invalid: (missing closing second <li> tag)
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
Valid:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Invalid: <table width=500> Valid: <table width="500">
Invalid: <input type="radio" name="option" checked /> Valid: <input type="radio" name="option" checked="checked" />