More on XHTML

Release: 2008-01-27
Jump to Web Standards Articles TOC

Other XHTML 1.0 Flavours

In the previous article we talked about the migration from the depreciated HTML 4.01 to XHTML 1.0 and its Strict flavour. Like the old HTML 4.01, XHTML 1.0 has a Transitional flavour and a Frameset flavour to provide a more relaxed structuring rules and supports elements and attributes that were cut out of the Strict flavour. So these two flavours provide full backwards compatibility with HTML 4.01's Transitional and Frameset flavours.

Transitional

Transitional supports all the features of the Strict flavour except its DOCTYPE is this:

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

Plus it relaxes the strict structuring rules for headings and for forms and adds a collection of extra elements and attributes.

An element to make text underlined using markup in Transitional flavour is the <u> </u> Inline element. But this element is already depreciated and obsoleted by the text-decoration: underline style property.
An inline frame allows you to bring in a webpage to be viewed in a kind of scrollable viewbox within the current webpage (only Internet Explorer 4 and higher, Opera 4 and higher and Generation 5 and higher web browsers support this):

<iframe src="subpage.xhtml" id="subs" name="subs" width="45" height="55" frameborder="1">

  <noframes>

    <a href="subpage.xhtml">View the sub webpage</a>

  </noframes>

</iframe>

You need to have the <noframes> </noframes> element within the <iframe> </iframe> to provide alternative access to the webpage as not all environments support inline frames.
To state that the link or form response will be in a frame such as <iframe> </iframe> you can add a target attribute to links and forms. The value of target would either be the value of a frame's id or olden day name attribute; or _blank to open a new window (environments may override this to open a new tab instead) or _self to appear in the current frame, _parent to appear in the parent frame if in a complex frameset (see Frameset flavour below) or _top to replace the entire frames with the new webpage.

<applet> </applet> is a depreciated element for bringing in Java 1.0 and Java 1.1 Applets; this element has been obsoleted in favour of <object> </object>:

<applet code="Bubbles.class" width="500" height="500">

Java Applet that draws animated bubbles

</applet>

The old fashioned way of applying text sizes, colours and font type was provided by the <font> </font> element. This element is considered dangerous in accessibility perspectives as it concretes the awkward size, colour and type and has been successfully obsoleted by font-size, color, font-family and other style properties that allow much greater flexibility and precision. As a result most webpage authors have now banned the use of <font> </font> elements.

Plus support for some old presentational attributes that are now obsoleted by style properties. These presentational attributes include: for the <body> </body> element - link, alink, vlink for concreting link colours, text for concreting normal text colour, background for concreting a background image; for the <body> </body> and table related elements - bgcolor for concreting background colours. Also width, height, vspace and hspace for element dimensions and padding/margins.

Frameset

Frameset flavour has the same support as the Transitional flavour apart from these differences: the DOCTYPE is:

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

