/

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:

 

Value

Description

#mapname

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

character

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

character_set

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

CSSclass

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.

CSSstyle

A CSS style definition

datalist_id

Id (identifier) of relevant <datalist> element

date

A date

elementID

The id (identifier) defining the associated element

file_extension

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

filename

File name of a resource

formID

The id defining the associated form

framename

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

groupname

Name of group of commands

header_id

Id of a header cell

heightxwidth

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

HTML_content

HTML content

HTTPmethod

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

inputfieldname

Name of an input field

integer

An integer

language-code

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-query

Media or device type

media_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

MIME type of resource

name

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.

number

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

percentage

A percentage, e.g. 30%

regular-expression

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

text

Text

URI

Uniform Resource Identifier, see below.

URL

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

YYYY-MM-DDThh:mm:ssTZD

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:

 

http://username:pword@www.example.org:80/path/file.aspx?a=23&b=has+spaces#anchor

 

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:

 

               encode(str).replace(/%5B/g,'[').replace(%5D/g,']')

 


NAVIGATION LINKS
Contents | Prev | Next | HTML Attributes


Desktop view | Switch to Mobile