HTML attribute with/without quotes

Question

Is there any difference between the following code blocks?

<iframe src="http://example.com" width=100%></iframe> 

<iframe src=http://example.com width="100%"></iframe> 

I've tried both and both seem to work, but I'm asking just in case there's something I need to be careful with?

Answer 1

There is no practical difference except

1. if you validate your page, quotation marks may or may not be needed to avoid error messages, depending on doctype being used
2. if you serve the page with an XML content type to browsers (which is rare and seldom useful), then the quotes are required – otherwise the page is not displayed at all, just an error message
3. if the page is otherwise processed with XML tools, the quotes are necessary.

Otherwise, the quotation marks are really needed only if the attribute value contains a space, a line break, an Ascii quotation mark ("), an Ascii apostrophe ('), a grave accent (`), an equals sign (=), a less than sign (<), or a greater than sign (>). So style = width:20em would work (though it might be seen as somewhat obscure), whereas style = width: 20em would not – due to the space, you would need to write style = "width: 20em".

Many people always write quotation marks around all attribute values, for simplicity. Others think that quotation marks make the code a bit messy, so they omit them when possible.

Quite independently of this, src="www.example.com" means a relative URL reference, not what people expect to mean. You probably meant src="http://www.example.com".