References

Beginner-friendly references for web development, with live, editable examples.

The HTML type attribute

Attribute All modern browsers By David AdamsUpdated
In short

The HTML type attribute specifies the MIME type (media type) of a resource or the script type. It is used on the <script>, <style>, <link>, <source>, <embed>, <object> and <a> elements.

Overview

The type attribute states the MIME type (media type) of a resource, telling the browser what kind of content to expect. On a <source> it lets the browser skip formats it cannot play without downloading them; on a <link> or <a> it hints the linked resource's type; on a <script> it distinguishes classic scripts from modules.

Be aware that several elements have their own, different type attribute documented separately: on an <input> it sets the control type (text, email, checkbox…), on a <button> it sets the behavior (submit, button, reset), and on an <ol> it sets the marker style.

For scripts, the important modern value is type="module", which marks an ES module. The old type="text/css" on <style> and type="text/javascript" on <script> are now unnecessary defaults you can drop.

Syntax

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

Values

Value
A MIME type such as text/css or image/webp, or module on a <script>.

Best practices

  • Use type on a <source> so the browser can skip unsupported formats without downloading them.
  • Use type="module" on a <script> for ES modules.
  • Drop redundant type="text/css" and type="text/javascript"; they are the defaults.
  • Give it a valid MIME type value such as image/webp or application/pdf.

Frequently asked questions

What does the type attribute specify?
The MIME (media) type of a resource, so the browser knows what kind of content it is.
Do I need type="text/javascript" on a script?
No. It is the default and can be omitted. Use type="module" only when you want an ES module.
What is type="module"?
It marks a <script> as an ES module, which supports import/export and is deferred by default.
Why is type different on input and button?
Those elements have their own type attribute. See input type and button type.
target type (button)