Problems with prettyPhoto iframes in HTML5 validation

Question

When trying to validate a site that contains prettyPhoto links that open an iFrame I get the following errors on any href that contains ?iframe=true&height=100%

Bad value for attribute href on element a: Query component contains a percent sign that is not followed by two hexadecimal digits.

& did not start a character reference. (& probably should have been escaped as &.)

I tried replacing the & with & in the database the hrefs are stored in and even the % with %, but that didn't satisfy the validator, either. I then tried & and % which showed the href correctly as ?iframe=true&height=100% but it didn't influence the size of the iframe anymore.

Is there a way to solve this or do I just have to accept there are 15 errors, as long as the iframes do work?

Answer 1

There are two layers here.

1. A percent sign has special meaning in a URL, so it must be escaped with %25.

2. If you are inserting this value into a tag as HTML, you must use & for ampersand. If on the other hand, you are doing this with Javascript (e.g. element.setAttribute('href', 'foo?bar1&bar2')), then you don't need this.