2

I recently went to myspace website to check out how they were doing :) on their HTML code, there's this piece of inline jQuery within their HTML code:

<script type="text/html" id="AutoCompleteResultsTemplate">
<![CDATA[
<* var q = MySpace.Search.Utils.TranslateSpecialChars(this.query); *>
<span class="suggestions">
<*=this.suggestionResource *>
</span>
<ul>
    <* jQuery.each(this.results, function(i,v) {
        jQuery.each(v, function(j, d) {
     *>
    <li data-query="<*=d.displayText *>" data-url="<*= d.url *>">
        <span class="type"><*=d.type *></span>
        <*=MySpace.Search.Utils.HighlightCharacters(d.displayText, q) *>
    </li>
    <* }); 
      }); *>
    <li class="last" data-query="<*=this.query *>" data-url="<*= this.allResultUrl *>">
        <span class="type"><*=this.allResultText *></span>
        <*=this.searchResource *> '<*= this.query *>'
    </li>
</ul>
<iframe></iframe>
]]>
</script>

I never used CDATA before, but I know it's used for XHTML (so that when you have inline javascript, it still validates)while myspace is currently using HTML 5. Is there any particular reason they use CDATA? thanks in advance.

Sparkup
  • 3,686
  • 2
  • 36
  • 50
Benny Tjia
  • 4,853
  • 10
  • 39
  • 48

1 Answers1

0

The pasted code is invalid - there is no closing script tag(OP edit). There is no id attribute for script elements(added in HTML5) and the type of "text/html" is invalid for script elements(allowed in HTML5), the content is not valid HTML or script.

It is junk.

Likely it depends on browsers ignoring the content because of the invalid type attribute, then depends on non-standard suport for the id attribute, and finally probably gets the textContent/innerHTML and does something with the text.

I would call it junk and an example of web development by mystic incantation.

A similar approach is to include script elements with a bogus src attribute value and content. The content will be ignored because of the src attribute, but can be retrieved and used later using textContent/innerHTML. At least that approach can be used with valid markup (but is still not recommended).

Edit

CDATA sections should sections should only be used with MathML or SVG (http://www.w3.org/TR/html5/syntax.html#cdata-sections).

RobG
  • 142,382
  • 31
  • 172
  • 209
  • 6
    A script element is [allowed any MIME type](http://www.w3.org/TR/html-markup/script.html#script.attrs.type) because it "enables dynamic script and data blocks to be included in documents". [ID](http://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.id) is valid on any element. The code above as it stands, if pasted into the head of an otherwise valid HTML5 template, [passes validation](http://validator.w3.org/check?uri=http%3A%2F%2Fwww.boogdesign.com%2Fexamples%2Fclient-side-template-valid.html&charset=%28detect+automatically%29&doctype=Inline&group=0). It is not junk. – robertc Jul 27 '11 at 07:56
  • HTML5 is mentioned in the question title, the question itself and in the tags. The whole point of putting something other that `text/javascript` is so that it won't get executed. The HTML5 style DOCTYPE was specifically chosen because it's the shortest possible string that puts all browsers in standards mode. – robertc Jul 28 '11 at 10:00
  • 1
    @robertc—I responded with an HTML4 focused answer because that is still the most recent HTML standard, though HTML5 seems to be here to stay. In any case, the HTML5 specification says that CDATA sections are invalid in HTML documents, they are intended for MathML and SVG documents, see [http://www.w3.org/TR/html5/syntax.html#cdata-sections](http://www.w3.org/TR/html5/syntax.html#cdata-sections). – RobG Feb 27 '13 at 23:05