The miscellaneous grouping of attributes will have no hierarchy as they can be used on many different elements.
The accept
attribute gives the list of types for the server:
The elements used in the accept
attribute are form
and input
.
The accept
attribute allows you to suggest the file type that this form or input should accept. You can use audio/*
, video/*
, image/*
, a MIME type, or the extension.
Here is an example looking for PNG files:
The accept-charset
attribute gives the list of support charsets:
The form
element is used in the accept-charset
attribute.
The accept-charset
attribute sets the charset that the form will accept. UTF-8 is most commonly used as it accepts many characters from many languages.
Here is an example of using the charset
attribute:
The action
attribute is where the form is processed, the syntax is as follows:
The form
element is used in the action
element.
The action
attribute consists of the URL that will process the form's data.
Here is an example:
The alt
attribute is an alternative text for the element:
The elements that are used in the alt
attribute are applet
, area
, img
, and
input
.
The alt
attribute is an alternate text in case the element cannot render the code. The text should pass the same information to the user that the image would have.
Some browsers (Chrome being the most commonly used) will not display the text, and you may need to use the title
attribute. This is not the standardized behavior.
Here is an example using an image:
The async
attribute is used for the asynchronous execution of the script:
The script
element is used in the async
attribute.
The async
attribute tells the browser to load and execute the script asynchronously. By default, the browser will load scripts synchronously. An asynchronous load will immediately download and parse the script without blocking the rendering of the page.
Here is an example:
The autocomplete
attribute defines whether the element can be autocompleted:
The form
and input
elements are used in the autocomplete
attribute.
The autocomplete
attribute lets the browser know whether or not it can autocomplete the form or input from the previous values. This can have on
and off
as the values.
Here is an example:
The autofocus
attribute defines whether the element would be focused automatically on the elements:
The button
, input
, select
, and
textarea
elements are used in the autofocus
attribute.
The autofocus
attribute will set the focus to the element. This should only be used on one element.
Here is an example of the
autofocus
attribute with a text input:
The autoplay
attribute defines whether the audio or video track should play as soon as possible:
The audio
and video
elements are used in the autoplay
attribute.
The autoplay
attribute will make the element play as soon as it can, without having to stop to load.
Here is an example with an audio file:
The autosave
attribute defines whether the previous values should be saved:
The input
element is used in the autosave
attribute.
The autosave
attribute tells the browser to save values entered into this input. This means that on the next page load, the values will be persisted. It should have a unique name that the browser can associate the saved values to. This attribute may or may not work in some browsers as it is not fully standardized.
Here is an example:
The cite
attribute has the source of the quote:
The blockquote
, del
, ins
, and q
elements are used in the cite
attribute.
The cite
attribute points to the source of a quote by providing a URL.
Here is an example:
The cols
attribute gives the number of columns:
The textarea
element is used with the cols
attribute.
The cols
attribute gives the number of columns in a textarea
element.
Here is an example of it in use:
The colspan
attribute gives the number of columns a cell should span:
The td
and th
elements are used in the colspan
attribute.
The colspan
attribute gives the number of columns a table cell should span.
Here is an example using a table element:
The datetime
attribute gives the date and time associated with this element:
The del
, ins
, and
time
elements are used with the datetime
attribute.
The datetime
attribute should be the time that the action implied by the element was taken. This attribute is mainly used with the del
and ins
elements to show when the deletion or insertion occurred.
Here is an example using del
:
The disabled
attribute defines whether the element can be used or not:
The
button
, fieldset
, input
, optgroup
, option
, select
, and textarea
elements are used in the disabled
attribute.
The disabled
attribute makes the element unusable. If the element is disabled, it cannot be used. This means that buttons cannot be clicked, text areas and text inputs cannot have text entered, dropdowns cannot be changed, and so on.
Here is an example with a button
element:
The download
attribute sets a link to download a resource:
The
a
element is used in the download
attribute.
The download
attribute tells the browser to download the resource when clicked on. This means that when the a
element is clicked, a save dialog will appear with the value of the attribute as the default name.
Here is an example:
The content
attribute gives a value to go with the name attribute:
The
meta
element is used in the content attribute.
The content
attribute is an attribute for the meta
tag. It is used as the value of the name
attribute.
Here is an example:
The controls
attribute defines whether the controls should be displayed:
The audio
and
video
elements are used in the controls
attribute.
The controls
attribute tells the browser to display controls for a media file. This is a Boolean attribute.
Here is an audio example:
The for
attribute sets the element this attribute is associated with:
The
label
element is used with the for
attribute.
The for
attribute specifies which form input the label is associated with. This is specified using the ID of the input element. The label will also allow the user to click on it and focus on the input.
Here is an example with a text input:
The form
attribute sets the form with which this input is associated:
The
button
, fieldset
, input
, labellable
, object
, output
, select
, and
textarea
elements are used in the form
attribute.
The form
attribute references the form that these controls are in:
The
formaction
attribute sets the form action for the element:
The
button
and input
elements are used in the formaction
attribute.
The formaction
attribute will override the action of the form for this element. This should be a URL. If used on the form element itself, this attribute specifies the target for the form data. If used on an element within the form (for example, button), this overrides the declared value on the form itself.
Here is an example with a button:
The height
attribute sets the height of an element:
The
canvas
, embed
, iframe
, img
, input
, object
, and video
elements are used in the height
attribute.
The height
attribute sets the height of the element. Only the elements listed in the previous section should use this attribute and all other elements should use CSS to set their height.
Note
You may see many HTML documents that use height
on many elements. This is not valid anymore and CSS should be used to set the height on any other elements.
Here is an example with a canvas:
The href
attribute gives the URL of the resource:
The
a
, base
, and link
elements are used in the
href
attribute.
The URL for the element is given by the href
attribute.
Here is an example with an anchor element:
The
hreflang
attribute states the language of the resource:
The a
and
link
elements are used in the hreflang
attribute.
The hreflang
attribute is the language of the linked document. The acceptable values should be in the BCP47 language. There are too many to list here, but you can read the standard at http://www.ietf.org/rfc/bcp/bcp47.txt.
Here is an example:
The label
attribute states the title of the track:
The track
element is used in the label
attribute.
The label
attribute is used with the track
element to give a title to the track.
Here is an example with subtitles for a video:
The list
attribute gives the list of options:
The
input
element is used in the list
attribute.
The list
attribute ties to a datalist
attribute with a list of options for input
.
This example has a list of fruits for a text input:
The loop
attribute defines whether the element should loop the media:
The audio
and
video
elements are used in the loop
attribute.
The loop
attribute is a Boolean attribute which will play the media on a loop.
Here is an example with an audio
element:
The
max
attribute defines the maximum value:
The input
and progress
elements are used in the max
attribute.
The max
attribute sets the maximum numeric or date-time value allowed.
Here is an example with an input:
The maxlength
attribute defines the maximum number of characters:
The input
and
textarea
elements are used in the maxlength
attributes.
The maxlength
attribute sets the maximum number of characters.
Here is an example with an input:
The media
attribute sets the media for the linked resource:
The
a
, area
, link
, source
, and style
elements are used in the media
attribute.
The media
attribute specifies which media this resource is for. Usually, this attribute is used with link and the CSS. The standardized values are screen
, print
, and all
. The screen
value is for displaying on a monitor, the print
value is when printing, and the all
value is both. Different browsers do have a few other values, but nothing that works across all.
Here is an example with CSS to create a print stylesheet:
The method
attribute defines the HTTP method of form:
The form
element is used in the method
attribute.
The method
attribute sets the HTTP method of the form. The two values are GET
, which is the default, and POST
.
Here is an example of a form that submits using the POST
HTTP method:
The min
attribute defines the minimum value:
The input
element is used in the min
attribute.
The min
attribute is the opposite of max
. It sets the minimum value for an input.
Here is an example:
The multiple
attribute defines whether multiple values can be selected:
The
select
element is used in the multiple
attribute.
The multiple
attribute allows you to select multiple values. This is a Boolean attribute.
Here is an example:
The name
attribute is the name of the element:
The
button
, form
, fieldset
, iframe
, input
, object
, select
, textarea
, and
meta
elements are used in the name
attribute.
The name
attribute names an element. This allows you to get the value of the element in a submitted form.
Here is an example with an input:
The novalidate
attribute defines whether the validation should be skipped:
The
form
element is used in the novalidate
attribute.
The novalidate
attribute sets the form to not validate when submitted. The browser will validate the input without adding any client-side code. This is a Boolean attribute.
Here is an example:
The
pattern
attribute defines a regular expression:
The
input
element is used in the pattern
attribute.
You can use a regular expression in this attribute to validate the input.
Here is an example that will only be valid with numbers:
The placeholder
attribute gives a hint for the user in the element:
The input
and
textarea
elements are used in the placeholder
attribute.
When the element has not been interacted with (no value and is not in focus), it will display the text in this attribute. The value will disappear once the element is interacted with.
Here is an example with input
:
The poster
attribute gives an image for a video:
The video
element is used in the poster
attribute.
The poster
attribute should point to an image that will be the poster (or placeholder) for a video element until the video is loaded.
Here is an example:
The readonly
attribute defines whether the element is editable:
The
input
and textarea
elements are used in the readonly
attribute.
The readonly
attribute makes the element readonly or not editable. This is a Boolean attribute.
Here is an example with a text input:
The rel
attribute defines the relationship of the element:
The a
and
link
elements are used in the rel
attribute.
The rel
attribute is the relationship between the linked resource and the document. Usually, you will see this used with the link
element and CSS or with the a
element and the value of nofollow
.
Here is a CSS example:
The required
attribute defines whether the element is required when submitting a form:
The
input
, select
, and textarea
elements are used in the required
attribute.
The required
attribute makes the element required in the form. The form will not get submitted until the element is filled out. This is a Boolean attribute.
Here is an example with a text input:
The reversed
attribute changes the list order display:
The ol
element is used in the reversed
attribute.
The reversed
attribute is only an attribute of an ordered list, and it will render the list in the reverse order. The items are not in reverse, but rather the numbered list indicators are. This is a Boolean attribute.
Here is an example:
The rows
attribute sets rows in a text area:
The textarea
element is used in the rows
attribute.
The rows
attribute sets the number of rows in textarea
.
Here is an example:
The rowspan
attribute sets the number of rows that a cell will span:
The td
and
th
elements are used in the rowspan
attribute.
The rowspan
attribute is used on the table cell elements. It will make the cell span the number of rows in the value.
Here is an example:
The scope
attribute defines the cell with which the element is associated:
The td
and
th
elements are used in the scope
attribute.
The scope
attribute indicates what the cell is associated with. For example, this could be row
or col
. This is a great benefit for accessibility. It helps to convey the relationship of the rows and columns in the table when a screen reader is used.
Here is an example with a table cell:
The selected
attribute sets the default selection:
The option
element is used in the selected
attribute.
The selected
attribute will set the option to be selected when the page loads. This should only be set on one option
element per select
element. This is a Boolean attribute.
Here is an example:
The size
attribute sets the width of element:
The input
and
select
elements are used in the size
attribute.
The size
attribute determines the width of the element unless the element is an input and text or password. It will then determine the number of characters the element can display. This is specified as the number of characters in the integer form. The default for this is 20
.
Here is an example with a text input:
The src
attribute gives the URL for the element:
The
audio
, embed
, iframe
, img
, input
, script
, source
, track
, and video
elements are used in the src
attribute.
The src
attribute gives the URL of the resource for the element.
Here is an example with an image
element:
The start
attribute sets the starting number:
The
ol
element is used in the start
attribute.
The start
attribute will change the starting number for an ordered list.
Here is an example:
The step
attribute determines the jump between each number:
The input
element is used in the step
attribute.
The step
attribute is used with an input
element and the type
attribute of number or date-time. It determines how far to step for each increment.
Here is an example with a number input. You will only be able to increment by 5
four times before reaching the max:
The
type
attribute defines the type of the element:
The
button
, input
, embed
, object
, script
, source
, and style
elements are used in the type
attribute.
The type
attribute is one of the most complex attributes. It can completely change the look and behavior of an element. For example, input
.
Here is a list for each element:
button
: Following are the values of the button
attribute:button
: This is the default valuereset
: This resets the formsubmit
: This submits the form
input
: Please view the input element section from the previous chapter.embed
: This will be the MIME type of the embedded resource.object
: This will be the MIME type of the object.script
: This will be the MIME type. Usually text
/javascript
are used.source
: This will be the MIME type.style
: This will be MIME type. Usually text
/css
are used.
Here is an example with an input:
The value
attribute sets the value of the element:
The
button
, input
, li
, option
, progress
, and
param
elements are used in the value
attribute.
The value
attribute will set the value of the element at page load.
Here is an example with a text input:
The width
attribute sets the width of the element:
The
canvas
, embed
, iframe
, img
, input
, object
, and video
elements are used in the width
attribute.
The width
attribute sets the width of the element.
Note
You may see many HTML documents that use width on many elements. This is not valid any more; CSS should be used to set the width on any other elements.
Here is an example with a canvas
element:
The
wrap
attribute sets how the text is wrapped:
The textarea
element is used in the wrap
attribute.
The wrap
attribute decides whether or not text can be wrapped in textarea
. The values can be hard or soft. A hard value will insert line breaks into the text. It must also be used with the cols
attribute, so it knows where the end of the line is. A soft value will not insert any line breaks.
Here is an example: