HTML Guides for google custom search

The <gcse:search> element is a custom tag from Google's Programmable Search Engine widget and is not part of any HTML specification.

Google's Programmable Search Engine (formerly Custom Search Engine) offers two ways to drop a search box onto a page. The older one uses namespaced tags such as <gcse:search>, <gcse:searchbox>, and <gcse:searchresults>, which the loaded cse.js script finds and replaces with the real widget. Browsers do not recognize the gcse: prefix, so they treat the tag as an unknown element, and the W3C validator rejects it because no such element exists in HTML.

Google supports an equivalent form that is valid HTML: a standard <div> carrying a gcse- class, like <div class="gcse-search">. The script reads the class instead of a custom tag name and renders the same search box. Switching to the class form clears the validation error without changing how the widget works.

HTML examples

Invalid: namespaced <gcse:search> element

<scriptasyncsrc="https://cse.google.com/cse.js?cx=YOUR_SEARCH_ENGINE_ID"></script>

<gcse:search></gcse:search>

Valid: div with the gcse-search class

<scriptasyncsrc="https://cse.google.com/cse.js?cx=YOUR_SEARCH_ENGINE_ID"></script>

<divclass="gcse-search"></div>

The same applies to the other Programmable Search tags: replace <gcse:searchbox> with <div class="gcse-searchbox"></div> and <gcse:searchresults> with <div class="gcse-searchresults"></div>. Each gcse: element has a matching gcse- class that produces the same result and passes validation.