[Skip to the Main Content]

HTML5 Image Difference

The differences between HTML and XHTML have been noted with a new list of deprecated items. Differences between HTML 4.01 and HTML5 less so. The following identifies one difference that shall affect numerous sites. It's images.

HTML 4.01 and HTML5 each define <image> in a similar manner. The difference occurs when HTML5 introduces “Embedded Content” which states,

Embedded content
Embedded content consists of elements that introduce content from other resources into the document, for example img. Embedded content elements can have fallback content: content that is to be used when the external resource cannot be used (e.g. because it is of an unsupported format). The element definitions state what the fallback is, if any.

This study was performed after comparison of a case study page between (X)HTML5 Conformance Checking Service Technology Preview and W3C® Unicorn “The Web’s Universal Conformance Checker - ALPHA Test Version”. It passed all W3C® image conformance variants but failed (X)HTML5’s. Test case was setup and run through the (X)HTML5 Conformance Checking Service. The Document Type Definition (DTD) was Markup Language specific, i.e., <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and <!DOCTYPE html>.

[Note: The following addresses HTML5; not XHTML5. All HTML 4.01 text/html and XHTML 1.0 text/html documents are considered by Web Applications 1.0 to be HTML5. 1]

This—Then—is what occurred.

Relevant Code


<body>
<img src="http://www.menehune-foundry.com/images/zoetrope/small-hunting-snarks.jpg" »
alt="The Hunting of the Snark" width="180" height="255">
</body>

(X)HTML5 Conformance Errors

  1. Error: Element img from namespace http://www.w3.org/1999/xhtml not allowed in this context.
    Line 8, column 140 in resource http://www.menehune-foundry.com/vague/HTML5-image.html

Corrections Made


<body>
<div>
<img src="http://www.menehune-foundry.com/images/zoetrope/small-hunting-snarks.jpg" »
alt="The Hunting of the Snark" width="180" height="255">
</div>
</body>

The img requires an embedding element as specified by the specification; it was set in a <div>.

It passed.

[Note: The above correction example is disingenuous. The Web Applications 1.0, 3.14. Embedded content, 3.14.1. The img element states that images are “Strictly inline-level embedded content” and

“Contexts in which this element may be used:
As the only embedded content child of a figure element.
Where strictly inline-level content is allowed.”

So, the Conformance Checker may be corrected. Or, not.]

However, if set-up HTML were pseudo real-world,

Relevant Code


<body>
<div>
<p>[ ... ]</p>
<img src="http://www.menehune-foundry.com/images/zoetrope/small-hunting-snarks.jpg" »
alt="The Hunting of the Snark" width="180" height="255">
</div>
</body>

The above failed.

(X)HTML5 Conformance Errors

  1. Error: Element img from namespace http://www.w3.org/1999/xhtml not allowed in this context.
    Line 10, column 140 in resource http://www.menehune-foundry.com/vague/HTML5-image.html

This error is generated by the Conformance Checker due to its bimorphic model parsing wherein it assumes that since the image follows a paragraph the image should be an inline element and, therefore, embedded.

Corrections Made

The corrections as below.

Semantically.


<body>
<div>
<p>[ ... ]</p>
<p><img src="http://www.menehune-foundry.com/images/zoetrope/small-hunting-snarks.jpg" »
alt="The Hunting of the Snark" width="180" height="255"></p>
</div>
</body>

Unsemantically.


<body>
<div>
<p>[ ... ]</p>
<div><img src="http://www.menehune-foundry.com/images/zoetrope/small-hunting-snarks.jpg" »
alt="The Hunting of the Snark" width="180" height="255"></div>
</div>
</body>

Final Results

Semantically and Unsemantically.

“The document conforms to the machine-checkable conformance requirements for HTML5 (subject to the utter previewness of this service).”

I preferred unembedded images.

Update January 4, 2007

The (X)HTML5 Conformance Checking Service has been changed. The <div> from the corrections made above will return an error:

  1. Error: Element img from namespace http://www.w3.org/1999/xhtml not allowed in this context.

    Line 10, column 145 in resource http://www.menehune-foundry.com/vague/HTML5-image.html

  1. Web Applications 1.0, 1.4.1. HTML vs XHTML states,

    “There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification.”

    “The first such concrete syntax is “HTML5”. This is the format recommended for most authors. It is compatible with all legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an “HTML5” document by Web browsers.”

    “The second concrete syntax uses XML, and is known as “XHTML5”. When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an “XHTML5” document. Generally speaking, authors are discouraged from trying to use XML on the Web, because XML has much stricter syntax rules than the “HTML5” variant described above, and is relatively newer and therefore less mature.”


Sean Fraser posted this on January 2, 2007 03:08 PM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/html/html5-image-difference.html
  • furl: http://www.elementary-group-standards.com/html/html5-image-difference.html
  • reddit: http://www.elementary-group-standards.com/html/html5-image-difference.html

Comments

zcorpan wrote this at January 10, 2007 01:46 PM

"Embedded element" or "embedded content" refers to the <img> element, not its parent element. That inline content and block-level elements aren't allowed as siblings is not specific to images.

Perhaps we should have a less confusing term for the concept, perhaps "embedding element"? What would you call the <img>, <iframe>, <embed>, <object> and <canvas> elements?


Comment Author Gravatar
Sean Fraser wrote this at January 10, 2007 02:32 PM

Simon: I don't know that I would want to name them differently. "Embedded Content" seems suitable. It's a new term that people will - Eventually - understand and/or comprehend. "Embedding Element" - for me - would be the parent, e.g., an <img> [Content] must be embedded in a <p> [Embedding Element].

My suggestion would be for simple examples in the specification. Most people will follow examples when a specification's explanatory text is techincally precise but... technical.

And, Yes. This article originally included the other elements which required embedding but I revised it to be <img> after research: more sites used unembedded images.

It's ironic that <embed> must be embedded.


Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated.


Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus