HTML / CSS / JavaScript Tutorial

HTML: types of attribute values

[this page | pdf | back links]

Many HTML attributes accept specific types of input, including the following:





Name of client-side image-map, i.e. a hash character (#) plus the name of a <map> element


A single keyboard character (e.g. as per the accesskey attribute)


A character encoding (i.e. way of representing characters that will be recognised by a receiving computer), such as:

-        UTF-8: Unicode

-        ISO-8859-1: character encoding for Latin alphabet


Name of a CSS class. These must begin with a letter A-Z or a-z, which can be followed by letters (A-Z or a-z), digits (0-9), hypens (“-”) and underscores (“_”). In HTML all such values are case-insensitive, i.e. class names of “abc” and “ABC” are treated as synonymous.


A CSS style definition


Id (identifier) of relevant <datalist> element


A date


The id (identifier) defining the associated element


A file extension starting with a full stop, e.g. .png, .jpg, .pdf, .doc (e.g. used for the accept attribute)


File name of a resource


The id defining the associated form


A named frame (i.e. <iframe> element)


Name of group of commands


Id of a header cell


One or more sizes (in pixels), in the form e.g. sizes="16x16" or sizes="16x16 32x32".


HTML content


Either get or post. These have the following characteristics:

-        get. Use the HTTP ‘get’ method. This includes the form-data in the URL in name/value pairs. The length of the URL is limited and hence the values transmitted will be public (even if the website is accessed using an https call), but users can bookmark the resulting call

-        post. Use the HTTP ‘post’ method. This includes the form-data in the HTTP request, i.e. not in the URL, and is not subject to the same size limitations as the ‘get’ method, but cannot then be bookmarked by users


Name of an input field


An integer


Language of text in linked document. The language code is either an ISO 639-1 two letter language code (e.g. “en”) or such a code followed by a dash and then a two letter ISO country code (the latter can be used if different countries recognise different versions of the same language, e.g. “en-gb” versus “en-us”)

machine-readable format

Machine-readable content


Media or device type


A valid media type, see e.g. http://www.iana.org/assignments/media-types/media-types.xhtml (e.g. as per accept attribute)


MIME type of resource


Name of element, attribute or (for <meta> elements) metadata item

no value

I.e. element should be left black, however see below regarding attribute minimisation and XHTML.


A number (sometimes only an integer is acceptable, e.g. for the cols attribute, sometimes a floating-point value is also acceptable), usually in the form of a string (enclosed in quotes) representing the number


A percentage, e.g. 30%


Regular expression (against which e.g. an input is compared)




Uniform Resource Identifier, see below.


i.e. Uniform Resource Locator. These can be:

-        Absolute, pointing to a specific webpage, e.g. http://www.nematrian.com/Introduction.aspx, or

-        Relative, pointing to a file relative to some base, usually the directory or website within which the page accessing the URL is position, e.g. example.htm

x1, y1, x2, y2

Typically involve coordinates as per the coords attribute


A date (in a specific machine and location independent format)


When a value the attribute can take is shown as the same as its own name then this is a Boolean-style attribute, meaning that in HTML the attribute should either be mentioned (but assigned no value), in which case the attribute applies, or be absent, in which case the attribute does not apply. In XHTML, such attribute minimisation is not allowed, and the attribute needs to be defined explicitly, taking as its value its own name, e.g. <video … autoplay="autoplay">…</video>.


Event attributes (which usually have the form on…) take values which are JavaScript functions.


Uniform Resource Identifiers (URIs):


‘URI’ stands for ‘Uniform Resource Identifier’. The possible set of parts a URI can contain are illustrated by the following:




A URI encoded string has each instance of certain characters replaced by one, two, three or (rarely) four escape sequences representing the UTF-8 encoding of the character. encodeURI escapes all characters except for the following (so it does not encode characters needed to formulate a complete URI as above, or a few additional ‘unreserved marks’ which do not have a reserved purpose as such and are allowed in a URI ‘as is’):


A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #


There are four global  JavaScript methods that convert strings into URIs and vice versa (six if depreciated methods are included).


encodeURI() escapes all characters except for the following (so it does not encode characters needed to formulate a complete URI as above, or a few additional ‘unreserved marks’ which do not have a reserved purpose as such and are allows in a URI ‘as is’:


A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #


encodeURIComponent() also escapes reserved characters, so escapes all characters except:


A-Z a-z 0-9 - _ . ! ~ * ' ( ) #


escape() (now depreciated, use encodeURI or encodeURIComponent instead) encodes all characters with the exception of * @ - _ + . /


decodeURI(), decodeURIComponent() and unescape() are the inverses of encodeURI(), encodeURIComponent() and escape() respectively.


If you want to encode a string but avoid encoding square brackets (these are becoming reserved characters for IPv6) then it is recommended that you use a JavaScript statement like:




Contents | Prev | Next | HTML Attributes

Desktop view | Switch to Mobile