Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there currently a way to use HTML5 <meta> tags outside of <head> in WebKit?

I'm trying to use <meta> tags throughout my HTML document to mark-up hidden microdata values, as descriped in Mark Pilgrim's Dive Into HTML 5. However, when my page loads in Chrome (specifically, Chromium 6.0.418.0), I get the following error messages:

<meta> is not allowed inside <article>. Moving <meta> into the <head>.
<meta> is not allowed inside <span>. Moving <meta> into the <head>.
<meta> is not allowed inside <div>. Moving <meta> into the <head>.

Is there currently a workaround for this? The same thing happens in Firefox 3.6.13, though I am particularly interested in a workaround for WebKit at this time.

like image 762
Bryan Irace Avatar asked Jan 13 '11 15:01

Bryan Irace


2 Answers

More recent versions of WebKit have, like Firefox, an HTML5-compliant parser, and support meta elements outside the head element.

I should also note that W3Schools is not related to the W3C, and is well known to publish utter nonsense. Also, Microdata is still part of HTML, and using it is perfectly fine. The fact that it is published in a separate draft at the W3C does not change that in any way.

like image 151
Ms2ger Avatar answered Oct 05 '22 23:10

Ms2ger


Both the HTML Microdata spec (Editor's Draft from 8 July 2011) and the schema.org spec vocabulary by Google, Microsoft, and Yahoo allowed the meta element to be placed into the body as part of semantic data in the microdata format.

  • http://dev.w3.org/html5/md/#the-basic-syntax
  • http://schema.org/docs/gs.html#advanced_missing

As of July 2011, IE 9, FF 5, and Chrome 12 do not throw this error; Safari 5 still does. (Tested on Win 7) More importantly (IMHO) the W3C's validator does not throw an error.

Here is a valid example of the meta element in the body:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Testing Meta in the Body</title>
    </head>
    <body>
        <div itemscope>
            <meta itemprop="name" content="HTML5 Logo">
            <figure>
                <img src="html5.png">
                <figcaption>The HTML5 Logo</figcaption>
            </figure>
        </div>
    </body>
</html>
like image 38
james.garriss Avatar answered Oct 06 '22 00:10

james.garriss