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

Question

I am getting the following error in w3 validator,

 Line 62, Column 140: Element name gcse:searchbox-only cannot be represented as XML 1.0.

I am using Google search bar inside website which is added by this code,

<gcse:searchbox-only></gcse:searchbox-only>

Please help out to avoid this error. Thanks

Shaggy

Answer 1

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.

Liveried

Thanks for the tip: this trick works on Firefox but on IE it refuses to load the search box – Twinned

Answer 2

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" >

Twinned

except that this code fragment, which I also found, does not render a search box on html5 validator on an asp.net C# form. Using the top method renders an Unrecognized namespace 'gcse' warning. – Carbonado

Well, it works for me, so perhaps you have something on your C# from that interferes – Twinned

Answer 3

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.

Banter

Answer 4

Solution is very simple, Don't use directly the google search tag in html page. Just place a simple javascript code to insert the google search tag in html by javascript's innerhtml option.

Here is the example:

<div id="gsearch"></div>

<script>
   var gcseDiv = document.getElementById('gsearch');
   gcseDiv.innerHTML = '<gcse:search></gcse:search>'
</script>

After this line you can write or paste your google search code which will be same as below

      <script>
      (function() {
                var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxx';
                var gcse = document.createElement('script');
                gcse.type = 'text/javascript';
                gcse.async = true;
                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                    '//www.google.com/cse/cse.js?cx=' + cx;
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(gcse, s);
              })();

      </script>

Suggestion: Just put the above div and both script in a single parent div and manage css for parent div only.

Looselimbed

Answer 5

Maybe this is too simple, but I worked around the problem by just putting this inside and at the end of the javascript:

document.write('<gcse:search><\/gcse:search>');

And removed

It works in IE, Chrome, Firefox and Safari and validates.

Unlive

Are you sure about that </script> all by itself? Looks like one line too many. – Chirp

document.write('<gcse:search><\/gcse:search>'); </script> – Unlive

And remove <gcse:search></gcse:search> – Unlive

To have code formatted properly in answers, start the line with four spaces. – Chirp

Answer 6

Use the following code if you only want to display the searchbox (without the resultsbox) using a DIV:

<div class="gcse-searchbox-only"></div>

Coulombe