Using HTML tags in JavaScript strings while complying with W3C rules

Question

Here's my code:

<a href="#">
    <img src="myimage.jpg" 
     onmouseover="showDescription(
          'Text', 'Text with HTML tags in them<br />More text');" 
     onmouseout="revertDescription();" 
     alt="Image description">

The W3C Markup Validator doesn't like this. It doesn't want HTML tags inside my JavaScript code. Here's the error message it produces if I attempt this:

character "<" is the first character of a delimiter but occurred as data

How can I fix this while making sure that my page doesn't mess up if I pass the HTML tag-containing string to document.getElementById('myElement').innerHTML?

Answer 1

You could wrap your functions inside separate <script>...</script> tags somewhere else in the document, and there use ...

<script>
//<![CDATA[
    ...code...
//]]>
</script>

From http://javascript.about.com/library/blxhtml.htm:

To fix this problem wer can do one of two things. The simplest way, particularly if the Javascript contains more than just one or two lines, is to make the Javascript external to the page resulting in their being nothing between the script tags to stop the page validating.

If it is just one or two lines then it is probably not worth making an external script so you will want to leave the content between the script tags and tell the validator that this is to be ignored. We do this by placing the Javascript code within a CDATA tag like this ...

Answer 2

How about putting this within a <script ...> block:

var myText = 'Text with HTML tags in them<br />More text';

And later in your HTML:

<a href="#">
    <img src="myimage.jpg" 
     onmouseover="showDescription(
          'Text', myText);" 
     onmouseout="revertDescription();" 
     alt="Image description">

Answer 3

There are many ways to get there.

1. Use < or < instead of <
   Use > or > instead of >
   
2. Get a id to the image, such as "image1", then document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text');

Hope this works.

Answer 4

onmouseover="showDescription('Text', 'Text with HTML tags in them<br />More text');"

Like with all attribute values, you must HTML-encode &, <, and the attribute delimiter (" here). The fact that it's JavaScript inside the attribute value makes no difference; the HTML attribute value is decoded before JavaScript gets a look at it.

onmouseover="showDescription('Text', 'Text with HTML tags in them<br />More text');"

This is in contrast to a <script> element, whose contents are CDATA and thus not &-escaped in HTML4. In XHTML there are no CDATA elements; you can add a <![CDATA[ section to make XHTML behave the same, but it's usually simpler for both script elements and event handler attributes to just avoid the problem by never using a & or < character. In a string literal another escape is available which you can use to get around this:

onmouseover="showDescription('Text', 'Text with HTML tags in them\x3Cbr />More text');"