Miscellaneous

The miscellaneous grouping of attributes will have no hierarchy as they can be used on many different elements.

accept

The accept attribute gives the list of types for the server:

<element accept></element>

Elements

The elements used in the accept attribute are form and input.

Description

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:

<input type="file" accept=".png, image/png"/>

accept-charset

The accept-charset attribute gives the list of support charsets:

<element accept-charset></element>

Elements

The form element is used in the accept-charset attribute.

Description

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:

<form accept-charset="UTF-8"></form>

action

The action attribute is where the form is processed, the syntax is as follows:

<element action ></element>

Elements

The form element is used in the action element.

Description

The action attribute consists of the URL that will process the form's data.

Here is an example:

<form action="form-process.php"></form>

alt

The alt attribute is an alternative text for the element:

<element alt ></element>

Elements

The elements that are used in the alt attribute are applet, area, img, and input.

Description

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:

<img alt="Login button." src="non-loading-image.png"/>

async

The async attribute is used for the asynchronous execution of the script:

<element async ></element>

Elements

The script element is used in the async attribute.

Description

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:

<script src="application.js" async></script>

autocomplete

The autocomplete attribute defines whether the element can be autocompleted:

<element autocomplete ></element>

Elements

The form and input elements are used in the autocomplete attribute.

Description

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:

<input type="text" autocomplete="off" placeholder="Will not autocomplete"/>

autofocus

The autofocus attribute defines whether the element would be focused automatically on the elements:

<element autofocus ></element>

Elements

The button, input, select, and textarea elements are used in the autofocus attribute.

Description

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:

<input type="text" autofocus/>

autoplay

The autoplay attribute defines whether the audio or video track should play as soon as possible:

<element autoplay ></element>

Elements

The audio and video elements are used in the autoplay attribute.

Description

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:

<audio autoplay src="audio.mps"></audio>

autosave

The autosave attribute defines whether the previous values should be saved:

<element autosave ></element>

Elements

The input element is used in the autosave attribute.

Description

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:

<input type="text" autosave="textautosave" />

cite

The cite attribute has the source of the quote:

<element cite ></element>

Elements

The blockquote, del, ins, and q elements are used in the cite attribute.

Description

The cite attribute points to the source of a quote by providing a URL.

Here is an example:

<blockquote cite="http://en.wikiquote.org/wiki/The_Good,_the_Bad_and_the_Ugly">
    After a meal there's nothing like a good cigar.
</blockquote>

cols

The cols attribute gives the number of columns:

<element cols ></element>

Elements

The textarea element is used with the cols attribute.

Description

The cols attribute gives the number of columns in a textarea element.

Here is an example of it in use:

<textarea cols="30"></textarea>

colspan

The colspan attribute gives the number of columns a cell should span:

<element colspan ></element>

Elements

The td and th elements are used in the colspan attribute.

Description

The colspan attribute gives the number of columns a table cell should span.

Here is an example using a table element:

<table>
    <tr><td colspan="2">1 and 2</td></tr>
    <tr><td>1</td><td>2</td></tr>
</table>

datetime

The datetime attribute gives the date and time associated with this element:

<element datetime ></element>

Elements

The del, ins, and time elements are used with the datetime attribute.

Description

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:

My name is <del datetime="2014-12-16T23:59:60Z">John</del>Josh.

disabled

The disabled attribute defines whether the element can be used or not:

<element disabled ></element>

Elements

The button, fieldset, input, optgroup, option, select, and textarea elements are used in the disabled attribute.

Description

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:

<button disabled>This is a disabled button</button>

download

The download attribute sets a link to download a resource:

<element download ></element>

Elements

The a element is used in the download attribute.

Description

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:

<a href="example.pdf" download="example.pdf">Save the PDF</a>

content

The content attribute gives a value to go with the name attribute:

<element content ></element>

Elements

The meta element is used in the content attribute.

Description

The content attribute is an attribute for the meta tag. It is used as the value of the name attribute.

Here is an example:

<meta name="example" content="value for example" />

controls

The controls attribute defines whether the controls should be displayed:

<element controls ></element>

Elements

The audio and video elements are used in the controls attribute.

Description

The controls attribute tells the browser to display controls for a media file. This is a Boolean attribute.

