ARIA forms part of the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) which succeeds WCAG 1.0 and which are both at working draft level with the W3C.

It has been developed to address the accessibility problem that occurs when rich interaction semantics are added outside of the markup. When this happens the markup no longer expresses the information needed to populate accessibility metadata which is then mapped by the browser to the platform accessibility APIs.

WAI-ARIA provides a framework for providing proper semantics to HTML elements that provide information about:

• the role of the element within the page and in relation to other elements – the ARIA specification provides an ontology of roles that can be attached to content
• the states and properties of elements which are used to declare important attributes of an element that affect and describe interaction. These are categorised as widget attributes, live region attributes, drag-and-drop attributes, relationship attributes

The target audience for WAI-ARIA includes user agents, assistive technology, authors who create content, authoring tools and conformance checkers. The relationship between the user agent, the accessibility API and the assistive technology is best illustrated below:

My next step was to implement WAI-ARIA and test it on my Mac accessibility software (Universal Access). This is where my headaches begun. ARIA does not validate on standard DTD’s and only has limited support from HTML 5.0. ARIA is also only party supported by browsers and accessibility software making it difficult to know which bits to implement. Furthermore, the W3C Validator for HTML 5.0 only has limited support for ARIA conformance making it difficult to confirm whether you’re implementing it correctly.

Despite these hurdles I decided that perhaps before I tried to implement WAI-ARIA I should test some real live examples using the accessibility software on my Mac. The learning curve for using Universal Access was steep but in the end I was using it on Safari. For obvious reasons, the first website I visited was the RNIB (Royal National Institute of the Blind). Whilst there are some obvious improvements in accessible navigation including the Web Item Rotor and Web Auto Spots, overall I could find no implementation of ARIA on their website.

I spent the next few hours trying to find real live examples or demonstrations of WAI-ARIA. I found a few websites which I have referenced below but to be honest either the examples didn’t work i.e. they weren’t supported by Safari or Universal Access, or I didn’t quite grasp the concepts.

In conclusion, the concept of WAI-ARIA is a good one however, it requires a considerable amount of effort to implement and to date has limited support. Furthermore at the time of writing there are very few examples of ARIA being implemented. For the time being I am going to put WAI-ARIA on hold, perhaps when the specification is recommended by the W3C and HTML 5.0 is more widely implemented then I will come back to it.

RDFas (Resource descriptor framework attributes) and Microformats are 2 technologies which can be used to to structure data. More specifically, RDFas and Microformats are a set of (X)HTML attributes designed to augment human visible text by encoding semantic information read by machines. This information is typically hidden from users and provides metadata used by machines. This metadata can be used by applications that collect data about on-line resources such as browsers and desktop applications including search engines, e-mail clients, scheduling software, communication software and map software.

For more than a year Yahoo and, more recently, Google have been using RDFas and Microformats to structure data which is indexed to provide ‘Rich Snippets’, a convenient summary of information about a web page displayed as a search result. Certainly, the use of structured data by search engines will see a huge leap in its implementation across the web.

In this blog I will briefly introduce Microformats and RDFas as well as give a simple of example of how to implement it in web pages.

Microformats

Microformats indicate the presence of metadata using the following attributes:

• class
• rel

These are wrapped in HTML elements with specific class names. Specific Microformats have been developed to semantically markup particular types of information. For example hCard has the following properties (class names)

• vcard {1} : MUST be present exactly once
• adr*
• +type [work|home|pref|postal|dom|intl]?
• +post-office-box?
• +street-address*
• +extended-address?
• +region?
• +locality?
• +postal-code?
• +country-name?
• agent*
• bday? (ISO date)
• class? confidentiality/access classification of the entire hCard
• category*
• email*
• +type?
• +value?
• fn {1} : MUST be present exactly once
• geo?
• +latitude?
• +longitude?
• key*
• label*
• logo*
• mailer*
• n?
• +honorific-prefix*
• +given-name*
• +additional-name*
• +family-name*
• +honorific-suffix*
• nickname*
• note*
• org*
• +organization-name?
• +organization-unit*
• photo*
• rev? datetime of the revision of the entire hCard
• role*
• sort-string?
• sound*
• title*
• tel* (Note E.123 for formatting info.)
• type [home|work|pref|fax|cell|pager]?
• value?
• tz? timezone of the person
• uid? applies to the entire hCard
• url*

