HTML W3C Validation kicks out validation error related to "&amp;"

3/22/2013 11:57 am | #1 Andrew Read

I am running some validation tests on a new site that I am working on and validating against HTML5 kicks the following errors, should these ampersands all be "&amp"?

Thank you.


          Line 245,         Column 118:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …vt_captchasecurityimages.php?width=225&height=75&field=Security_Code&bgcolor=7…                &#9993;
          Line 245,         Column 128:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …securityimages.php?width=225&height=75&field=Security_Code&bgcolor=776415&tran…                &#9993;
          Line 245,         Column 148:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …idth=225&height=75&field=Security_Code&bgcolor=776415&transparent=0&bgimage=&g…                &#9993;
Line 245,         Column 163:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …=75&field=Security_Code&bgcolor=776415&transparent=0&bgimage=&gridfreq=50&grid…                &#9993;
Line 245,         Column 177:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …rity_Code&bgcolor=776415&transparent=0&bgimage=&gridfreq=50&gridcolor=CC2849&g…                &#9993;
Line 245,         Column 186:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …&bgcolor=776415&transparent=0&bgimage=&gridfreq=50&gridcolor=CC2849&gridorder=…                &#9993;
Line 245,         Column 198:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …415&transparent=0&bgimage=&gridfreq=50&gridcolor=CC2849&gridorder=behind&noise…                &#9993;
Line 245,         Column 215:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …&bgimage=&gridfreq=50&gridcolor=CC2849&gridorder=behind&noisefreq=10&noisecolo…                &#9993;
Line 245,         Column 232:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …q=50&gridcolor=CC2849&gridorder=behind&noisefreq=10&noisecolor=0099FF&noiseord…                &#9993;
Line 245,         Column 245:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …r=CC2849&gridorder=behind&noisefreq=10&noisecolor=0099FF&noiseorder=behind&cha…                &#9993;
Line 245,         Column 263:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …=behind&noisefreq=10&noisecolor=0099FF&noiseorder=behind&characters=5&charheig…                &#9993;
Line 245,         Column 281:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …10&noisecolor=0099FF&noiseorder=behind&characters=5&charheight=&font=fonts/MYT…                &#9993;
Line 245,         Column 294:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …=0099FF&noiseorder=behind&characters=5&charheight=&font=fonts/MYTYPE.TTF&textc…                &#9993;
Line 245,         Column 306:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …eorder=behind&characters=5&charheight=&font=fonts/MYTYPE.TTF&textcolor=E4D4AA"…                &#9993;
Line 245,         Column 328:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …rs=5&charheight=&font=fonts/MYTYPE.TTF&textcolor=E4D4AA" alt="security code" w…                &#9993;
Line 245,         Column 501:     & did not start a character reference. (& probably should have been escaped as &amp;.)     …ng" height="18" onClick="document.getElementById('capt1').src+='&ref=1'"></div>                &#9993;
Line 245,         Column 509:     An img element must have an alt attribute, except  under certain conditions. For details, consult guidance on providing  text alternatives for images.     …ng" height="18" onClick="document.getElementById('capt1').src+='&ref=1'"></div>

3/22/2013 12:03 pm | #2 Jason ByrnesWebAssist

W3c validation on ampersands is tricky, the W3c doctype prefers the "&" html entity to be used in query string variables, but in many cases, it causes the links to fail to work properly

3/22/2013 12:13 pm | #3 Andrew Read

Hi Jason,

I just changed these all to ampersands in order to see if the scripts still all worked, and they do. Would it be possible for Design Extender to make these all ampersands automatically so that I don't have to change every one on each form page individually? ;)

Also note another interesting validation error:

Line 245, Column 574: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. …height="18" onClick="document.getElementById('capt1').src+='&ref=1'"></div>

This is only interesting because there is already an alt tag there (alt="security code") and if I add another validation tells me there is two. but with one it kicks the error. Odd.

3/22/2013 12:23 pm | #5 Jason ByrnesWebAssist

the problem with ampersands is that encoding them does not work all the time.

it passes w3c validation, but does not work on all servers.

I have had many times where I tried to be W3C Compliant with links and encode the the ampersands only to have my links not work, it's really a 50 / 50 crap shot on whether encoding the ampersands will work or not.

3/22/2013 12:27 pm | #6 Andrew Read

What about using the URL-encoded value: %26?

If you want to use an ampersand as a value inside the query string of a url (and not as a delimiter for separating arguments), then you should use the URL-encoded value: %26

how-use-amersands-html-encode/

3/22/2013 1:04 pm | #8 Andrew Read

Is it not a literal ampersand when it is used in joining the url elements (&rel=1) ?

Also, did you note the issue with the alt text for the refresh button not being created for the captcha refresh?

3/22/2013 1:11 pm | #9 Jason ByrnesWebAssist

no, that is not a literal ampersand, it is a separating character in that instance.

you use the % escaped version if you want a variable value to contain a literal ampersand:

&rel=1&q=rock%26roll

in this example the & character separates each variable, rel and q. the value for the q variable is rock&roll. the ampersand is used to separate variables so to prevent roll from becoming a variable name rather than a part of the string, you use the % escaped version.

i will log a bug for the issue with the refresh button.

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

HTML W3C Validation kicks out validation error related to "&amp;"

3/22/2013 11:57 am | #1 Andrew Read