HTML Webpage Structure, Page 4

Release: 2010-06-10
Jump to Web Standards Articles TOC

Page 1, Page 2, Page 3, Page 4

Canvas

To provide the ability to programatically 'paint' images and possibly animate and make them interactive at a native level (as apposed to Flash, Silverlight, etc which require plugins) a canvas element can be used. It is an Embedded Element, like object, can be placed within Phrasing Content and so only have alternative content within the start and end tags as Phrasing Content or placed within Flow Content and have Flow alternative Content. In order to 'paint' on the canvas you use scripting:

<canvas id="interimage1" width="300" height="300">
  <span>A red box.</span>
</canvas>
<script type="text/javascript" src="scripts/drawit.js"></script>

In drawit.js:

var canv = document.getElementById("interimage1");
if (canv.getContext) {
  // Get 2d context for the image
  var image2d = canv.getContext("2d");
  // Set color to red
  image2d.fillStyle = "#ff0000";
  // Draw rectangle
  image2d.fillRect(100, 100, 50, 50);
} else {
  // Non Canvas handling code.
} // End if Canvas is supported

Apple (who invented canvas) WebKit based such as Safari (even on the iPhone, iPod Touch and iPad) and Dashboard support canvas images. Also Chromium based such as Google Chrome, QTWebKit based such as Arora, Presto 2 Second Edition (SE) and higher based such as Opera 9.2 and higher, KHTML 4 based such as Konqueror 4 and Mozilla 1.8 and higher based such as Firefox 1.5 and SeaMonkey support canvas images.

Trident based web browsers such as Internet Explorer do not support canvas images but Google has a JavaScript that can add support for the canvas element and most of the canvas scripting. More info about this ExplorerCanvas JavaScript at http://excanvas.sourceforge.net/.

For a tutorial on canvas: Mozilla Canvas Tutorial seems to be the prominent one.

Audio and Video

The audio element allows native embedded audio file support like img void elements provide native image support. A src attribute specifies the audio file, autoplay boolean attribute makes the browser automatically download and start playback when the page loads.

The preload attribute can be used to allow the media to automatically and fully download, with the value auto, or just download the dimensions and other metadata with the value metadata or nothing of the media with the none value.

Looping can be done using the loop boolean attribute.

The controls boolean attribute will generate a default control bar or panel with play / pause, progress track, volume and possibly a button or menu item to play the audio track in an external player.

<audio id="mySample" src="media/sample.m4a" controls></audio>

Also the video element allows a similar thing to audio elements but for playing audio visual movies. It has all the attributes that the audio element has plus width and height attributes can specify static dimension for the movie control. Plus the poster attribute specifies an image to be displayed before the movie has downloaded and starts playing.

<video id="trailer1" src="media/trailer.mp4" width="300" height="200" poster="media/trailerposter.png" controls></video>

