Login/Register
Can I add Microdata from HTML5 to a XHTML Strict site and still be compliant?
Asked Answered
Solved validationhtmlbreadcrumbsxhtml-1.0-strictmicrodata
A

5

25

I've got a site coded in XHTML 1.0 Strict. I want to use the new Microdata to add breadcrumbs to my site (so Google will understand them).

My old non-microdata marked-up breadcrumbs look like this:

<ul>
  <li><a href="...">Level 1</a></li>
  <li><a href="...">Level 2</a></li>
  <li><a href="...">Level 3</a></li>
</ul>

According to Google, to markup breadcrumbs using Microdata, you extend the above code like this:

<ul>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="..." itemprop="url">
      <span itemprop="title">Level 1</span>
    </a>
  </li>
  ...
</ul>

But this is not valid XHTML 1.0 Strict.

What should I do?
Should I ignore the validation conflicts?
Should I write itemscope="itemscope" instead of just itemscope (this would be valid XML, but still not valid XHTML)?
Should I change the Doctype to be HTML5 instead of XHTML 1.0 Strict?

I want this to work all the way back to IE6!

Please advice :)

Anjaanjali answered 7/9, 2010 at 14:52 Comment(3)
Why Microdata? Using the RDFa dialect looks like it should be valid XHTML. – Dorser
It just seemed to me that Microdata is the future because of HTML5. So this was both a way for me to get my hands dirty on HTML5 - but it also makes it easier to add future HTML5 nice-ness later as it matures. – Anjaanjali
The W3C HTML5 working group treat HTML5+RDFa and HTML5+Microdata equally. Both work with HTML and XHTML. The WHATWG favours microdata because it was invented by Ian Hickson (Hixie) and WHATWG is Hixie's personal fiefdom. – Posturize
K
16

Yes, if you wanted to use itemscope in XHTML, you would need to write itemscope="itemscope" and use XHTML5 (same DOCTYPE as HTML5, but XML syntax).

itemscope is not included in W3 HTML5, but present in WHATWG's version, so validation may continue to be a difficulty. There seems to be quite some political argument on this issue, which I haven't been following as it looks fairly tedious.

For the moment, if you want to use breadcrumb annotations in a finalised, validatable document format, you could use RDFa instead: the alternative (but older) proposal, which the argument is all about, and use the existing doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Kort answered 7/9, 2010 at 16:25 Comment(1)
To be clear about the state of Microdata in W3C HTML5, it's still part of the work of the HTML5 working group, but it's defined in a separate document. You can find it here: dev.w3.org/html5/md . The rationale behind this is simple enough. RDFa and Microdata inhabit the same problem space and it's unclear which will catch on with web authors, so it was felt by many members of the WG that not having either in the main spec would be most likely to give a level playing field for the two extension mechanisms to compete. – Posturize
T
12

