Obtaining a valid HTML foreignObject in SVG in HTML5

For some time now I have used the SVG foreignObject in XHTML to control the layout of a combination table and graph that I sometimes use for physical science tests. The HTML foreignObject in XHTML requires the presence of the html, head, and body elements. In fact, the foreignObject carries its own XML namespace. A fragment of a valid XHTML file with an HTML foreignObject can be viewed in the source of quiz 114.

Note that the XHTML file includes the html element, the head element, and the body element. Recently I shifted from XHTML to HTML as I suspect that the future belongs to HTML.

Valid HTML requires removal of the namespace declarations. Removal of the namespace alone, however is not sufficient to obtain validation. To obtain valid HTML, currently referred to as HTML5, one has to remove the html, head, and body elements from the HTML foreignObject inside the SVG that is within the HTML.

Confusing? Maybe not to those new to HTML5. I was confused a few years ago when I found I had to add in the html, head, title, (head must have at least a title), and body element to the HTML foreignObject in the SVG. The issue is, I suppose, that the namespace demands those elements be present.

Now that cyberspace is flat again - no namespaces - the parser apparently does not want nor need all of the elements. In fact both validator.nu and validator.w3.org agree that html, head, title, and body, must be omitted to generate a valid HTML5 document with a foreignObject in the SVG.

As usual for a moron, I am indebted to a fragment of proposed code that steered me in the right direction.

Popular posts from this blog

Box and whisker plots in Google Sheets

Traditional food dishes of Micronesia