How To Quote Element Attribute Values Properly?

You know that attribute values must be quoted. But how to attribute values properly? Here are some basic rules you should remember:

• An attribute value must be quoted.
• An attribute value can be quoted with double quotes as "...".
• An attribute value can be quoted with single quotes as '...'.
• If double quotes appear in an attribute value, you should use single quotes to quote the value.
• If single quotes appear in an attribute value, you should use double quotes to quote the value.
• If both double quotes and single quotes appear in an attribute value, you should replace those quotes with entities: " and &apos.
• If an ampersand sign "&" appears in an attribute value, you must replace it with entity: &.

Here are some interesting examples of quoted attribute values:

• <img src=fyi.gif alt=FYI/> - Invalid, values must be quoted.
• <img src="/fyi.gif" alt="FYI"/> - Valid, quoted with double quotes.
• <img src='fyi.gif' alt='FYI'/> - Valid, quoted with double quotes.
• <img src="/fyi.gif" alt="FYIcenter.com's Home"/> - Valid, single quote in double quotes.
• <img src="/fyi.gif" alt='FYIcenter.com's Home'/> - Invalid, single quote in single quotes.
• <img src="/fyi.gif" alt='FYIcenter.com&apos;s Home'/> - Valid, entity in single quotes.

⇒ Ampersand Sign in HTML Attribute Values

⇐ Attribute Name Case Sensitive

⇑ HTML Tag and Attribute Syntax

⇑⇑ HTML Tutorials