and instead of the <body> </body> element it has a <frameset> </frameset> element to display more than one webpage in a single document effect - such as a menu in one frame and the details of a menu item in the other. The start tag may have either a rows attribute with a comma separated list of percentage or number values. Each value is the size of a frame in the frameset where the first value is for the first frame and so on. Each of those frames are displayed vertically in the frameset. Or cols attribute is the same but the frames are displayed horizontally in the frameset.
A frame is stated as <frame src="" id="" name="" title="" frameborder="" /> empty elements. The src references a webpage as a URI to display in the frameset. id is for fragment identification, styling and script use, name is an olden day form of the id, title is to provide any accessible information to describe the relationship of that frame in the frameset. To control whether the frame has a border or not you use frameborder with either a zero for no border or a one for a border.
A <frameset> </frameset> can have one or more frames (although Classic Netscape doesn't support single frame framesets - it shows a complete blank page) and also can contain child <frameset> </frameset> elements to handle complex frames displays and also one <noframes> </noframes> element with a <body> </body> child element and any Transitional markup within that to provide access to information for environments that do not support frames.

Modular XHTML

That was formally the end of the road for Transitional and Frameset flavours as further XHTML families are purely native-XHTML, do not use any depreciated markup and uses Cascade Stylesheets for document layout and presentation. Stage 4, Modular XHTML, has the MIME Type as application/xhtml+xml and are in .xhtml documents or in a dynamic document like PHP but stating the XHTML MIME Type when outputting the processed contents.

The Modularization Of XHTML basically brought all three flavours together and broke collections of elements and attributes into more manageable modules. This allows webpage authors to only use certain modules that they need and add extra ones as well as environments like native-XHTML supporting Web Browsers to only support some modules and support extra ones.

XHTML Modules and their elements and/or attributes:

(Common) Attributes Module: id, class, title, style, (if Intrinsic Events Module is used then onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup are supported here), xml:lang, (if Bi-Directional Module is used than also dir is supported here).
Structure Module: html, head, title, body.
Text Module: div, p, br, h1, h2, h3, h4, h5, h6, address, blockquote, q, abbr, acronym, cite, code, dfn, em, strong, kbd, span, pre, samp, var.
Hypertext Module: a.
List Module: ol, ul, li, dl, dt, dd.
Presentation Module: b, i, hr, sub, sup, big, small, tt.
Edit Module: del, ins.
Bi-Directional Module: bdo.
Basic Tables Module: table, tr, td, th, caption.
(Normal) Tables Module: table, thead, tbody, tfoot, colgroup, col, tr, td, th, caption.
Basic Forms Module: form, input (text, password, checkbox, radio, submit, reset and hidden types), label, select, option, textarea.
(Normal) Forms Module: form, fieldset, legend, input (text, password, checkbox, radio, submit, reset, hidden, button, file and image types), button, label, select, optgroup, option, textarea.
Image Module: img.
Client-Side Image Map Module: map, area, and these attributes: shape, coords for the a element, usemap for img, input (type image) and object elements.
Server-Side Image Map Module: ismap attribute for img and input (type image) elements.
Object Module: object, param.
Frames Module: frameset, frame, noframes.
Target Module: target attribute for link, a, area, base and form elements.
Iframe Module: iframe.
Intrinsic Events Module: onfocus, onblur attributes for a, area, input, label, select, textarea, button elements; onchange attribute on input, select, textarea, button elements; onselect for input, textarea elements; onsubmit, onreset for the form element and onload, onunload attributes for body and frameset elements.
Metainformation Module: meta.
Link Module: link.
Scripting Module: script, noscript.
Stylesheet Module: style (element).
Style Attribute Module: style (attribute).
Base Module: base.
Name Module (Depreciated): name attribute for a, map, form, frame, iframe, img and applet elements if each of their modules are used.
Applet Module (Depreciated): applet.
Legacy Module (Depreciated): basefont, dir, center, font, isindex, menu, s, strike, u; these attributes alink, background, link, text, vlink for the body element; clear attribute for the br empty element; compact, type for ol, ul, dl elements; start attribute for the ol element; type, value for the li element; bgcolor attribute for the body, table, tr, th, td elements; align attribute for div, p, h1, h2, h3, h4, h5, h6, img, table, input, legend, hr and caption elements; the language attribute for the script element; border, hspace, vspace attributes for the img empty element; noshade and size for the hr empty element; width attribute for the pre, th and td elements and finally the height and nowrap attributes for the th and td elements.
Ruby Annotation (New): ruby, rb, rt, rp, rbc, rtc

The (common) Attributes, Structure, Text, Hypertext and List modules are the mandatory minimum modules required for an XHTML Family Document.

XHTML 1.1

XHTML 1.1 is part of the Modular XHTML family providing a new ground for webpage structures. It uses the typical modules of XHTML to closely resemble XHTML 1.0 Strict:
(common) Attributes, Structure, Text, Hypertext, List, Presentation, Edit, Bi-Directional, Tables, Forms, Image, Client-Side Image Map, Server-Side Image Map, Object, Intrinsic Events, Metainformation, Link, Scripting, Stylesheet, Style Attribute, Base and Ruby Annotation Modules.

XHTML 1.1's DOCTYPE is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Differences from XHTML 1.0 Strict include no support for the lang attribute, now taken over purely by xml:lang, and no name attribute for <a> </a>, <img />, <map> </map> and <form> </form>.
Plus it supports the new (Simple or Complex) Ruby Annotation 1.0 module. Ruby Annotations are usually used to provide pronunciation information alongside the main word of text or for other annotations. Simple Ruby comprises of the <ruby> </ruby> Inline element with the <rb> </rb> element as the ruby base surrounding the normal text that you are annotating. Then followed by the <rt> </rt> element as the ruby text that contains the annotation - usually appears above the normal text at a smaller font size:

<ruby>

  <rb>2005-07-14</rb>

  <rt>Year-Month-Day</rt>

</ruby>

produces something like:

Year-Month-Day
2005-07-14

Simple Ruby offers a fallback feature using a pair of <rp> </rp> elements as ruby parentheses (or brackets) that surround the ruby text element:

<ruby>

  <rb>2005-07-14</rb>

  <rp>(</rp>

  <rt>Year-Month-Day</rt>

  <rp>)</rp>

</ruby>

So in environments that do not support Ruby Annotations will produces something like:

2005-07-14(Year-Month-Day)

Complex Ruby does not support the ruby parentheses but <rbc> </rbc> for a ruby base collection surrounding any ruby bases and at least two <rtc> </rtc> for ruby text collections surrounding any ruby texts. Complex Ruby allows for multiple ruby texts to either a single or multiple ruby bases:

<ruby>

  <rbc>

    <rb>2005</rb>

    <rb>07</rb>

    <rb>14</rb>

  </rbc>

  <rtc>

    <rt>Year</rt>

    <rt>Month</rt>

    <rt>Day</rt>

  </rtc>

  <rtc>

    <rt rbspan="3">Release Date</rt>

  </rtc>

</ruby>

The <rt> </rt> element may have an rbspan attribute for the ruby text to span over multiple ruby bases. Only one <rbc> </rbc> and one or two <rtc> </rtc> elements are allowed in complex ruby. One or more <rb> </rb> elements can be in an <rbc> </rbc> element. One or more <rt> </rt> elements can be in an <rtc> </rtc> element. <rb> </rb> and <rt> </rt> elements can have Inline-level elements and text within them. Only text can be within <rp> </rp> elements.

XHTML Basic 1.0

For low memory and/or processing environments like Personal Digital Assistants (PDAs) and web-enabled mobile phones the Modular XHTML family has an XHTML Basic 1.0 which uses only the basic set of modules to make up an XHTML document:
(common) Attributes, Structure, Text, Hypertext, List, Basic Tables, Basic Forms, Image, Object, Metainformation, Link and Base Modules.

XHTML Basic 1.0's DOCTYPE is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

And again no name attribute for <a> </a>, <img /> and <form> </form> elements and no lang attribute.
Wireless Markup Language (WML) 2.0 and its successor XHTML Mobile Profile are based on XHTML Basic 1.0.

XHTML 2.0

XHTML 2.0 is currently still in development by W3C's XHTML2 Working Group but a lot of features have been re-evaluated. This will be one of the possible XHTML document structures providing support for more document structure, internationalisation, accessibility, extensibility, multiple moulding - can be used by different categories of devices (desktop, laptop, handheld, embedded). Layout and presentation is handled by Stylesheets such as Cascade Stylesheets. XHTML 2.0 provides an updated collection of modules and uses existing XML technologies that are defined specifically for their topic such as instead of forms XHTML 2.0 will use XForms that provide built-in validation and tasks to handle today's use of form features. Plus instead of events attributes it will use XML Events - an event framework, removes the restricted requirement of hardwired events especially as new devices are now enabling Web or XML processing. XFrames (also still in development) will provide a more realistic way of multiple pane webpage display.

Built-in support for website menus will be available through the <nl> </nl> Navigation List along with a <label> </label> and more than one <li> </li> list items.
Most of the elements in XHTML 2.0 are normal elements to provide a more natural fallback and accessibility features. Such as the <img src="diagrampattern.png" alt="A diagram comparing the climate patterns as a Portable Network Graphic" /> empty element in XHTML 2.0 is:

<img src="diagrampattern.png" srctype="image/png">A diagram comparing the climate patterns as a Portable Network Graphic</img>

allowing the alternate content to be more than just simple plain text.
<meta/> and <link/> elements are now normal elements with <meta></meta> being able to have text and some inline elements within it and <link></link> can have nested <meta></meta> and/or <link></link> elements within it.
The role attribute allow's a space separated list of terms identifying what the element is for such as main (main content), navigation, note, seealso are a few of the XHTML 2.0 specifics. Other terms can be used as long as they are bound to a non-XHTML 2.0 namespace.

The <hr /> horizontal rule has been renamed to <separator/> as it will not always be horizontal and may have different presentations. Table's <col/> and object's <param/> are the only other empty elements left in XHTML 2.0.
Instead of the <br /> text break empty element you now surround each line of text (in a text block that you want broken up into lines) within an <l> </l> element, the line element.

Most of the attributes are now global XHTML 2.0 attributes that can be used on any XHTML 2.0 element. These include the embedding attributes (src, srctype and encoding), hyperlink attributes (href, hreftype, hreflang, target, ...) and the metainformation attributes (about, property, role, ...). For instance: to bring in any external object including images:

<div src="diagrampattern.svg" srctype="image/svg+xml">

  <p src="diagrampattern.png" srctype="image/png">

    <div src="diagrampattern.jpg" srctype="image/jpeg">

      <span class="fancyDisplay audiostyling">

        <l>A diagram comparing the climate patterns.</l>

        <l>The particles comprise ... </l>

      </span>

    </p>

  </div>

</div>

So in the division it tries to render a Scalable Vector Graphic of the image. If the environment can't handle SVG images or can't access the image then it would fallback on the division's element content - the second div element. This inner div would try to render the image as a Portable Network Graphic. But again if it can't it would fallback onto the paragraph to try and render the image as a JPEG. In case the environment can't handle or find that then it will fallback to the span providing a (visual and audible) styling of a multiple line transcript describing the important information held within the images.

New section and heading elements have been introduced. These elements have no fixed level indication of structure unlike the (still supported) <h1> </h1> ... <h6> </h6> elements. The <section> </section> and <h> </h> provide a generic section element and a generic section heading:

<body>

  <h>Website or Page level heading</h>

  <section>

    <h>Initial Section</h>

    <p><l>Initial paragraphs, etc</l>...</p>...

    <section>

      <h>A Sub section</h>

      <p><l>A sub section of information, etc</l>...</p>...

      <section>

        <h>And On</h>

        <p><l>And on more sub-sub section's information, etc</l>... </p>...

      </section>

    </section>

  </section>

</body>

With the new section, heading and line elements you can create automatic section, heading and line numbering using Cascade Stylesheet's number counter features.
As there are these changes to the language XHTML 2.0 has its own different XML Namespace URI currently as: http://www.w3.org/2002/06/xhtml2/.

Web Standards Articles TOC

Interesting Links for Web Standards Articles

Depreciated but archived:

Legend Scrolls