Key
* = OPTIONAL, and MAY occur more than once
+ = MUST be present, and MAY occur more than once
? = OPTIONAL, but MUST NOT occur more than once
[square brackets] = list of common values
(parentheses) = data format
pref = preferred
dom = domestic
intl = international
cell = mobile

A simple example

<address class="vcard">
<a class="fn org url" href="http://www.absoluteorange.com/">Absolute Orange</a>
</address>

which is displayed as:

RDFa

RDFa became a W3C recommendation in October 2008. It is an extension to RDF, a lightweight multipurpose extensible metadata description and syndication format. Whilst RDFa is XML it can be used in HTML4 pages and whilst they will not alter the display of HTML pages, they may not validate. HTML 5 are working on a mechanism for embedding RDF in HTML. Perhaps the best time to use RDFa is when there is no supporting Microformat.

RDFa use the following attributes:

• about – a URI or CURIE specifying the resource the metadata is about; in its absence it defaults to the current document
• rel and rev – specifying a relationship or reverse-relationship with another resource
• href, src and resource – specifying the partner resource
• property – specifying a property for the content of an element
• content – optional attribute that overrides the content of the element when using the property attribute
• datatype – optional attribute that specifies the datatype of text specified for use with the property attribute
• typeof – optional attribute that specifies the RDF type(s) of the subject (the resource that the metadata is about)

In RDFa when specifying terms within the property attribute, the meaning of the term must be linked to a vocabularly whose namespace must be included. There are a number of existing vocabularies for example the Dublin Core vocabulary which has the following properties:

<rdf:Description rdf:about=”http://purl.org/dc/elements/1.1/”>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/title”>
<rdfs:label xml:lang=”en-US”>Title</rdfs:label>
<rdfs:comment xml:lang=”en-US”>A name given to the resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/creator”>
<rdfs:label xml:lang=”en-US”>Creator</rdfs:label>
<rdfs:comment xml:lang=”en-US”>An entity primarily responsible for making the resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/subject”>
<rdfs:label xml:lang=”en-US”>Subject</rdfs:label>
<rdfs:comment xml:lang=”en-US”>The topic of the resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/description”>
<rdfs:label xml:lang=”en-US”>Description</rdfs:label>
<rdfs:comment xml:lang=”en-US”>An account of the resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/publisher”>
<rdfs:label xml:lang=”en-US”>Publisher</rdfs:label>
<rdfs:comment xml:lang=”en-US”>An entity responsible for making the resource available.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/contributor”>
<rdfs:label xml:lang=”en-US”>Contributor</rdfs:label>
<rdfs:comment xml:lang=”en-US”>An entity responsible for making contributions to the resource.
</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/date”>
<rdfs:label xml:lang=”en-US”>Date</rdfs:label>
<rdfs:comment xml:lang=”en-US”>A point or period of time associated with an event in the lifecycle of the resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/type”>
<rdfs:label xml:lang=”en-US”>Type</rdfs:label>
<rdfs:comment xml:lang=”en-US”>The nature or genre of the resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/format”>
<rdfs:label xml:lang=”en-US”>Format</rdfs:label>
<rdfs:comment xml:lang=”en-US”>The file format, physical medium, or dimensions of the resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/identifier”>
<rdfs:label xml:lang=”en-US”>Identifier</rdfs:label>
<rdfs:comment xml:lang=”en-US”>An unambiguous reference to the resource within a given context.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/source”>
<rdfs:label xml:lang=”en-US”>Source</rdfs:label>
<rdfs:comment xml:lang=”en-US”>A related resource from which the described resource is derived.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/language”>
<rdfs:label xml:lang=”en-US”>Language</rdfs:label>
<rdfs:comment xml:lang=”en-US”>A language of the resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/relation”>
<rdfs:label xml:lang=”en-US”>Relation</rdfs:label>
<rdfs:comment xml:lang=”en-US”>A related resource.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/coverage”>
<rdfs:label xml:lang=”en-US”>Coverage</rdfs:label>
<rdfs:comment xml:lang=”en-US”>
The spatial or temporal topic of the resource, the spatial applicability of the resource, or the jurisdiction under which the resource is relevant.</rdfs:comment>
+
<rdf:Property rdf:about=”http://purl.org/dc/elements/1.1/rights”>
<rdfs:label xml:lang=”en-US”>Rights</rdfs:label>
<rdfs:comment xml:lang=”en-US”>Information about rights held in and over the resource.</rdfs:comment>

