The type attribute in HTML specifies the media type (MIME type) of a resource or the behavior of an element. Its meaning is context-dependent and varies based on the HTML tag it's used with. It is essential for elements like <input> , <script> , and <link> to function correctly.

Common Use Cases

For <input> tags: Defines the type of input control, such as text, password, email, number, date, file, etc. This can change the element's appearance and provide built-in validation.
For <button> tags: Specifies the button's behavior. Common values are submit (submits the form), reset (resets the form), and button (a clickable button with no default behavior).
For <script> tags: Defines the type of script. While historically text/javascript was used, it's now optional for standard JavaScript. However, `type="module"` is essential for loading ES modules.
For <link> tags: Indicates the type of the linked resource, like text/css for stylesheets, although it's often optional in modern HTML5.

Practical Examples

Code

<input type="email" placeholder="Enter your email">

Result

Code

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

Result

Code

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

Result

This code links to a JavaScript module, which runs in the background.

Code

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

Result

This code links to an external CSS stylesheet, which styles the page.

Best Practices

Be specific with inputs: Use the most appropriate type for your <input> elements (e.g., email, tel, number ) to provide better user experience, especially on mobile devices which may show a custom keyboard.
HTML5 Modern Usage: For <script> and <style> tags in HTML5, the type attribute is no longer required if the content is standard JavaScript and CSS, respectively.
Button Defaults: Be aware that the default type for a <button> inside a <form> is submit. If you want a button that doesn't submit the form, explicitly set `type="button"`.

HTML `type` Attribute

A versatile attribute that defines an element's content type or behavior.

What is the type Attribute?

Common Use Cases

For <input> tags: Defines the type of input control, such as text, password, email, number, date, file, etc. This can change the element's appearance and provide built-in validation.
For <button> tags: Specifies the button's behavior. Common values are submit (submits the form), reset (resets the form), and button (a clickable button with no default behavior).
For <script> tags: Defines the type of script. While historically text/javascript was used, it's now optional for standard JavaScript. However, `type="module"` is essential for loading ES modules.
For <link> tags: Indicates the type of the linked resource, like text/css for stylesheets, although it's often optional in modern HTML5.

Practical Examples

Code

<input type="email" placeholder="Enter your email">

Result

Code

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

Result

Code

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

Result

This code links to a JavaScript module, which runs in the background.

Code

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

Result

This code links to an external CSS stylesheet, which styles the page.

Best Practices

Be specific with inputs: Use the most appropriate type for your <input> elements (e.g., email, tel, number ) to provide better user experience, especially on mobile devices which may show a custom keyboard.
HTML5 Modern Usage: For <script> and <style> tags in HTML5, the type attribute is no longer required if the content is standard JavaScript and CSS, respectively.
Button Defaults: Be aware that the default type for a <button> inside a <form> is submit. If you want a button that doesn't submit the form, explicitly set `type="button"`.