XHTML

  • XHTML (Extensible HyperText Markup Language)
  • An XML markup language
  • Backwards compatible with HTML

Case sensitivity

  • XHTML is case sensitive.

Comments

<!-- Multiple-line
     comment -->
  • Avoid putting "--" or ">" inside a comment, as this is not supported by some web browsers.

Differences from HTML

CDATA sections

  • CDATA section is required for any text containing < or &
  • If possible, put all CSS and JavaScript in separate files (otherwise, if there's any occurrence of <, &, or --, have to wrap the contents in a CDATA section)
<script type="text/javascript">
// <![CDATA[
...
// ]]>
</script>

Well-formed XML

  • XHTML documents must be well-formed
  • XHTML elements must be properly nested
  • Tag names must be in lowercase
  • All XHTML elements must be closed (this does not apply to the DOCTYPE declaration)
<p>...</p>
  • Empty elements must either have an end tag or the start tag must end with /> (with a blank space preceding the forward slash, for compatibility with older browsers).
<br />
<hr />
<img ... />
<input ... />
  • Attribute names must be in lower case
  • Attribute values must be quoted (single or double quotes can be used, as with HTML)
  • Attribute minimization is forbidden (for instance, use <input disabled="disabled" /> instead of <input disabled>)

XHTML DOM

  • Element nodes have to be added individually to the DOM, rather than simply setting the innerHTML of the parent element
  • This is required by certain web browsers to ensure that the XML is well-formed
var child = document.createElement(tagName)        // Create an element node
var child = document.createElementNS(ns, tagName)  // Create an element node with a namespace

child.setAttribute(name, value)

parent.appendChild(child)

Misc

  • The only predefined named entities supported are: &lt; &gt; &amp; &quot; &apos;
  • The id attribute replaces the name attribute
  • If you use the lang attribute in an element, you must also use the xml:lang attribute with the same value.
<div lang="no" xml:lang="no">Text</div>
  • The XHTML DTD defines mandatory elements
  • The attribute xmlns="http://www.w3.org/1999/xhtml" can be omitted from the <html> tag (as that value is used by default).

DOCTYPE

  • The XHTML DTD (Document Type Definition) must be specified in the DOCTYPE declaration.
  • The DOCTYPE declaration must be on the first line of the XHMTL file (unless it's preceded by an XML prolog).
  • The DOCTYPE declaration is only used for validating a page; web browsers don't use it.

Quirks mode
  • Quirks mode
  • [Almost] Standards mode
  • IE <= 5 is always in Quirks mode
  • Mode is triggered by the doctype used (no doctype means Quirks mode)
  • Almost Standards mode is the same as Standards mode except for the vertical sizing of table cells

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 HTML for data and presentation
  • Useful for supporting web browsers that don't understand CSS
  • Quirks mode: IE6 (with an XML prolog)
  • Almost Standards mode: IE6+, FF, Safari, Chrome, Opera
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Use HTML for data, CSS for presentation
  • Quirks mode: IE6 (with an XML prolog)
  • Almost Standards mode: IE6/7
  • Standards mode: IE8, FF, Safari, Chrome, Opera
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • Use HTML for data, CSS for presentation
  • Quirks mode: IE6 (with an XML prolog)
  • Almost Standards mode: IE6/7
  • Standards mode: IE8, FF, Safari, Chrome, Opera

 

Parent URL: 
category/data
Resources URL: 
notes/xhtml/resources
Sources URL: 
notes/xhtml/sources
Topic type: 
Topic

See Also