Since the major search engines have decided on schema.org last June (2011) as the way to do rich snippets, this question has become much more important seeing XHTML5 does not yet have a working DTD (BTW, http://www.html5dtd.org/ is working on a XHTML5 DTD and may well be ready when you read this, if so disregard what I'm about to say). And what I am about to say summarises a page I placed at http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/ a few weeks ago, and there has more detail including a rich snippets demo if you want it.

I had need of extending XHTML 1.x Strict with schema.org/HTML5 microdata and getting it all to validate properly for updating nedprod, and Microsoft Expression Web has the occasional tendency to eat bits of HTML it edits, so validation is handy for catching when it borks. Hence I have created these DTDs which extend the standard XHTML 1.0 ones:

To use, take a copy of your desired DTD (don't use the original from nedprod, I can't afford the bandwidth) and use as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">

or ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">

... or more likely, override the DTD used for validation by your particular XML validating setup.

BTW, here's something interesting, and I only include this as it's useful to know when answering the question. I honest to God thought that using the above doctypes would invoke quirks mode when rendering. Turns out, much to my great surprise, that IE8, Chrome 14, Firefox 5 and Opera 11.50 all render such a doctype in Standards mode. Who would have thought! So you could, if you wanted to, upload your XHTML pages onto the public internet with the custom doctype and the newer browsers at least would do the right thing.

Hope this helps someone,
Niall

Teter answered 3/9, 2011 at 18:19 Comment(0)
B
1

Valid HTML 5 example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
    <div itemscope="" itemtype="http://schema.org/MediaObject">
        <div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
           <meta itemprop="name" content="Breast Augmentation Video Diary">
           <meta itemprop="duration" content="PT12M54S">
           <meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
           <meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
           <meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&amp;v=BwPN6eCpxTk">
           <meta itemprop="uploadDate" content="2010-11-09">
           <iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&amp;autohide=1&amp;modestbranding=1&amp;showinfo=0"></iframe>
           <span itemprop="description">Video Diary</span>
        </div>
   </div>
</body>
</html>

Found these links helpful:
- http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/

Bronchiectasis answered 8/4, 2013 at 18:47 Comment(0)
T
0

Use the application/ld+json MIME type and a microdata generator to transform the markup into data:

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>microdata.xhtml</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    </head>
    <body>
      <div>
      <script type="application/ld+json">
      {"items": [{
        "type": ["https://schema.org/breadcrumb"],
        "properties":{ 
        "url": ["..."],
        "title": ["Level 1"]
        }
       }]
      }
      </script>
      </div>
    </body>
    </html>

or a data:uri in an object tag:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>microdata.xhtml</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    </head>
    <body>
      <div>
        <object data="data:text/html;charset=utf-8;base64,PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==">

          <?microdata
          <ul>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
             <a href="..." itemprop="url">
               <span itemprop="title">Level 1</span>
             </a>
            </li>
          </ul>
          ?>

        </object>
      
        <!--[if lt IE 8]>
        <object data="mhtml://#foo">

          <?microdata
          <ul>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
             <a href="..." itemprop="url">
               <span itemprop="title">Level 1</span>
             </a>
            </li>
          </ul>
          ?>
          <div id="foo">
              PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==
          </div>
       </object>
       <![endif]-->
      </div>
    </body>
    </html>

I want this to work all the way back to IE6!

Use the application/xhtml+xml XSLT shim to support IE6 and extend it to get a copy of the markup.

References

Tithing answered 7/9, 2010 at 14:52 Comment(0)
F
-2

try and validate some of google's pages...they don't validate. validation is a tool, an awesome one, but nothing more, although i do applaud your determination. if you're that worried about validation i would switch to HTML5 .

Funches answered 11/12, 2010 at 6:53 Comment(6)
I use a templating engine that requires valid XML (and outputs XML-serialised HTML5). <div itemscope> causes an error so this question is not as pointless as your answer suggests. – Arreola
The question is not about whether the poster needs to use xHtml or not, but rather whether it is possible to create valid xHtml with the microdata tag attributes - xHtml does have its uses as valid xml for which validation is not just cosmetic box-ticking. – Streaming
where in my post do you see anything about xhtml? i can read but thanks for reading for me. and i'm a big fan of xhtml and validation. – Funches
Only just seen this ;) Nothing specific in your post about xhtml, but you suggest switching to html and the poster's question specifically states that he wants to add micro-data to an xhtml strict site (which is therefore about xml also). – Streaming
so amazing how none of you can read, but read for other users. he asked what he should do. i gave him an option that works for me. you don't like that option, cool. i could careless. he specifically says "what should i do". sorry for taking the time out of my day to offer advice that works for me. – Funches
oh you trolls, i like how the top answer here is a fleshed-out version of my answer: is html5, and don't worry about validation, as its a known issue. also, i never said the question was pointless, nor did i give a pointless answer. but i'll continue...if you use posh, a holdover from pre-html5, you're markup is already (x)html5 compliant, which is the entire reason to use posh, so your mark up is accessible and deployable as much as possible. posh is merely being anal-retentive strict with your markup. plain old semantic html. its truly as basic and low-level as you can get. – Funches

© 2022 - 2024 — McMap. All rights reserved.