Archives

Web Page Width and Fixed vs. Fluid Designs (current)

What is XML, Why and How Is It Used? (June 11, 2008)

Web Careers: Job Titles and Skills (January 15, 2008)

What is XHTML? (December 15, 2007)

AJAX and Spry (September 18, 2007)

HTML 5 and XHTML 2.0? (July 20, 2007)

HTML Reference - Learn HTML Tags (April 6, 2007)

Amazing Internet/Web Advancements (March 26, 2007)

Web Design and Development Process (March 24, 2007)

Firefox, FoxIt, TerraGen, and Expression Web (March 5, 2007)


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:

  1. DocType - XHTML documents must begin with a valid XHTML DocType declaration.
  2. 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">
    	  
  3. Root Element – The root of the document must designate the namespace. This goes after the DocType tag.
  4. Valid: <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
  5. Lowercase – All tags (element and attribute) must be lowercase.
  6. Invalid: <IMG SRC="header.jpg" ALT="ABC Heading Image">
    Valid: <img src="header.jpg" alt="ABC Heading Image">
    	  
  7. No Empty Tags – All tags in XHTML must be closed.
  8. Invalid: <img src="car.jpg">
    Valid: <img src="car.jpg"></img>    or    <img src=”car.jpg” />
    	   
  9. 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.
  10. 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>
    	   
  11. Quotations - All attribute values must be encased in double quotes.
  12. Invalid: <table width=500>
    Valid: <table width="500">
    	   
  13. Abbreviations - All attributes must written be long form and not abbreviated or minimized.
  14. Invalid: <input type="radio" name="option" checked />
    Valid: <input type="radio" name="option" checked="checked" />