And All That HTML5 Malarkey

Or, How to make a world-famous XHTML site HTML5 compliant

This study in futility was performed because of curiosity. I veckled an abandoned XHTML site of mine; it was straightforward because the site was simple. Andy Clarke generously allowed the And All That Malarkey index/home page to be the subject of the study. What follows is my second experiment with the simplicity for an XHTML website’s conversion to HTML5. [Note: This study was originally performed on December 16, 2006 but was re-done after the (X)HTML5 Conformance Checking Service was changed early-January 2007.]

The existing Malarkey XHTML code was submitted to W3C® Quality Assurance Markup Validation Service (v0.7.4) on January 4, 2007: it had two simple errors that were not corrected for this exercise.

It is far more practical to begin with valid (X)HTML than not before attempting HTML5 conversion.

The existing Malarkey XHTML code was—Then—submitted to the (X)HTML5 Conformance Checking Service.

Error(s)

Fatal Error: XHTML public id seen. XHTML documents are not conforming HTML5 or HTML 4.01 documents.

Line 1, column 120 in resource http://www.stuffandnonsense.co.uk/

[Note: Fatal Errors cease Conformance Checker processing. HTML 4.01 sites are accepted by the Conformance checker; XHTML 1.0 sites are not. Consequently, the XHTML Document Type Definition (DTD) conflicts with the Conformance Checker (even though all documents with Content-Type text/html are considered HTML5.)]

Correction(s)

The XHTML Malarkey code was set-up on a different server.

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

The revised HTML5 Malarkey code was resubmitted to the Conformance Checker.

Error(s)

Fatal Error: Cannot minimize non-boolean attributes.

Line 2, column 47 in resource http://www.menehune-foundry.com/vague/malarkey-site-first.html

Correction(s)

Line 2, column 47 was <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> which was truncated to <html lang="en"> and, thereby, removed the xmlns declaration. That was fixed.

The revised HTML5 Malarkey code was resubmitted to the Conformance Checker.

Error(s)

Error: The element meta with the attribute http-equiv is not allowed at this point. The attribute http-equiv is only appropriate for declaring the character encoding and in that case the element must be the first element child of the head element.

Line 6, column 74 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Attribute http-equiv not allowed at this point; ignored.

Line 6, column 74 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Element a from namespace http://www.w3.org/1999/xhtml not allowed in this context.

Line 23, column 60 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Element label from namespace http://www.w3.org/1999/xhtml not allowed in this context.

Line 40, column 20 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Bad value for attribute type.

Line 42, column 61 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Element a from namespace http://www.w3.org/1999/xhtml not allowed in this context.

Line 50, column 81 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Text not allowed here.

Line 50, column 106 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Element a from namespace http://www.w3.org/1999/xhtml not allowed in this context.

Line 50, column 194 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Text not allowed here.

Line 50, column 234 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Error: Element a from namespace http://www.w3.org/1999/xhtml not allowed in this context.

Line 50, column 466 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html
Fatal Error: Stray end tag: p

Line 50, column 493 in resource http://www.menehune-foundry.com/vague/malarkey-site-second.html

Correction(s)

Line 6, column 74 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> is required to be first in the <head> section. It was reset as first.

Line 23, column 60 was <a id="fir-a0" href="#content-main" title="Skip to content">Skip to content</a> which utilizes CSS placement. The <a> element is strictly inline and must be embedded. It was set in a  element.

Line 40, column 20 was <label for="search">Search this site>input id="search" name="search" value=" Transcending CSS" /></label>. And,

Line 42, column 61 was <input type="submit" id="submit" name="submit" value="Go!" />. They are mutually inclusive.

The complete form,


<form id="fm-search" method="get" action="http://www.stuffandnonsense.co.uk/mt/mt-search.cgi">
<input type="hidden" name="IncludeBlogs" value="1" />
<label for="search"><span>Search this site</span>
<input id="search" name="search" value="Transcending CSS" /></label>
<input type="submit" id="submit" name="submit" value="Go!" />
<p>(Search or browse the <a href="/archives.html">archives</a>)</p>
</form>