A simple example

<p xmlns:dc="http://purl.org/dc/elements/1.1/" about="http://www.absoluteorange.com/blogs/structured data implementing RDFas and Microformats in web pages">
      In her latest blog
      <cite property="dc:title">Structured data : implementing RDFas and Microformats in web pages</cite>,
      <span property="dc:creator">Amy Varga</span>
      briefly discusses the RDFa and Microformat technologies for implementing structured data in web pagesas.  The blog is due to be published in
      <span property="dc:date" content="2009-09-01">September 2009</span>.
</p>

Unfortunately it was impossible for me to display the above as it stands because Word Press would not allow the xmlns, about, property or content attributes within their HTML elements, presumably because they do not validate.

Conclusion

Whilst there may be much future development and improvement of structured data technologies and indeed the RDFa and Microformat technologies I believe it wise to start implementing these technologies in web pages now.

I like Lightbox. I use it in this website and in Rocklands Boulders because it presents images elegantly and allows for slideshow functionality.

More recently I have had to extend the functionality of Lightbox in 2 ways:

1. Add functionality that resizes the Lightbox overlay if the image presented is larger than the initial overlay dimensions
2. Add functionality that allows users to choose whether to view images at maximum size or half size (this is for users who do not have high Internet speeds)

In this blog I will demonstrate how I have implement this.

Resize the Lightbox overlay if the image is larger than the initial overlay dimensions

This solution is demonstrated at BT Fresca

The Lightbox interface contains a semi-transparent div with an id of ‘jquery-overlay’. The dimensions of the overlay are based on the browser window size as well as the x and y scroll. The problem I experienced was when images being displayed were larger than the jquery-overlay. In the screen shot ‘Lightbox overlay too short’ you can see that the overlay is too short.

To overcome this problem I wrote a function called ‘check_page_height(intImageHeight)’. This function merely calls the lightbox function ‘__getPageSize’ and adjusts the ‘jquery-overlay’ dimensions accordingly. As you will see Opera (in this case version 9.62) required a separate calculation.

Line 265

