Quoting HTML Element Attribute Values

Q

How To Quote Element Attribute Values Properly?

✍: FYIcenter.com

A

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

2023-09-23, 1253🔥, 0💬