The type attribute specifies a MIME type — used to hint a resource's format on <script>, <link>, <source>, <object>, and to set the control kind on <input> and <button>.

Syntax

<script type="module" src="/app.js"></script>
<source src="movie.webm" type="video/webm">
<input type="email">

Deep Dive Course

**`type`** means different things depending on which element it's attached to: on `<script>`, it can specify `module` for ES modules (enabling `import`/`export`) or historically `text/javascript`; on `<source>`/`<object>`, it's a MIME type (`video/mp4`, `audio/ogg`, `application/pdf`) letting the browser decide if it can render that format before even downloading it; on `<input>`, it determines the entire control's behavior (`email`, `checkbox`, `range`, etc.); and on `<button>`, it's `submit`, `reset`, or `button`, controlling the button's role within a form.

1Understanding type

`type` means different things depending on which element it's attached to: on <script>, it can specify module for ES modules (enabling import/export) or historically text/javascript; on <source>/<object>, it's a MIME type (video/mp4, audio/ogg, application/pdf) letting the browser decide if it can render that format before even downloading it; on <input>, it determines the entire control's behavior (email, checkbox, range, etc.); and on <button>, it's submit, reset, or button, controlling the button's role within a form.

💡

On <source> elements, an accurate type attribute lets the browser skip formats it can't play WITHOUT even downloading them first — omitting it forces the browser to start downloading each source just to find out whether it's playable, wasting bandwidth.

editor.html

<video controls>
  <source src="/clip.mp4" type="video/mp4">
  <source src="/clip.webm" type="video/webm">
</video>

localhost:3000

2Practical Example

Here is a real-world application of type showing how it is used in production HTML.

editor.html

<!-- type on script (module) versus button (submit role) -->
<script type="module">
  import { helper } from './helper.js';
</script>
<button type="submit">Save</button>

localhost:3000

3Best Practices

Follow these guidelines when working with type:

1. Set type="module" on <script> tags using ES module import/export syntax

2. Always specify an accurate MIME type on <source> elements for video/audio so browsers can skip incompatible formats without downloading them

3. Remember type means something completely different on <input>/<button> (control kind) versus <script>/<source>/<object> (MIME type/module type)

⚠️

Tip: On <source> elements, an accurate type attribute lets the browser skip formats it can't play WITHOUT even downloading them first — omitting it forces the browser to start downloading each source just to find out whether it's playable, wasting bandwidth.

editor.html

<video controls>
  <source src="/clip.mp4" type="video/mp4">
  <source src="/clip.webm" type="video/webm">
</video>

localhost:3000

Examples

Example 01Basic Usage

<video controls>
  <source src="/clip.mp4" type="video/mp4">
  <source src="/clip.webm" type="video/webm">
</video>

Example 02Advanced Example

<!-- type on script (module) versus button (submit role) -->
<script type="module">
  import { helper } from './helper.js';
</script>
<button type="submit">Save</button>

Best Practices

Set type="module" on