Web Forms 2.0 is precise with requirements but vague when attempting to isolate the above errors. 7. Extensions to the HTML Level 2 DOM interfaces, 7.11. Labels does not address it. However, if one reads further, A. XHTML module definition states that <label> is an inline element which is identical to XHTML^™ Modularization 1.1, 5. XHTML Abstract Modules, 5.5. Forms Modules, 5.5.1. Basic Forms Module . [Note: HTML 4.01 does not specify a minimum content model.] And, if one were to peruse various examples used by Web Forms 2.0, one will notice that most examples utilize an embedding element .

Still.

It does not suffice to embed <label> in a . The bimorphic model of the (X)HTML5 Conformance Checker triggers the error found on Line 42, column 61 above, i.e., <input type="submit" id="submit" name="submit" value="Go!" /> where input type="submit" is shown as a Bad value. [Note: It isn’t.] This is corrected by moving the closing  to Line 42 and that error ceases.


<form id="fm-search" method="get" action="http://www.stuffandnonsense.co.uk/mt/mt-search.cgi">
<input type="hidden" name="IncludeBlogs" value="1" />
<p><label for="search"><span>Search this site</span>
<input id="search" name="search" value="Transcending CSS" /></label>
<input type="submit" id="submit" name="submit" value="Go!" /></p>
<p>(Search or browse the <a href="/archives.html">archives</a>)</p>
</form>

Line 50, column 81; Line 50, column 106; Line 50, column 194; and, Line 50, column 234 was,


<a href="http://www.stuffandnonsense.co.uk/archives/colly_tells_porky_pies.html">Continue reading</a>  | »
<a href="http://www.stuffandnonsense.co.uk/archives/colly_tells_porky_pies.html#replies">Replies</a> »
 (9) | December 05, 2006 | »
<script src="http://embed.technorati.com/linkcount" type="text/javascript"></script>  »
<a href="http://technorati.com/search/http%3A%2F%2Fwww.stuffandnonsense.co.uk »
%2Farchives%2Fcolly_tells_porky_pies.html?sub=nscosmos" rel="linkcount">View blog reactions</a></p>

All above Line 50 errors are predicated on the “anchor” error.

However.

Line 50, column 493 Fatal Error: Stray end tag: p. has caused these anchor errors. And, since no opening element is found, a fatal error occurs which ceases Conformance Checker processing. [Note: That was the first error from the W3C® Markup Validation Service.]

After we add an opening , Everything’s fine.

The revised HTML5 Malarkey code was resubmitted to the Conformance Checker.

Error(s)

Error: Internal character encoding information is inconsistent with external information or the BOM.

Line 4, column 74 in resource http://www.menehune-foundry.com/vague/malarkey-site-third.html
Error: Element b from namespace http://www.w3.org/1999/xhtml not allowed in this context.

Line 113, column 403 in resource http://www.menehune-foundry.com/vague/malarkey-site-third.html
Fatal Error: Found a non-name character in entity reference / unterminated entity reference.

Line 139, column 119 in resource http://www.menehune-foundry.com/vague/malarkey-site-third.html

Correction(s)

Line 4, column 74. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> is straight forward. The 8859-1 Character Set (Charset) has been declared in the document but the HTTP Header has returned that the page from the server is—Actually—UTF-8. The Charset was corrected to UTF-8.

Line 113, column 403.  has been deprecated. Replacing  with  suffices.

Line 139, column 119. The “non-name character in entity reference / unterminated entity reference” refers to the everpresent "&" in a URL. It was corrected to be & and it's fine. [Note: This was the second W3C® Markup Validation Service error. It caused another Fatal Error.]

The revised HTML5 Malarkey code was resubmitted to the Conformance Checker.

Error(s)

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

Line 186, column 58 in resource http://www.menehune-foundry.com/vague/malarkey-site-fourth.html
Error: Element a from namespace http://www.w3.org/1999/xhtml requires significant inline content but did not have any.

Line 186, column 62 in resource http://www.menehune-foundry.com/vague/malarkey-site-fourth.html
Error: Attribute language not allowed at this point; ignored.

Line 187, column 129 in resource http://www.menehune-foundry.com/vague/malarkey-site-fourth.html

Correction(s)

Line 186, column 58 was another anchor. It was embedded in a ; it’s fixed.