function check_page_height(intImageHeight){
	//resize overlay if image is bigger than page
	// Get page sizes
	var arrPageSizes = ___getPageSize();
	if ($.browser.opera) {
		body_height=Math.floor(intImageHeight)+Math.floor(arrPageSizes[1])+120;
		$('#jquery-overlay').css({
			width:				arrPageSizes[0],
			height:				body_height
		});
	}
	else {
		$('#jquery-overlay').css({
			width:				arrPageSizes[0],
			height:				arrPageSizes[1]
		});
	}

I called this function twice, once in the function ‘_resize_container_image_box’ just before the lightbox-container-image-box is animated and again in the function ‘_show_image_data’ when the ‘lightbox-image-data-box slides down i.e.

line 300

$('#lightbox-container-image-data-box').slideDown('fast',function(){
           check_page_height(intImageHeight);
});

Be sure to pass the variable intImageHeight to the appropriate Lightbox functions ‘_show_image’ and ‘_show_image_data’ on lines 253, 287, 290, 299 and 300.

Allow users the choice to view images at maximum size or half size

On this Rocklands Boulders page I have 102 photos. Since I am currently working in South Africa slow Internet access is common. I decided that in this case users should have an option for viewing photos at half their size to improve the user experience. I implemented this in Lightbox by:

1. Adding two more properties to the Lightbox settings object namely, ‘multiple_photo_size = false’ and ‘large_image = true’

2. On my web page I set a condition that if the number of images being displayed was greater than 100 the thumbnail link attribute ‘rel’ contained ‘lightbox multiple_photo_size’ as opposed to just ‘lightbox’

3. In the Lightbox function ‘_initialize’ I called my function ‘_check_multiple_photo_size’. This function checks to see if the ‘rel’ attribute contains the string ‘ multiple_photo_size’. If it does then the property ‘ multiple_photo_size’ is set to true i.e.

line 67

function _check_multiple_photo_size(objClicked,jQueryMatchedObj) {
	if (objClicked.getAttribute('rel').search('multiple_photo_size') >= 0) {
		settings.multiple_photo_size = true;
	}
	_start(objClicked,jQueryMatchedObj); // This, in this context, refer to object (link)
                                                               which the user have clicked
	return false;
}

4. In the Lightbox funtion ‘_set_interface’ I append the links for multiple photo sizes to Lightbox interface i.e.

line 150

if (settings.multiple_photo_size == true) {
	$('#lightbox-image-details').prepend('<span style="float:left;" id="photo-size">
        <img src="http://www.rocklandsboulders.com/images/large_image_selected.jpg"
        title="Photos displayed at maximum size"><a href="void(0)" id="small_image">
        <img src="http://www.rocklandsboulders.com/images/small_image_select.jpg"
        title="View photos at half size" alt="View photos at half size" /></a></span>');
}

5. I limited the click area for closing the Lightbox interface so that clicking on my new icons did not close Lightbox i.e.

line 171:

$('#jquery-overlay').click(function() {
	settings.large_image = true;
	_finish();
});

6. You will see that I also reset the ‘large_image’ property to true when the Lightbox interface is closed on line 171, 177 and 424.

7. In the Lightbox function ‘_set_image_to_view’ I set a condition that changed the image src idepending on whether the property ‘large_image’ is set to true or false i.e.

line 223

//adjust image src depending on whether setttings.large_image is true or false
if (settings.large_image == false) {
	imageSrc=settings.imageArray[settings.activeImage][0].split('images');
	imageSrc[1] = imageSrc[1].replace('/', 'images/small_');
	settings.imageArray[settings.activeImage][0] = imageSrc[0]+imageSrc[1];
}
else if (settings.large_image == true && settings.imageArray[settings.activeImage]
[0].search('small_') >= 0){
	settings.imageArray[settings.activeImage][0]
        = settings.imageArray[settings.activeImage][0].replace('small_', '');
}

8. I added the onclick functionality for my new icons i.e.

line 574

function __small_image() {
	$('#small_image').click(function(){
		$('#small_image').unbind();
		settings.large_image = false;
		$('#photo-size').fadeOut('fast', function() {
			$('#photo-size').html('<a href="void(0)" id="large_image">
<img src="http://www.rocklandsboulders.com/images/large_image_select.jpg"
title="View photos at maximum size" alt="View photos at maximum size" />
</a><img src="http://www.rocklandsboulders.com/images/small_image_selected.jpg"
title="Photos displayed at half size">');
				$('#photo-size').fadeIn('fast', function () {;
					__large_image();
					_set_image_to_view();
				});
			});
			return false;
	});
}

function __large_image() {
	$('#large_image').click(function(){
		$('#large_image').unbind();
		settings.large_image = true;
		$('#photo-size').fadeOut('fast', function() {
			$('#large_image').remove();
			$('#photo-size').html('
<img src="http://www.rocklandsboulders.com/images/large_image_selected.jpg"
title="Photos displayed at maximum size" alt="Photos displayed at maximum size" /> </a>
<a href="void(0)" id="small_image">
<img src="http://www.rocklandsboulders.com/images/small_image_select.jpg"
title="View photos at half size">');
				$('#photo-size').fadeIn('fast', function () {;
					__small_image();
					_set_image_to_view();
				});
		});
		return false;
	});
}

9. And finally I called my function ‘__small_image’ on line 198 when the Lightbox interface is set.

Using CSS background-image

The CSS background-image option is quite popular as it allows complete control over the positioning of the list images. However, the problem I had with this option, which can be seen in the first screen grab ‘List using background image’, is that the list images do not float correctly against div.media. The CSS relative:position illustrates that the list images are floated left against the holding div.wrapper. I could find no way to get the list images to float correctly against div.media.

Using CSS list-style-image

By using the CSS list-style-image with list-style-position:inside, which one can see in the second screen grab ‘List using list-style-image’, this works correctly in Firefox i.e. the list images are floating correctly against div.media. Unfortunately however, IE does not position the list images optionally as can be seen in the third screen grab ‘List using list-style-image in IE’. I’ve checked that my list image is a square with no white space on the left. I could find not way to position the list images correctly in IE.

Using CSS list-style-type for IE

The best alternative I could come up with for IE is to resort to list-style-type which correctly positions the list images as can be seen in the fourth screen grab, ‘List using list-style-type in IE’.

Realising there was a problem I needed to find a solution.

Object oriented CSS

Object oriented CSS works in a similar way to Object Oriented Programming (OOP):

• In OOP objects have their own class definitions.  In CSS, selectors (element type selectors, class selectors, ID selectors, attribute selectors and pseudo-classes) have their own style declarations
• In OOP classes inherit each others methods and properties.  In CSS inheritance and the cascade determine which style declaration should be applied to any given element.

  Inheritance is the means by which, in the absence of any specific declarations applied by the CSS cascade, a property value of an element is obtained from its parent element.  Inheritance is a mechanism that’s separate from the cascade: inheritance applies to the DOM (Document Object Model) tree.

  The cascade deals with the style sheet rules.  The cascade combines the importance, origin, specificity, and source order of the applicable style declarations to determine exactly—and without conflict—which declaration should be applied to any given element.

• In OOP classes can be public or private.  Objects automatically inherit public classes.  In CSS, properties that are not automatically inherited from the parent can be inherited by specifying a value or ‘inherit’ for that CSS property, similar to a private class.  Properties that are inherited automatically are similar to public classes.

Properties that inherit:

• color
• font (and related properties)
• letter-spacing
• line-height
• list-style (and related properties)
• text-align
• text-indent
• text-transform
• visibility
• white-space
• word-spacing

Properties that don’t inherit:

• background (and related properties)
• border (and related properties)
• display
• float and clear
• height and width
• margin (and related properties)
• min- and max-height and -width
• outline
• overflow
• padding (and related properties)
• position (and related properties)
• text-decoration
• vertical-align
• z-index

The concept of object oriented CSS is noteworthy.  The principles of the reuse of styles and inheritance / cascade are fundamental in creating an optimal CSS.

Semantic naming of classes and IDs

The semantic naming of classes and IDs is a controversial one.  This concept requires that all classes and IDs be named according to their meaning or role within a web page.  Unfortunately only web developers, designers and author benefit from semantically named classes and IDs.  Web page browsers, screen readers and search engines do not use classes or ID’s to gain more information about a web page.

The benefits to web developers, designers and authors are:

1. Semantically named classes and IDs give more meaning to a web page
2. Semantically named classes and IDs can be stylistically changed in the CSS without having to be renamed in the HTML page

The disadvantage of semantically naming classes and IDs is that it in some cases there is no  logic in naming it semantically.   Yahoo Grids and Blueprint CSS are both CSS frameworks based on grids and both frameworks name their classes based on their presentation.  For example, Blueprint’s <div class=”span-24”> relates to a <div> that spans the entire 960px over 24 columns.

The semantic naming of classes and IDs have their benefits and should be encouraged however, when there is no logical reason to name an element semantically when a name relating to presentation may be more appropriate.  For example, a rounded corner <span> may be named roundedCornerTopLeft.

How to write your CSS

1. Create an element type selectors library
   Defining the design of all HTML elements during the initial stages of web development ensures that all elements that make up a web page, visually communicate their semantic meaning in relation to each other.  It also sets the basic inheritance properties for elements with no further declarations.
2. Define style templates for repeated designs within a web site
   Defining a style template for repeated designs within a web site ensures that they can be consistently and easily repeated throughout the website.  When defining style templates carefully consider redundancy vs dependency.  Should a style be repeated across different class selectors so that a design change in one does not effect all the others?  Or should they be dependent resulting in a design change affecting all associated elements?   In this case you may also consider using  multiple classes to achieve your design.
3. Minimise the use of specific selectors wherever possible and when using them, reference them as specifically as possible.
4. Carefully consider the proximity of the cascade
5. Always consider progressive enhancement and graceful degradation when styling.  For example if your design has rounded corners use the Mozilla and Webkit rounded corners styles.  However, also consider the best way to implement rounded corners in other browsers as well as a design without rounded corners.
6. Remember to check how your page looks with CSS disabled

When deciding how to best insert rich typography into my web pages I implemented 4 technologies namely sIFR, server-side installed fonts, TypeSelect and Cufón which I have reviewed below:

sIFR

sIFR stands for Scalable Inman Flash Replacement and is an ongoing development on the invention made by Shaun Inman in 2003.   sIFR uses JavaScript and the Document Object Model to replace all designated text with Flash rendered text.

Advantages

1. Fairly easy to implement
2. Degrades gracefully
3. Accessible
4. Search engine friendly

Disadvantages

1. Requires a Macromedia Flash plugin
2. Requires Macromedia Flash software to create the font file
3. Online documentation is extremely fragmented
4. Can slow the loading of the web page if used frequently on a web page
5. Requires  careful tweaking of the CSS font size to get the the desired size
6. Overestimates the number of lines required to fit the text which occasionally  leaves the text with a blank line below
7. Does not handle hover states as defined in the CSS
8. Does not handle customisation of text eg. drop shadows

Server side fonts

Server side fonts require font file(s) to be uploaded to the server.  A script written in PHP, Perl, ASP, Java servlets or any other server side programming language creates PNG images of all replacement text.  JavaScript replaces the designated text once it has loaded.

Advantages

1. No Macromedia Flash plugin required
2. Degrades gracefully
3. Accessible
4. Search engine friendly

Disadvantages

1. Writing of the script requires an in depth understanding of the server-side language
2. Forcing a background colour on the heading does not give the best text results
3. Does not use font styles as defined in the CSS to style the font
4. Text cannot be selected

Type Select

Type Select uses a font generator, which converts fonts to a proprietary format. It uses Javascript to create PNG images for each text replacement letter which it inserts into the web page using the element whose style attribute is set to use PNG image as the background image.

Advantages

1. No Macromedia Flash plugin required
2. Degrades gracefully

Disadvantages

1. The font family as to be set within the HTML page
2. Styling on descendant text elements is ignored

Cufón:

Cufón uses a font generator, which converts fonts to a proprietary format, and a rendering engine written in Javascript.  The font generator builds a custom FontForge script based on the user input, runs it and saves the result as an SVG font.  The SVG font is then parsed and SVG paths are converted to VML paths. The resulting document is then converted into JSON with a mix of functional JavaScript. The rendering machine has a core API and two rendering engines, one which renders VML shapes used for Internet Explorer and one which renders as <canvas> element for other browsers.

Advantages

1. Does not require a Macromedia Flash plugin
2. Degrades gracefully
3. Extremely easy to implement
4. Accessible
5. Search engine friendly
6. Good online documentation
7. Lightweight
8. Quick to load even when used more than 10 times on a page
9. Easy to choose different character sets
10. Applies CSS font definitions exactly including hover definitions
11. Applies text customisation like drop shadows

Disadvantages

1. The image replacement text cannot be selected, except weirdly in IE
2. In IE text decoration on the a:hover does not show

Personally, I found Cufón to be the best and most easiest to use.

Most XHTML web pages (including BBC, Times Online and Facebook) are effectively not XML on the web because they are being parsed as HTML not XML.  This is because they generally use a MIME content type of “text/html” as opposed to “application/xhtml+xml”; browsers use MIME type to distinguish between two types of syntax to represent HTML documents namely, HTML serialisation and XML serialisation.

The reason for parsing XHTML pages as HTML and not XML makes sense.  Whilst the DTD’s for HTML and XHTML are both based on SGML, XHTML is a more restrictive subset of SGML meaning that it has very strict syntax rules.  An XML parser will stop processing an invalid page and nothing except an error message will be displayed.  An HTML parser on the other hand is much more complex and lenient.  It uses an error-correcting tag soup parser to display an invalid page to the best of its ability.

In reality the interoperability of the Web means that invalid pages are a reality; content feeds, user generated content, body content (CMS), trackbacks, ad services and widgets can all create invalid pages.  By using an HTML parser the page is displayed regardless of its well-formedness.

The XHMTL 2.0 specification has been in progress since 2001 and is in its eighth public working draft.  It is based solely on XML and is driven by how markup should be used, rather than how markup is currently being used.  It proposes sophisticated and elegant solutions that may also  require a learning curve and it is not backward compatible with XHTML 1.0.

The proposed XForms, which replaces forms in the XHTML 2.0 specification, was the catalyst for the current HTML 5 specification.  In late 2003 Opera intended to prove that it was possible to extend HTML 4′s forms to provide many of the introduced features of XForms 1.0 without requiring browsers to implement rendering machines incompatible with existing HTML.  The draft proposal, presented jointly by Mozilla and Opera, was rejected by the W3C on the grounds that it conflicted with the previously chosen direction for the Web’s evolution.

Subsequently, Apple, Mozilla and Opera announced their intention to continue working on the effort under the Web Hypertext Application Technology Working Group (WHATWG).  In 2006 the W3C expressed interest in the specification, and created an HTML Working Group to work with the WHATWG on the development of the HTML 5 specification.

Whilst the HTML 5 specification aims to be backwards compatible with HTML4.0 and XHTML 1.0 this hasn’t been achieved completely as some elements have new meanings.  The specification focuses on creating a language for web applications as well as the creation of API’s that improve the client side web development environment.

The proposed API’s which include a 2D drawing API, a video and audio API, an offline web application API, an API that allows web applications to register themselves for certain protocols or MIME types, an editing API, a drag and drop API, network API’s and a cross document messaging API will no doubt prove most useful to web developers and is certainly a highlight of HMTL 5 for me.

Over and above that the HTML 5 specification has overwhelming industry support from browsers, search engines, CMS’s and authoring tools.

Perhaps the notion that all documents on the web should be written in an XML format is an ideal one.  Ian Hickson in a conversation about the HTML 5 specification stated that the HTML 5 specification came about because 95% of the Web today is HTML.  He also questioned whether the web would have been successful if it showed error messages whenever something was the least bit wrong.  Ian estimated that 93% of documents on the web have markup errors which would mean that over 90% of the web could not be browsed.

Neither specification has been implemented in its entirety and the HTML 5 specification looks unlikely to reach its deadline of 2010.  Saying that the <canvas> feature has been widely implemented and with such industry support implementation of some sections may take place sooner.

Since the XHTML 2.0 specification is not backwards compatible with XHTML 1.0 I am going to embrace the HTML 5 specification until the XHTML 2.0 specification gets implemented.

References:

• Andersson, D. 2007. HTML5, XHTML2, and the Future of the Web [Online].  Available: HTML5, XHTML2, and the Future of the Web [26th May 2009]
• WHATWG Wiki [Online].  Available: WHATWG Wiki [2nd June 2009]
• HTML vs. XHTML [Online].  Available: HTML vs. XHTML [2nd June 2009]
• Dumbill, E.  2005. The Future of HTML, Part 1: WHATWG [Online].  Available: The Future of HTML, Part 1: WHATWG [2nd June 2009]
• HTML 5 Draft Standard – 2 June 2009 [Online].  Available:  HTML 5 Draft Standard – 2 June 2009 [2nd June 2009]
• Ducharme, B.  2007.  Put XHMTL 2 to work now [Online].  Available:  Put XHMTL 2 to work now [29th May 2009]
• Conversation With X/HTML 5 Team [Online].  Available:  Conversation With X/HTML 5 Team [2nd June 2009]
• 2007.  HTML 5 and XHTML 2.0? [Online].  Available:  HTML 5 and XHTML 2.0? [29th May 2009]
• 2008.  XHTML 2 vs. HTML 5 [Online].  Available:  XHTML 2 vs. HTML 5 [29th May 2009]
• Introduction to XML For Web Developers [Online].  Available:  Introduction to XML For Web Developers [29th May 2009]
• 2005.  Introduction to XML and XML With Java  [Online].  Available:
  Introduction to XML and XML With Java [29th May 2009]
• XHTML2 Working Group Home Page [Online].  Available:  XHTML2 Working Group Home Page [29th May 2009]
• Advantages of XML [Online].  Available:  Advantages of XML [29th May 2009]
• X/HTML 5 Versus XHTML 2 [Online].  Available:  X/HTML 5 Versus XHTML 2[29th May 2009]
• 2006.  Frequently Asked Questions About XHTML vs HTML [Online].
  Available:  Frequently Asked Questions About XHTML vs HTML [27th May 2009]
• 2006.  General advantages and disadvantages of HTML vs XML and XHTML [Online].  Available: General advantages and disadvantages of HTML vs XML and XHTML [27th May 2009]
• Pemberton, S.  2004.  HTML and XHTML Frequently Answered Questions [Online].  Available:  HTML and XHTML Frequently Answered Questions [27th May 2009]
• Advantages and disadvantages of XHTML [Online].  Available:
  Advantages and disadvantages of XHTML[27th May 2009]
• 2003.  HTML Versus XHTML  [Online].  Available: HTML Versus XHTML[27th May 2009]

Tagged: HTML, XHTML ]]> http://amyvarga.wordpress.com/2009/06/02/xhtml-vs-html/feed/ 0 amyvarga