As an environment may not support a particular audio or video format you can, before any alternative content, use two or more source void elements inside audio and video elements. The audio or video elements must not have a src attribute if there are any source children. Attributes for source void elements include a src attribute for the particular audio or movie file and a type attribute to specify the MIME Type of the audio or movie file and a media attribute (like the style element's media attribute).

<audio id="mySample" controls>
  <source src="media/sample.m4a" type="audio/x-m4a">
  <source src="media/sample.ogg" type="audio/ogg">
  <source src="media/sample.mp3" type="audio/mpeg">
</audio>

 

<video id="trailer1" width="300" height="200" poster="media/trailerposter.png" controls>
  <source src="media/trailer.mp4" type="video/mp4">
  <source src="media/trailer.ogg" type="application/ogg">
  <source src="media/trailer.mpg" type="video/mpeg">
</video>

 Timed tracks are provided by track void elements after any source void elements and before any alternative content within the audio or video elements. A src attribute points to a Web Subtitle Resource Track (WebSRT) timed track file, label attribute states a label for the timed track, srclang attribute states the language code for the timed track and the kind attribute is for which type of timed tack: captions (such as for the deaf), descriptions (such as for the blind), subtitles, chapters or metadata.

 There is also a scripting API (Application Programming Interface) to script your own controls:

function simplePlay(mediaID) {
  media = document.getElementById(mediaID);
  if (media.paused) {
    media.play();
  } else {
    media.pause();
  } // End if media is paused
} // End (function) simplePlay

 Apple Webkit 525 and higher such as Safari 3.1 supports the audio element, video element and source void element with Wave, MP3, M4A, audio, MPEG1, MPEG4 and H.264 video support. Safari Mobile Media Player on iPhone, iPod Touch and iPad only supports MP3, M4A audio, MPEG4 and H.264 video.

Mozilla 1.9.1 and higher such as Mozilla Firefox 3.5, Firefox Mobile and SeaMonkey 2, KHTML 4.4 like Konqueror 4.4 and Presto 2.5 and higher like Opera 10.5 and higher also supports Native Media but with OGG audio and video support. Konqueror 4.4 for Windows supports Native Media but supports no audio or video formats.

Chromium 3 based such as Google Chrome 3 also support Native Media with MP3, M4A audio, MPEG4 and H.264 video, OGG audio and video. SRWare Iron 3 only supports OGG audio and video.

Internet Explorer 9 will support Native Media with M4A audio and H.264 video.

Ruby Annotation

Ruby Annotations are usually used to provide pronunciation information alongside the main word or text or for other annotations. Ruby comprises of the ruby Phrasing element with normal text that you are annotating. Then each annotation text within the Ruby is marked up by an rt element - usually appears above the normal text at a smaller font size:

<ruby>2008-06-21 <rt>Year-Month-Day</rt></ruby>

produces something like:

Year-Month-Day
2006-06-21

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

<ruby>2008-06-21 <rp>(</rp><rt>Year-Month-Day</rt><rp>)</rp></ruby>

So in environments that do support Ruby Annotations it will produce exactly the same as the 'A Ruby Annotation for a date' example but for environments that do not support Ruby Annotations will produce something like the following:

2008-06-21 (Year-Month-Day)

Trident based web browsers such as Internet Explorer, Chromium 4 and higher based such as Google Chrome 4 and SRWare Iron 4 and WebKit 533 based such as Safari 5 support Ruby Annotations.

Figures

Sometimes you may want to provide Figure 1, Figure 2, Figure A, Figure B, etc to help illustrate a paragraph's or section's point. You can with the figure element. Within that, Flow, Phrasing or usually Embedded elements such as images or multimedia as the main content. You also may have a figcaption element for the caption above or below the Flow or Phrasing elements within the figure element. No browser currently supports the figure element.

<figure id="fig3">
  <img src="figures/holidayphoto.jpg" alt="Mum, Dad and two children smiling and posing around their sand castle.">
  <figcaption>Figure 3: Our sand castle</figcaption>
</figure>

Popup Details

When you focus or click / activate an element for more details that popup in an extra details box you can use a details element with a summary element for the summary or label within it, followed by Flow content for the actual contents of the extra details. By default the details will not be shown. When triggered to show, the details element will have an open boolean attribute, which you can place there to make the details show by default. Currently no web browser supports this yet.

<details id="qprofile2038">
  <summary>Quick Profile: San Droo</summary>
  <h5><ing src="profiles/images/sandroo.png" alt="" class="profileimg"> San Droo</h5>
  <<p>...</p>
</details>

Commands

Commands can be created by elements a, input with types 'submit', 'reset', 'button', 'radio' and 'checkbox'; also button elements and option elements. But generic commands can be created and used as a single behaviour by multiple points by a command void element. For instance, in a graphical word processor the copy action is a single action but can be triggered from more than one place: a menu item in the Edit Menu in the main menu bar, a menu item in a popup context menu, a toolbar button, from the keyboard or a link from an actions panel.

 The label attribute provides the name of the command, the icon attribute uses a URI (or IRI) to an image for the icon of the command. A hint can be provided by the title attribute. 'command' is the default value of the type attribute.

 Another value for the type attribute is 'checkbox' which will allow you to use the checked boolean attribute and when the command is triggered, all the references to the command will act as a checkbox menu item and be ticked or unticked.

 For type="radio" you can use the checked boolean attribute and also the radiogroup attribute to specify a group of radio buttons that will be affected by the command.

No browser currently supports HTML 5 commands.

Editing

One of the global attributes is contenteditable. If an element has contenteditable="true" then the static element such as a section or p and any child elements will be switched into rich text editing mode if the browser supports it.

Any textarea elements and any elements that have contenteditable="true" or an ancestor element that has the attribute may have a spellcheck attribute. If the value is true (the default for editable elements) then if the browser supports spell checking, it will analyse the text. Otherwise the value of false will prevent the text from being checked.

Most web browsers today support the contenteditable attribute but only Presto 2.5 based like Opera 10.5 supports the spellcheck attribute.

Microdata Support

Microdata is a way to annotate parts of the webpage to allow web browsers to export pieces of information to various tools or other applications. Such as the web browser may provide events data to be exported for a calendar application or contact information may be exported for a Personal Information Manager (PIM) application.

  Information as Microdata are item groups and item properties. An item group is coded by any appropriate element with an itemscope boolean attribute and may have an itemtype attribute with the URI referencing the group's type such as 'http://dvds.example.com/' or 'http://microformats.org/profile/hcalendar#vevent'.

If a Microdata vocabulary (referenced by itemtype attribute) defines a global unique identifier then you can use that global unique identifier by using the itemid attribute on the element that has the itemscope boolean attribute and itemtype attribute.

 Item properties are coded as any appropriate element with an itemprop attribute providing the name of the property. The following provides the actual value of the property:

 If the element is an img void element, embed void element, video element, audio element, source void element or iframe element then the value is from the src attribute;

 If the element is an object element then the value is from the data attribute;

 If the element is an a element, link void element or area void element then the value is from the href attribute;

 if the element is a time element then the value is from the datetime attribute;

 If the element is a meta void element then the value is from the content attribute;

 Otherwise, the value is from the Element Content.

A common property used, usually with other properties, is the 'about' property with its value being an absolute URI – analogous to RDF's rdf:about attribute.

<p itemscope>
  <a itemprop="about" href="http://example.com/staff/ns003632">
    Company Director, ...
  </a>
</p>

<div itemscope itemtype="http://microformats.org/profile/hcalendar#vevent">
  <p><strong itemprop="summary">Conference</strong>
    from <time itemprop="dtstart" datetime="2006-07-18T09:30:00+01:00">18<sup>th</sup> of July, 9:30am</time>
    to <time itemprop="dtend" datetime="2006-07-20T14:05:00+01:00">20<sup>th</sup>, 2:05pm</time>
    at <span itemprop="location">Baker Street, London</span>
  </p>
</div>

 Elements with an itemprop attribute are usually child elements within elements with an itemscope boolean attribute. But you can refer to properties that are elsewhere in the same document using the itemref attribute on the element with the itemscope boolean attribute, and having an id attribute on the property or properties that you are referring to.

<div itemscope itemtype="http://spec.example.com" itemref="handle1 handle2">
  <meta id="handle3" itemprop="markup" content="html">
</div>
  <!-- ... -->
  <li id="handle1" itemprop="tech">Hydroelectric</li>
  <!-- ... -->
  <p><img src="images/optical387.png" id="handle2" itemprop="iconic-representation" alt="" width="53" height="53" class="dropLeft"> <span>The optical disc refracts ...</span></p>

Devices

 A webpage or web application could make use of a device such as a webcam for video conferencing, accessing the local filesystem of a USB DataPen or even a device on a serial port.

This could be done using the device void element and its type attribute. The type attribute may have any of these values: media for audio and video steams, fs for accessing local filesystems and rs232 for accessing an RS232 based device.

Compatible Doctype

For tools and languages that can't handle the HTML 5 proper Doctype for text/html documents, there is a compatible Doctype that adds a systemid.

<!DOCTYPE html SYSTEM "about:legacy-compat">

One example is using XSLT to convert XHTML or other XML languages to HTML. XSLT's default HTML Doctype is for the old HTML 4.0 Transitional. To specify HTML 5 you use this output element.

<xsl:output method="html" version="5" doctype-system="about:legacy-compat" encoding="UTF-8" media-type="text/html" indent="yes"/>

This is only to be used for those tools and languages that can't handle the proper Doctype. Hand Coders must use the proper HTML 5 Doctype <!doctype html>.

SVG Images and Math

Markup from other markup languages can also be used in HTML 5 as Embedded, Flow and Phrasing Content.

 The main languages that are being supported include Scalable Vector Graphics (SVG): the XML language for describing 2 dimensional line drawings & graphs and MathML: the XML language that describes and presents mathematical equations.

 Currently only Trident 5 and higher based web browsers such as Internet Explorer 9 and higher supports SVG inline in text/html documents. Apple WebKit 525 and higher, Chromium based and KHTML 4.2 and higher based browsers support SVG in XHTML 5. Recent Opera versions support some MathML (using MathML CSS Profile) and SVG in XHTML 5. Mozilla 1.8 and higher supports both MathML and SVG in XHTML 5.

Web Application Manifest

 One of the benefits of the updated version of HTML is providing Web Applications. This also means the ability to have the components of the web application available not only online but also available offline (when the internet connection is down, disconnected or otherwise not available). So the components are to be stored in an application cache (pronounced cash).

In order to tell the User Agent which files can be used when in offline mode you refer to a manifest by the manifest attribute in the html start tag.

<html manifest="mywebapp.manifest" lang="en" dir="ltr">
  <!-- ... -->
</html>

The actual manifest is a text based .manifest file with the MIME Type of text/cache-manifest. First in the file is the uppercase, mandatory text: CACHE MANIFEST. On each line you have the path to the webpage or folder or image or other from the domain name (represented by a forward slash '/') or a relative path to the webpage, folder, image, other that will need to be cached.

Blank lines are ignored and lines with text starting with the hash or number character ( # ) are the comments.

To list components that do need an internet connection such as Perl, PHP or ASP server based scripts will need to go under an optional section starting with the line NETWORK:.

You can also have an optional FALLBACK: section for when the User Agent is in offline mode. Under this section each line will have a file or folder that needed online access, followed by spaces or tabs and a path to a file that will be loaded instead.

If you need to put an extra list of files or folders that need to be cached after the NETWORK: or FALLBACK: sections then you can use the optional CACHE: 'section heading'.

CACHE MANIFEST
# Version 1.0.0.1
index.html
prefs.html
info.html
requiresonline.html
images/logo.png
images/pref.png
images/info.png
styles/main.css
scripts/onlineoffline.js
scripts/storage.js
scripts/dnd.js

NETWORK:
remotedata.php

FALLBACK:
remotedata.php  requiresonline.html

CACHE:
extrafile.html
anotherfile.html

 The cache is only updated when the manifest is updated. If there is no changes to the manifest itself but to the other components then it is best to make some change in the manifest. Such as providing a comment with a version number that you will use to make subtle changes to the manifest to force the cache to update.

 Currently Mozilla 1.9.1 based like Firefox 3.5 and SeaMonkey 2, WebKit 530 based like Safari 4, Chromium 4 like Google Chrome 4 support this manifest feature.

XHTML 5

Using an XML-based MIME type (such as application/xhtml+xml), HTML 5 documents are XHTML 5 documents and must be Well-Formed XML 1.0 or 1.1. XHTML 5 is usually used as XHTML 5 fragments within news feeds such as Atom Feeds.

Notes for coding XHTML 5:

1. As XML does care about the case of element and attribute names, XHTML 5 is declared in lowercase;
2. All elements that can have a start and end tag (normal elements) such as p and li must have both start and end tags present;
3. All elements that only have a start tag (void elements) like img and br in XHTML 5 must be Empty Elements: either have an optional space and a definite forward slash before the greater-than character such as <br/> (preferred) or can be a normal element as long as there is absolutely no element content including new lines such as <img></img>;
4. All attribute values must be quoted in XHTML 5 - commonly with double quotes;
5. If you use double quotes in attribute values that are surrounded by double quotes then use the " entity within the attribute value instead of a literal double quote (otherwise you would be ending the attribute before you intended; plus XHTML 5 using the XML parser will throw errors at you);
6. If you use apostrophes or single quotes in attribute values that are surrounded by single quotes then use the ' entity within the attribute value instead of a literal apostrophe or single quote. It is best to surround attribute values with double quotes these days;
7. As ampersands (&) are used to start entities, or character references, then if you need to use it as an ampersand use the & entity in attribute values and element content;
8. As less-than characters (<) are used to start elements and you need to use it as a less-than character then use the < entity in attribute values and element content - greater-than characters (>) do not pose a problem;
9. Any 'minimized' or boolean attributes such as checked and multiple must be expanded to either have an empty value as checked="" and multiple="" or have the attribute name as the value such as checked="checked" and multiple="multiple";
10. The id attribute is used instead of the old name attribute for elements such as img, a and table as the name attribute has been replaced in favour of the global standard of ID type attributes like id and xml:id;
11. The old language attribute in script elements has been replaced by the global standard type attribute as <script type="text/javascript"> </script>;
12. The noscript element is forbidden in XHTML 5 as it does not have the intended effect in native XML. In any case you should be writing Unobtrusive Scripts (see related article) so you do not need noscript anymore (web browsers will still support it for older webpages);
13. In XHTML 5 the document.write() and document.writeln() do exist still but they don't work. This is because they would break the XML Document Well-Formed Rules. Instead you will have to use the HTML Document Object Model to manipulate the existing markup including DOM 5 HTML's innerHTML property. This will work in XHTML 5 and works in all current web browsers that support XHTML (see Modelling the Document Objects article for more on the Document Object Model (DOM) and innerHTML);
14. There is no XHTML 5 Doctype as HTML 5 is a DOM based language rather than a DTD based language. But you may write your own DTD if you can;
15. It is best to move from using character sets like ISO-8859-1 to the most supported global standard and Unicode supporting character set UTF-8;
16. Element nesting must be proper - for instance: <strong>This is an <em>invalid</strong> nesting</em> as the em element was started within the strong element then the em element must end within the strong element as <strong>This is <em>valid</em> nesting</strong>;
17. Elements script, style and pre in older XHTML must have the xml:space="preserve" attribute to preserve leading and trailing spaces, tabs, newlines and other 'whitespace' characters and any multiple whitespaces within words at the XML parser level. But later XHTML versions and XHTML 5 you don't use it as all elements have whitespace preservation at the XML parser level;
18. In XHTML 5 you use the xml:lang attribute (no lang attribute is needed although you may have the attribute there but it will do nothing);
19. Also XHTML 5 needs to declare its XHTML XML Namespace (xmlns="http://www.w3.org/1999/xhtml" usually in the html start tag) which uniquely identifies the elements and attributes in the world of XML that they are from the XHTML language and not to be confused with any other XML language element or attribute that might have the same name.

XHTML 5 Documents can have the XML Declaration:

<?xml version="1.0" encoding="UTF-8"?>

The XML Declaration is actually optional but preferred to clearly state the character set via the encoding attribute.

As most web browsers only have tiny or no support for Document Type Definitions (DTDs), they don't validate webpages. XHTML 5 has no specific Doctype. But you can write your own. An XML-based Doctype would generally be of the form:

<!DOCTYPE html PUBLIC "-//CompanyName//My XHTML 5 DTD Name and Version//EN" "http://www.example.com/my/xhtml5.dtd">

or

<!DOCTYPE html SYSTEM "http://www.example.com/my/xhtml5.dtd">

In the html start tag you still need the XHTML XML Namespace, xmlns="http://www.w3.org/1999/xhtml". Plus the xml:lang attribute is for stating the natural language of the webpage's content.

Like the lang attribute is optional but useless in XHTML, the <meta charset="UTF-8"/> and <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> are also allowed if the charset value is UTF-8 or the same as the XML Declaration's encoding attribute value; plus they are also useless in XHTML.

As XHTML 5 is XML, all void elements must be XML Empty Elements such as <meta name="" content=""/>, <br/> and <input type="text" name="subject"/>.

<?xml version="1.0" encoding="UTF-8">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
  <head>
    <title>Untitled</title>
  </head>
  <body>
    <h1>Untitled</h1>
    <p></p>
  </body>
</html>

A semantic XHTML 5 version of the news article:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="styles/mainstyles.css" title="Main Styles"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
  <head>
    <title>Record Orb Sightings - News - NewsCorp</title>
    <link rel="alternate" type="application/atom+xml" href="feeds/latest.atom" title="Latest News (Atom 1.0)"/>
    <!-- Icon: IE Compatibility: uses favicon -->
    <!-- Icon: Standards -->
    <link rel="icon" type="image/png" href="icons/newscorp-icon.png"/>
  </head>
  <body>
    <header>
      <hgroup>
        <h2><img src="images/mainlogo.png" width="100" height="50" alt=""/>NewsCorp&reg;</h2>
        <h3>Streaming all your news 24/7 since 2097</h3>
      </hgroup>
      <p>
        <a href="competitions/cheesecake2103.html"><img src="adverts/wincheesecake2103.png" class="advertDimensions" alt="Win a year's supply of cheesecake."/></a>
      </p>
    </header>
    
    <nav>
      <menu>
        <li><img src="images/home.png" width="22" height="22" alt=""/><a href="index.html">Home</a></li>
        <li><img src="images/news.png" width="22" height="22" alt=""/><a href="news/">News</a></li>
        <li><img src="images/comps.png" width="22" height="22" alt=""/><a href="competitions/">Competitions</a></li>
        <li><img src="images/staff.png" width="22" height="22" alt=""/><a href="staff/">Staff</a></li>
      </menu>
    </nav>
    
    <article>
      <header>
        <hgroup>
          <h1>Record Orb Sightings</h1>
          <h2>Spirits or Whitelighters</h2>
        </hgroup>
        <p><time pubdate="pubdate" datetime="2103-12-02T10:00+00:00">2<sup>nd</sup> December, 2103</time></p>
      </header>
      
      <section>
        <h2>What are these floating clumps of light?</h2>
        <p>
          <img src="images/orb18382-28293.png" width="78" height="100" alt="" class="dropright"/>
          Over the past few months there has been a dramatic increase in the number of orb sightings.
        </p>
        <p>Orbs are the first stage of a person or spirit materializing into our range of sight.</p>
      </section>
      
      <section>
        <h2>Where and when?</h2>
        <p>The major concentrations of orb activity include:</p>
        <ul>
          <li>York, United Kingdom,</li>
          <li>San Diego, North America,</li>
          <li>...</li>
        </ul>
        <p>Most sightings have taken place during the <time datetime="2103-06-21T01:00+01:00">Summer Solstice 1:00am</time> and <time datetime="2103-06-21T04:00+01:00">4:00am</time> as well as <time datetime="2103-10-31T23:00+00:00">Halloween 11:00pm</time> to <time datetime="2103-11-01T04:00+00:00">4:00am</time>.</p>
      </section>
      <!-- … -->
      
      <footer>
        <p>News Article by: <a href="staff/droo.san.html">San Droo</a>
          <address>
            Email: <a href="mailto:san.droo@newscorp.example.com">
              san.droo@newscorp.example.com
            </a>
          </address>
        </p>
      </footer>
    </article>
    
    <aside>
      <h2>Current Weather</h2>
      <p>New New New London: 23 degrees, Sunny.</p>
    </aside>
    
    <footer>
      <p><small>&copy;2103, NewsCorp&reg;. All rights reserved.</small></p>
      <p><small>NewsCorp is a registered, limited...</small></p>
    </footer>
  </body>
</html>

In XML environments anything within comments will be ignored so in XHTML 5 you must use a CDATA Section in in-document StyleSheets and scripts.

<style type="text/css"><![CDATA[
  /* style code */
]]></style>

<script type="text/javascript"><![CDATA[
  // script code
// ]]>
</script>

You can use link elements to attach external StyleSheets but it is preferred to use the XML-StyleSheet Processing Instruction (More on this in the CSS article). For more details on Cascade StyleSheets see the CSS article.

Instead of the id attribute you could use xml:id but not both on the same element. Plus content language is specified by the xml:lang attribute:

<span xml:lang="en-GB">This is English text</span>
<span xml:lang="fr-FR">C'est texte Français</span>
<span xml:lang="el-GR">Αυτό είναι ελληνικό κείμενο</span>

Instead of the base element you can use the xml:base attribute on any XHTML 5 element.

<p xml:base="http://www.meexample.com/levels/overthere/">
  <a href="hereweare.xhtml">go here</a>
</p>

Microsoft Trident 4 and under based environments such as MS Internet Explorer 8 and under do not support application/xhtml+xml documents, so they do not support old native XHTML or XHTML 5. Unless they are Trident 3 or higher (Internet Explorer 7 or higher) and it is an XHTML fragment within an Atom Feed, which is an application/atom+xml document.

The upcoming Trident 5 (Internet Explorer 9) does support native XHTML including XHTML 5 with any XML MIME Type including application/xhtml+xml.

KHTML based web browsers such as Konqueror incorrectly treat application/xhtml+xml documents as text/html documents.

Epilogue

This article is not exhaustive. HTML 5 is currently a Draft Standard. You can view the actual specification for more features and even propose new features at either the WHATWG website or the W3C HTML Working Group website.

Page 1, Page 2, Page 3, Page 4

Copyright ©2008-2010 Legend Scrolls and Peter Davison. All rights reserved.