Xhtml References

01/08/2009 11:29

Differences Between XHTML And HTML



How To Get Ready For XHTML

XHTML is not very different from the HTML 4.01 standard.

So, bringing your code up to the 4.01 standard is a good start. Our complete HTML 4.01 reference can help you with that.

In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip ending tags (like </p>).

Happy coding!


The Most Important Differences:

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML documents must have one root element

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:

This text is bold and italic

In XHTML, all elements must be properly nested within each other, like this:

This text is bold and italic

Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags.

This is wrong:

      <li>Coffee</li>
      <li>Tea
        <ul>
          <li>Black tea</li>
          <li>Green tea</li>
        </ul>
      <li>Milk</li>
    
                

    This is correct:

        <li>Coffee</li>
        <li>Tea
          <ul>
            <li>Black tea</li>
            <li>Green tea</li>
          </ul>
        </li>
        <li>Milk</li>
      
                  

      Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.


      XHTML Elements Must Always Be Closed

      Non-empty elements must have an end tag.

      This is wrong:

      This is a paragraph

      This is another paragraph

      This is correct:

      This is a paragraph

      This is another paragraph

       


      Empty Elements Must Also Be Closed

      Empty elements must either have an end tag or the start tag must end with />.

      This is wrong:

      A break: 
      A horizontal rule: 
      An image: Happy face

      This is correct:

      A break: 
      A horizontal rule: 
      An image: Happy face

       


      XHTML Elements Must Be In Lower Case

      The XHTML specification defines that the tag names and attributes need to be lower case.

      This is wrong:

      
                  

      This is a paragraph

      
                  

      This is correct:

      
                  

      This is a paragraph

      
                  

       


      XHTML 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:

      
                  
       ... 
       ... 
      
                  

       

       

      XHTML Syntax

      previousnext


      Some More XHTML Syntax Rules

      • Attribute names must be in lower case
      • Attribute values must be quoted
      • Attribute minimization is forbidden
      • The id attribute replaces the name attribute
      • The XHTML DTD defines mandatory elements

      Attribute Names Must Be In Lower Case

      This is wrong:

      This is correct:

       


      Attribute Values Must Be Quoted

      This is wrong:

      This is correct:

       


      Attribute Minimization Is Forbidden

      This is wrong:

      
                  

      This is correct:

      
                  

      Here is a list of the minimized attributes in HTML and how they should be written in XHTML:

      HTML

      XHTML 

      compact

      compact="compact"

      checked

      checked="checked"

      declare

      declare="declare"

      readonly

      readonly="readonly"

      disabled

      disabled="disabled"

      selected

      selected="selected"

      defer

      defer="defer"

      ismap

      ismap="ismap"

      nohref

      nohref="nohref"

      noshade

      noshade="noshade"

      nowrap

      nowrap="nowrap"

      multiple

      multiple="multiple"

      noresize

      noresize="noresize"

       


      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.

      This is wrong:

      This is correct:

      Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:

      IMPORTANT Compatibility Note:

      To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.


      The Lang Attribute

      The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.

      If you use the lang attribute in an element, you must add the xml:lang attribute, like this: 

      Heia Norge!

       


      Mandatory XHTML 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.

      This is a minimum XHTML document template:

      
                  
      
                  
      
                  
      Title goes here
      
                  
      
                  
      
                  
      
                  

      XHTML DTD

      previousnext


      The most common DTD is XHTML Transitional.


      <!DOCTYPE> Is Mandatory

      An XHTML document consists of three main parts:

      • the DOCTYPE declaration
      • the <head> section
      • the <body> section

      The basic document structure is:

      
                  
      
                  
      
                  
      ... 
      
                  
       ... 
      
                  

      Note: The DOCTYPE declaration is always the first line in an XHTML document!


      An XHTML Example

      This is a simple (minimal) XHTML document:

      
                  
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
                  
      
                  
      simple document
      
                  
      
                  

      a simple paragraph

      
                  
      
                  

      The DOCTYPE declaration above defines the document type. The rest of the document looks like HTML.


      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:

      • STRICT
      • TRANSITIONAL
      • FRAMESET

      XHTML 1.0 Strict

      
                  
      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. Use together with CSS.

      XHTML 1.0 Transitional

      
                  
      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.

      XHTML 1.0 Frameset

      
                  
      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.

      XHTML HowTo

      previousnext


      How W3Schools Was Converted To XHTML

      W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by Hege Refsnes and Ståle Refsnes.

      To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules of the previous chapters. The following steps were executed (in the order listed below):


      A DOCTYPE Definition Was Added

      The following DOCTYPE declaration was added as the first line of every page:

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

      Tip: Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML.


      Lowercase Tags And Attribute Names

      Since XHTML is case-sensitive, and only accept lowercase tags and attributes, a general "find-and-replace" function was executed to replace all uppercase tags with lowercase tags. The same was done for attribute names.


      All Attribute Values Were Quoted

      The XHTML 1.0 Recommendation states that all attribute values must be quoted, so every page in W3Schools.com was checked to see that attribute values were quoted.


      Empty Tags: <hr> , <br> and <img>

      Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />.

      A general "find-and-replace" function was executed to swap the tags.

      We decided not to close the <img> tags with </img>, but with  /> at the end of the tag. This was done manually.


      The Web Site Was Validated

      Finally, all our pages were validated against the official W3C DTD Validator:

      W3C XHTML Validator.

      A few more errors were found and edited manually. The most common error was missing </li> tags in lists.

      We could also have used a converting tool like HTML TIDY.

      Dave Raggett's HTML TIDY is a free tool for cleaning up HTML code. It works great on the hard-to-read markup, and it can help to identify where you need to pay further attention on making your pages more accessible to people with disabilities.

      XHTML Validation

      PreviousNext


      An XHTML document can be validated with W3C's validator.


      Validate XHTML With A DTD

      Before an XHTML file can be validated, a correct DTD must be added as the first line of the file.

      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"

      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"

      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"

       


      Validate Your XHTML With The W3C Validator

      Input a web address in the box below:

      XHTML Modularization

      PreviousNext


      The XHTML modularization-model defines the modules of XHTML.


      Why XHTML Modularization?

      XHTML contains most of the functionality a web developer will need.

      For some purposes XHTML is too large and complex, and for other purposes it's too simple.

      By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for small devices, or combined with other XML standards in more complex applications.

      With modular XHTML, designers can:

      • Choose the elements to be supported by a device
      • Simplify XHTML for small devices
      • Extend XHTML for complex applications by adding new XML functionality (like MathML, SVG, Voice and Multimedia)
      • Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices)

      XHTML Modules

      W3C has split the definition of XHTML into 28 modules:

      Module name

      Description

      Applet Module

      Defines the deprecated* applet element

      Base Module

      Defines the base element

      Basic Forms Module

      Defines the basic forms elements

      Basic Tables Module

      Defines the basic table elements

      Bi-directional Text Module

      Defines the bdo element

      Client Image Map Module

      Defines browser side image map elements

      Edit Module

      Defines the editing elements del and ins

      Forms Module

      Defines all elements used in forms

      Frames Module

      Defines the frameset elements

      Hypertext Module

      Defines the a element

      Iframe Module

      Defines the iframe element

      Image Module

      Defines the img element

      Intrinsic Events Module

      Defines event attributes like onblur and onchange

      Legacy Module

      Defines deprecated* elements and attributes

      Link Module

      Defines the link element

      List Module

      Defines the list elements ol, li, ul, dd, dt, and dl

      Metainformation Module

      Defines the meta element

      Name Identification Module

      Defines the deprecated* name attribute

      Object Module

      Defines the object and param elements

      Presentation Module

      Defines presentation elements like b and i

      Scripting Module

      Defines the script and noscript elements

      Server Image Map Module

      Defines server side image map elements

      Structure Module

      Defines the elements html, head, title and body

      Style Attribute Module

      Defines the style attribute

      Style Sheet Module

      Defines the style element

      Tables Module

      Defines the elements used in tables

      Target Module

      Defines the target attribute

      Text Module

      Defines text container elements like p and h1

      * Deprecated elements should not be used in XHTML.

      HTML 4.01 / XHTML 1.0 Reference

      PreviousNext


      Ordered Alphabetically

      DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset

      Tag

      Description

      DTD

      <!--...-->

      Defines a comment

      STF

      <!DOCTYPE> 

      Defines the document type

      STF

      <a>

      Defines an anchor

      STF

      <abbr>

      Defines an abbreviation

      STF

      <acronym>

      Defines an acronym

      STF

      <address>

      Defines an address element

      STF

      <applet>

      Deprecated. Defines an applet

      TF

      <area>

      Defines an area inside an image map

      STF

      <b>

      Defines bold text

      STF

      <base>

      Defines a base URL for all the links in a page

      STF

      <basefont>

      Deprecated. Defines a base font

      TF

      <bdo>

      Defines the direction of text display

      STF

      <big>

      Defines big text

      STF

      <blockquote>

      Defines a long quotation

      STF

      <body>

      Defines the body element

      STF

      <br>

      Inserts a single line break

      STF

      <button>

      Defines a push button

      STF

      <caption>

      Defines a table caption

      STF

      <center>

      Deprecated. Defines centered text

      TF

      <cite>

      Defines a citation

      STF

      <code>

      Defines computer code text

      STF

      <col>

      Defines attributes for table columns 

      STF

      <colgroup>

      Defines groups of table columns

      STF

      <dd>

      Defines a definition description

      STF

      <del>

      Defines deleted text

      STF

      <dir>

      Deprecated. Defines a directory list

      TF

      <div>

      Defines a section in a document

      STF

      <dfn>

      Defines a definition term

      STF

      <dl>

      Defines a definition list

      STF

      <dt>

      Defines a definition term

      STF

      <em>

      Defines emphasized text 

      STF

      <fieldset>

      Defines a fieldset

      STF

      <font>

      Deprecated. Defines text font, size, and color

      TF

      <form>

      Defines a form 

      STF

      <frame>

      Defines a sub window (a frame)

      F

      <frameset>

      Defines a set of frames

      F

      <h1> to <h6>

      Defines header 1 to header 6

      STF

      <head>

      Defines information about the document

      STF

      <hr>

      Defines a horizontal rule

      STF

      <html>

      Defines an html document

      STF

      <i>

      Defines italic text

      STF

      <iframe>

      Defines an inline sub window (frame)

      TF

      <img>

      Defines an image

      STF

      <
      Back