Here is an audio example:

<audio controls src="example.mp3"></audio>

for

The for attribute sets the element this attribute is associated with:

<element for ></element>

Elements

The label element is used with the for attribute.

Description

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:

<label for="username">Username</label>
<input type="text" id="username" name="username" />

form

The form attribute sets the form with which this input is associated:

<element form ></element>

Elements

The button, fieldset, input, labellable, object, output, select, and textarea elements are used in the form attribute.

Description

The form attribute references the form that these controls are in:

<form method="get" id="example-form">
    
</form>
<input type="text" form="example-form" />

formaction

The formaction attribute sets the form action for the element:

<element formaction ></element>

Elements

The button and input elements are used in the formaction attribute.

Description

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:

<form method="get" action="formaction.php">
    <button formaction="buttonaction.php">Press me</button>
</form>

height

The height attribute sets the height of an element:

<element height ></element>

Elements

The canvas, embed, iframe, img, input, object, and video elements are used in the height attribute.

Description

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:

<canvas height="400" width="400"></canvas>

href

The href attribute gives the URL of the resource:

<element href ></element>

Elements

The a, base, and link elements are used in the href attribute.

Description

The URL for the element is given by the href attribute.

Here is an example with an anchor element:

<a >Google</a>

hreflang

The hreflang attribute states the language of the resource:

<element hreflang ></element>

Elements

The a and link elements are used in the hreflang attribute.

Description

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:

<a  hreflang="en">Google</a>

label

The label attribute states the title of the track:

<element label ></element>

Elements

The track element is used in the label attribute.

Description

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:

<video src="sample.mp4">
    <track kind="subtitles" label="English Subtitles" src="en.vtt" />
</video>

list

The list attribute gives the list of options:

<element list ></element>

Elements

The input element is used in the list attribute.

Description

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:

<input type="text" list="fruit" />
<datalist id="fruit">
    <option>Apple</option>
    <option>Banana</option>
</datalist>

loop

The loop attribute defines whether the element should loop the media:

<element loop ></element>

Elements

The audio and video elements are used in the loop attribute.

Description

The loop attribute is a Boolean attribute which will play the media on a loop.

Here is an example with an audio element:

<audio src="example.mp3" loop></audio>

max

The max attribute defines the maximum value:

<element max ></element>

Elements

The input and progress elements are used in the max attribute.

Description

The max attribute sets the maximum numeric or date-time value allowed.

Here is an example with an input:

<input type="number" min="0" max="5" >

maxlength

The maxlength attribute defines the maximum number of characters:

<element maxlength ></element>

Elements

The input and textarea elements are used in the maxlength attributes.

Description

The maxlength attribute sets the maximum number of characters.

Here is an example with an input:

<input type="text" maxlength="5">

media

The media attribute sets the media for the linked resource:

<element media ></element>

Elements

The a, area, link, source, and style elements are used in the media attribute.

Description

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:

<link rel="stylesheet" href="print.css" media="print"/>

method

The method attribute defines the HTTP method of form:

<element method ></element>

Elements

The form element is used in the method attribute.

Description

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:

<form method="post" action="formaction.php"></form>

min

The min attribute defines the minimum value:

<element min ></element>

Elements

The input element is used in the min attribute.

Description

The min attribute is the opposite of max. It sets the minimum value for an input.

Here is an example:

<input type="number" min="2">

multiple

The multiple attribute defines whether multiple values can be selected:

<element multiple ></element>

Elements

The select element is used in the multiple attribute.

Description

The multiple attribute allows you to select multiple values. This is a Boolean attribute.

Here is an example:

<select multiple>
    <option>First</option>
    <option>Second</option>
</select>

name

The name attribute is the name of the element:

<element name ></element>

Elements

The button, form, fieldset, iframe, input, object, select, textarea, and meta elements are used in the name attribute.

Description

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:

<input type="text" id="username" name="username" />

novalidate

The novalidate attribute defines whether the validation should be skipped:

<element novalidate ></element>

Elements

The form element is used in the novalidate attribute.

Description

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:

<form method="post" action="formaction.php" novalidate></form>

pattern

The pattern attribute defines a regular expression:

<element pattern ></element>

Elements

