HTML type Attribute

HTML type Attribute

The HTML type attribute provides element-specific information about a control, button, resource, or list. Its meaning and permitted values depend on the element on which it is used.

Elements That Use the type Attribute

The type attribute is used by several HTML elements, and its meaning depends on the element.

type Attribute Value

There is no single set of values for the type attribute. The permitted value and its meaning are determined by the element on which the attribute appears.

<input type="email">

<button type="submit">Submit</button>

<source src="video.mp4" type="video/mp4">

In these examples, type identifies an input control, defines button behavior, and provides the MIME type of a media resource.

Using type with <input>

On an <input> element, the type attribute determines the kind of data represented by the control and usually determines the interface the browser provides. Common values include text, email, password, number, date, checkbox, radio, file, range, color, submit, and button.

<input type="text" name="name">
<input type="email" name="email">
<input type="date" name="date">

If the type attribute is omitted or contains an unsupported value, the <input> element uses the Text state.

Using type with <button>

On a <button> element, type controls what the button does when activated. The primary values are submit, reset, and button.

<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
<button type="button">Button</button>

Explicitly specifying the button type can make its intended behavior clear and prevent an ordinary button from unintentionally acting as a submit button when it is associated with a form.

Specifying Resource Types

On the <a> and <link> elements, type provides an advisory MIME type for the referenced resource. On <embed>, <object>, and <source>, it identifies the MIME type of the embedded or alternative resource.

<a href="downloads/sample.txt" type="text/plain">Download Sample</a>

<link rel="stylesheet" href="styles.css" type="text/css">

<source src="video.mp4" type="video/mp4">

For external resource links, the MIME type can help the browser determine whether it supports the resource before fetching it. On <source>, the browser can skip a candidate whose specified type it does not support.

The type="text/css" declaration on a CSS style sheet link is unnecessary in modern HTML because CSS is the default style sheet language.

Using type with <ol>

On an <ol> element, the type attribute specifies the list marker style. The available values are 1, a, A, i, and I.

<ol type="A">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

In this example, the ordered list uses uppercase Latin letters for its markers. The default marker type is decimal numbering.

Using type with <script>

The meaning of type on a <script> element depends on its value. Omitting the attribute identifies a classic JavaScript script. The value module identifies a JavaScript module, while other defined values can identify an import map or speculation rules. A MIME type that is not a JavaScript MIME type can be used for a data block.

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

<script type="module" src="module.js"></script>

Do not use type="text/javascript" for ordinary JavaScript in modern HTML. The attribute should be omitted for classic JavaScript.

Common Mistakes

Do not assume the type attribute has the same values or meaning on every element. Its behavior is defined separately for each element that supports it.

Do not omit the type from a <button> when its intended behavior could be unclear, especially when the button is associated with a form.

Do not add type="text/javascript" to a classic JavaScript <script> element or type="text/css" to an ordinary CSS style sheet link simply because older HTML examples used them. They are unnecessary in modern HTML.

Do not use a file extension as a MIME type. When type expects a MIME type, use a value such as image/png, video/mp4, or text/plain.

Do not use the obsolete type attribute on the <area> or <menu> elements.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The established uses of the type attribute are widely supported in current core browsers. Compatibility can vary by element and by individual <input> type.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the type Attribute

The example uses the type attribute with several <input> elements to create different form controls and with <button> elements to specify their behavior.

Summary

The HTML type attribute has different meanings depending on the element. It can select the kind of <input> control, determine <button> behavior, provide or specify MIME type information for resources, select an ordered-list marker style, and identify different kinds of scripts. Always use a type value that is valid for the element on which the attribute appears.