HTML elements have attributes (properties) which provide additional information about the element. Attributes always appear inside the start tag for the HTML element. Not all HTML elements require attributes. However, the majority of self-closing elements, such as the <img> element must have certain attributes set or it will do nothing.
When writing attributes the attribute name appears followed by an equal sign then a pair of quotes. Inside the quotes is the value of the attribute. The example below shows an image element with attributes set.
<img src=“imgs/my-=logo.png” alt=“My Logo” width=“540” height=“150”>The Problem
Okay, so if you’ve ever played around with HTML you are probably familiar with the use of attributes. However, often times I find that students encounter a problem with their attributes. While the code looks right at first glance. The HTML element is closed, the attribute(s) are in the start tag and all values are inside quotes. Yet, for some reason, these elements are not passing validation and the browser is not rendering the attributes.
What causes this?
As it turns out it’s the quotes themselves. When writing HTML everything has to be in plain text format, including the quotes. The quotes written as part of the attribute value must be straight quotes (sometimes called dumb quotes).
Most rich text editors, such as MS Word will use curly quotes (sometimes called smart quotes). These quotes are for decorative and while they look pretty they don’t work with HTML attributes.
Here is an example of the problem:
Note the difference between the curly quotes and the straight quotes.
What Causes This?
If you are typing your HTML inside an HTML text editor you should never encounter this issue. However, if you are copy and pasting from another source, more than likely you are copying the curly quotes.
Say for example your instructor has provided you an example for the HTML code as an MS Word or PDF file. If you simply copy and paste from that document you mostly likely will be copying curly quotes.
Another reason for curly quotes is not using a standard HTML editor. If you used a rich text editor (like MS Word) to write your code you will always have curly quotes, even if you copy and paste it into a HTML editor later.
The Solution
Sadly there is no easy solution other than simply typing the quotes inside the HTML editor. If you have lots of curly quotes, this may take a while. In some cases, it may even be better just to rewrite the code to ensure that you curly quotes have all been changed.
Some HTML editors include a Find and Replace feature that you might be able to use to find all curly quotes and replace them with straight ones.
Post Citations
HTL Attributes (1999-2015). Retrieved 07 09, 2015, from W3 Schools: http://www.w3schools.com/html/html_attributes.asp