XHTML Quick Guide

 
 
This guide contains information how to create XHTML (eXtensible HyperText Markup Language ) pages. XHTML is a combination of HTML and XML.

More information about XHTML can be found at:
http://www.w3.org/MarkUp/

rss feed

Quick guides






XHTML 1.0 rules




Procedure
  1. Apply XML declaration.
    According to the XML 1.0 specification, all processors are required to automatically support (and detect) the UTF-8 and UTF-16 encodings. If you use one of these two encodings when serializing your documents, you don't need an XML declaration (unless you need to specify version or standalone information).

    Example:
    <?xml version="1.0" encoding="iso-8859-1"?>


  2. Apply the DOCTYPE declaration.

    All XHTML documents must have a DOCTYPE declaration at the FIRST line of the document. XHTML 1.0 specifies three Document Type Definitions (DTD):

    Strict
    Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.
    The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Transitional
    Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.
    The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Frameset
    Use this when you want to use HTML Frames to partition the browser window into two or more frames.
    The Frameset DTD includes everything in the transitional DTD plus frames as well.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


    Wrong example:
    <html>
    ...
    </html>

    Correct example:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    ...
    </html>


    Note: The most commonly used DTD is the XHTML Transitional.

  3. XHTML documents must be well-formed.

    The html, head and body elements must be present, and the title must be present inside the head element.

    The xmlns attribute inside the <html> tag is required in XHTML. However, the validator on w3.org does not complain when this attribute is missing in an XHTML document. This is because "xmlns=http://www.w3.org/1999/xhtml" is a fixed value and will be added to the <html> tag even if you do not include it.

    Wrong example:
    <html>
    <body> ... </body>
    <head> ... </head>
    </html>

    Correct example:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> ... </title>
    </head>
    <body> ... </body>
    </html>


  4. All XHTML elements must be properly nested.

    Wrong example:
    <b><i>hello world</b></i>

    Correct example:
    <b><i>hello world</i></b>


  5. All tag names must be in lowercase.

    Wrong example:
    <A NAME="MyDemo">Demo</A>

    Correct example:
    <a name="MyDemo">Demo</a>


  6. All XHTML elements must be closed.

    Wrong example:
    <p>hello world

    Correct example:
    <p>hello world</p>


  7. Attribute minimization is forbidden.

    Wrong example:
    <input checked>
    <input disabled>
    <input readonly>
    <option selected>
    <dl compact>
    <frame noresize>

    Correct example:
    <input checked="checked" />
    <input disabled="disabled" />
    <input readonly="readonly" />
    <option selected="selected" />
    <dl compact="compact">
    <frame noresize="noresize" />




  8. All empty elements must be closed.
    • <hr />
    • <br />
    • <img ... />
    • <meta ... />
    • <param ... />


    Wrong example:
    hello world<br>

    Correct example:
    hello world<br />


    Note 1:
    You should add an extra space before the "/" symbol like this: <br  />. This is needed to make XHTML compatible with today's browsers.

    Note 2:
    For an empty paragraph do not use the minimized form (e.g. use <p></p> and not <p />).

  9. All attribute names must be in lower case.

    Wrong example:
    <table WIDTH="500" BORDER="0">
    ...
    </table>

    Correct example:
    <table width="500" border="0">
    ...
    </table>


  10. All attribute values must be quoted.

    Wrong example:
    <table width=300 border=0>
    ...
    </table>

    Correct example:
    <table WIDTH="500" border="0">
    ...
    </table>


  11. The id attribute replaces the name attribute.

    Wrong example:
    <img src="demo.gif" name="demo_pic" />

    Correct example:
    <img src="demo.gif" id="demo_pic" />


    Note: The name attribute is used in the following HTML tags:
    a, applet, form, frame, iframe, img, and map. To be compatible with older browsers, you should use the name and id attributes with identical values:

    <img src="demo.gif" id="demo_pic" name="demo_pic" />


  12. Element Prohibitions.

    It is not allowed to nest certain elements (e.g. <a ..>) within another elements (e.g. <a ..>) to any descendant depth. These elements are:

    Element Prohibition
    a must not contain other a elements.
    pre must not contain the img, object, big, small, sub, or sup elements.
    button must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements.
    label must not contain other label elements.
    form must not contain other form elements.


    Wrong example:
    <a name="demo">
    <a href="http://www.mobilefish.com">mobilefish</a>
    </a>

    Correct example:
    <a name="demo"></a>
    <a href="http://www.mobilefish.com">mobilefish</a>


  13. Apply the language attribute.

    If the lang attribute is used in an element, you must add the xml:lang attribute. Note: The lang attribute specifies the language of the content within an element.

    Wrong example:
    <div lang="en">Wrong!</div>
    <div lang="nl">Fout!</div>

    Correct example:
    <div lang="en" xml:lang="en">Wrong!</div>
    <div lang="nl" xml:lang="nl">Fout!</div>


  14. Script and style elements.

    In XHTML, the script and style elements are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as &lt; and &amp will be recognized as entity references by the XML processor to < and & respectively. Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of these entities.

    Wrong example:
    <script type="text/javascript">
    ... unescaped script content ...
    </script>

    Correct example:
    <script type="text/javascript">
    //<![CDATA[
    ... unescaped script content ...
    //]]>
    </script>


    Note 1: Wrapping your script with CDATA is only needed for embedded scripts, not for externally referenced instances. Unfortunately, most browsers do not support CDATA sections (the standard XML method for including text containing special characters) so the safest option is to move your client-side scripts out to separate files and include them using the script element's src attribute.

    Note 2: Use external style sheets if your style sheet uses < or & or ]]> or --. Note that XML parsers are permitted to silently remove the contents of comments. Therefore, the historical practice of "hiding" scripts and style sheets within "comments" to make the documents backward compatible is likely to not work as expected in XML-based user agents.