Line 186, column 62 <a id="fir-a9" href="#stuffandnonsense-co-uk" title="Top"></a> introduces lack of “Significant Text”. An image was inserted as significant text because of the design. That’s fixed.

Line 187, column 129 was script language="JavaScript"; that was removed.

The revised HTML5 Malarkey code was resubmitted to the Conformance Checker.

After making the above changes, And all that Malarkey is HTML5 compliant.

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

Six (6) iterations and the Malarkey index page becomes HTML5 compliant.

The two major differences between HTML 4.01/XHTML 1.0 and HTML5—for this exercise—were,

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.
Significant text: Significant text, for the purposes of determining the presence of significant inline content, consists of any character other than those falling in the Unicode categories Zs, Zl, Zp, Cc, and Cf. [UNICODE] [Elementary note: That could be “.” or a single one pixel transparent PNG.]

“Significant text” is a simple fix. The “embedded content” requirement does require new structural and presentational methods. Especially, forms.

Six steps isn’t bad.

Sean Fraser posted this on January 8, 2007 02:08 PM.

Comments

Henri Sivonen wrote this at January 9, 2007 08:28 AM

“where input type="submit" is shown as a Bad value. [Note: It isn’t.]”

Actually, it is a bad value, since the value “hidden” would be allowed, as your fixed example demonstrates. Granted, the message isn’t particularly good at explaining itself.

“ has been deprecated.”

It hasn’t been deprecated. It just wasn’t in the spec yet when I was last reviewing that part of the schema. (I don’t keep the schema in sync with the spec daily.)

I have not done a full re-review, but I added as a quick fix anyway.

Alexey Feldgendler wrote this at January 9, 2007 10:39 AM: Using is no good because it's presentational markup. But using instead of just to make the document formally conformant, without the real intention to express importance of the enclosed text, is even worse.

Sean Fraser wrote this at January 9, 2007 04:21 PM

Henri: Thank you for the clarifications. Yes; I did find "submit" confusing. And, I don't know how I missed . My beginning sentence with its "study in futility" was an acknowledgement of the work-in-progress status of the specifications and conformance checker.

Alexey: Semantically, using instead of may be worse but - as you know - it is commonplace. The actual Malarkey code was

Update:

and, in this instance, was semantically correct.

Sean Fraser wrote this at January 9, 2007 04:52 PM

Comment amendment:

I've gotten behind in my reading threads.

[whatwg] contenteditable, and [January 8, 2007] begins a WHATWG Mailing List thread which offers a better reply than mine.

Le Sage wrote this at June 9, 2007 02:33 PM: Apparently, the new version of the validator doesn't validate your site anymore: 1.Error: Bad value for attribute http-equiv. Line 9, column 45 in resource http://www.menehune-foundry.com/formaldehyde/hemeralopie.html Solution: adding <meta charset="utf-8" />

Sean Fraser wrote this at June 9, 2007 05:50 PM

Le Sage: The latest iteration of the HTML5 Conformance Checker would validate that site if I were to remove <meta http-equiv="imagetoolbar" content="no">. HTML5 - Presently - states that only one http-equiv can be present; and, that would be <meta http-equiv="content-type" content="text/html; charset=utf-8"> (Or, whatever character set is chosen.) [See HTML5 http-equiv.]

The site validates for every other requirement. There was some discussion regarding additional http-equiv but no decision was reached by The WHAT WG.

I'll continue to use the imagetoolbar=no and accept non-conformance (since I know what has caused the error).

Excellent diligence.

Le Sage wrote this at June 18, 2007 03:48 AM: You're right, I don't know why I was thinking it was a problem dealing with encoding. It makes perfectly sense to want to keep a meta data since you know why you put it here in the first place. Did you check whether IE had the same behaviour if you used content & name instead of http-equiv? Thanks for your answer. :D

Sean Fraser wrote this at June 18, 2007 08:07 PM

Le Sage: Imagetoolbar does not have the same behavior when name and content are used.

HTML 4.01 Specification, 7 The global structure of an HTML document, The META element offers that “The http-equiv attribute can be used in place of the name attribute and has a special significance when documents are retrieved via the Hypertext Transfer Protocol (HTTP).”

So, I'll continue to use http-equiv.

Comments are closed.

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