Element name gcse:searchbox-only cannot be represented as XML 1.0

I found this answer hidden in the google docs:

https://developers.google.com/custom-search/docs/element#html5

HTML5-valid div tags

You can use HTML5-valid div tags as long as you observe these guidelines:

  • The class attribute must be set to gcse-XXX
  • Any attributes must be prefixed with data-.

For example:

<div class="gcse-searchbox" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search" >

You could always use <div class="gcse-search"></div> instead of <gcse:search></gcse:search>, then the error will go away from the w3c validator.


Michael[tm] Smith, the guy who looks after the W3C HTML validator says here:

It's not an error, it's a warning. And it's emitted because the content is being served as HTML instead of with an XML MIME type, and HTML parsers don't know anything about namespaces -- to put it in XML terms, every element name is a local name -- and so in HTML, the literal name of that element is "g:plusone". And that name can't be represented in XML because XML doesn't allow colons in the local names. So the spirit of the warning is to say, In case you ever want to serve this content as XML instead of HTML, you have an element name in it that's not allowed in XML.

He's talking about the element g:plusone but it's the same issue.

But I disagree slightly. Colons are valid in element local names in XML 1.0. They're only disallowed in XML 1.0 + namespaces So the warning message could definitely be improved.

UPDATE: I previously offered a workaround based on document.write, but as Jan M points out in the comments, IE has it's own ideas about what to do with elements with a colon in their tag names, so it didn't work there. Instead, I recommend following Jan's answer.