Content versus IDL attributes

In HTML, most attributes have two faces: the content attribute and the IDL attribute.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via element.setAttribute() or element.getAttribute(). The content attribute is always a string even when the expected value should be an integer. For example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setAttribute("maxlength", "42") on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

Most of the time, IDL attributes will return their values as they are really used. For example, the default type for <input> elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the type IDL attribute will return the string "text".

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so input.maxlength is always going to return a number and when you set input.maxlength ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.

Script macros

Differently from text nodes, which might always be the result of a <script> element placed in the same position in the HTML source (see, for instance, document.write()), attributes can be edited only by scripts placed somewhere else in the page. However historically this has not always been the case. Netscape Navigator supported a feature called "JavaScript entities" or "script macros", by which script code could be included in HTML attribute values and determine their result using a syntax similar to that of character entity references.

For example, according to such syntax, the code <img width="&{prompt('Width?')};" src="foo.jpg"> would call the JavaScript prompt() function to ask the user how wide the image should be.

The HTML 4.01 specification reserves a syntax for the "future support of script macros" in HTML attributes, but these have not been incorporated into later standards and are not supported by any current browser (including Firefox). A polyfill (entities.js) has been created in order to allow "script macros" in browsers that do not natively support this feature.