The input element is used in the pattern attribute.

Description

You can use a regular expression in this attribute to validate the input.

Here is an example that will only be valid with numbers:

<input pattern="[0-9].+" type="text" />

placeholder

The placeholder attribute gives a hint for the user in the element:

<element placeholder ></element>

Elements

The input and textarea elements are used in the placeholder attribute.

Description

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:

<input type="text" name="username" placeholder="Please enter username"/>

poster

The poster attribute gives an image for a video:

<element poster ></element>

Elements

The video element is used in the poster attribute.

Description

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:

<video src="video-about-dogs.mp4" poster="images/image-of-dog.png"></video>

readonly

The readonly attribute defines whether the element is editable:

<element readonly ></element>

Elements

The input and textarea elements are used in the readonly attribute.

Description

The readonly attribute makes the element readonly or not editable. This is a Boolean attribute.

Here is an example with a text input:

<input type="text" readonly />

rel

The rel attribute defines the relationship of the element:

<element rel ></element>

Elements

The a and link elements are used in the rel attribute.

Description

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:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

required

The required attribute defines whether the element is required when submitting a form:

<element required ></element>

Elements

The input, select, and textarea elements are used in the required attribute.

Description

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:

<input required type="text" />

reversed

The reversed attribute changes the list order display:

<element reversed ></element>

Elements

The ol element is used in the reversed attribute.

Description

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:

<ol reversed>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

rows

The rows attribute sets rows in a text area:

<element rows ></element>

Elements

The textarea element is used in the rows attribute.

Description

The rows attribute sets the number of rows in textarea.

Here is an example:

<textarea rows="30"></textarea>

rowspan

The rowspan attribute sets the number of rows that a cell will span:

<element rowspan ></element>

Elements

The td and th elements are used in the rowspan attribute.

Description

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:

<table>
    <tr><td rowspan="2">Pets</td><td>Dogs</td></tr>
    <tr><td>Cats</td></tr>
</table>

scope

The scope attribute defines the cell with which the element is associated:

<element scope ></element>

Elements

The td and th elements are used in the scope attribute.

Description

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:

<table>
    <tr><th>Name</th><th>Age</th></tr>
    <tr><td scope="row">Gizmo</td><td>4</td></tr>
</table>

selected

The selected attribute sets the default selection:

<element selected ></element>

Elements

The option element is used in the selected attribute.

Description

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:

<select>
    <option>Cats</option>
    <option selected>Dogs</option>
</select>

size

The size attribute sets the width of element:

<element size ></element>

Elements

The input and select elements are used in the size attribute.

Description

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:

<input type="text" size="100" />

src

The src attribute gives the URL for the element:

<element src ></element>

Elements

The audio, embed, iframe, img, input, script, source, track, and video elements are used in the src attribute.

Description

The src attribute gives the URL of the resource for the element.

Here is an example with an image element:

<img src="dogs.png" />

start

The start attribute sets the starting number:

<element start ></element>

Elements

The ol element is used in the start attribute.

Description

The start attribute will change the starting number for an ordered list.

Here is an example:

<ol start="10">
    <li>1</li>
    <li>2</li>
</ol>

step

The step attribute determines the jump between each number:

<element step ></element>

Elements

The input element is used in the step attribute.

Description

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:

<input type="number" min="0" max="20" step="5" />

type

The type attribute defines the type of the element:

<element type ></element>

Elements

The button, input, embed, object, script, source, and style elements are used in the type attribute.

Description

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 value
  • reset: This resets the form
  • submit: 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:

<input type="password" />

value

The value attribute sets the value of the element:

<element value ></element>

Elements

The button, input, li, option, progress, and param elements are used in the value attribute.

Description

The value attribute will set the value of the element at page load.

Here is an example with a text input:

<input type="text" value="Hey!"/>

width

The width attribute sets the width of the element:

<element width ></element>

Elements

The canvas, embed, iframe, img, input, object, and video elements are used in the width attribute.

Description

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:

<canvas width="200" height="200"></canvas>

wrap

The wrap attribute sets how the text is wrapped:

<element wrap ></element>

Elements

The textarea element is used in the wrap attribute.

Description

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:

<textarea cols="10" wrap="hard"></textarea>