HTML - type Attribute

HTML type attribute specifies the type of an element.

This is used to specify the type of button for the <button> tag, and it is also used in the <input> tag to specify the type of input to display. It determines the internet media type (often referred to as MIME type) for the <embed>, <link>, <object>, <script>, <source>, and <style> elements.

Syntax

<element type="value">

Applies on

The below-listed elements allow the use of the HTML type attribute.

Element	Description
<button>	HTML <button> tag is used to create a button.
<embed>	HTML <embed> tag is used as a container for external applications, multimedia, and interactive content that the browser don't understand.
<input>	HTML <input> tag is used to specify the input field.
<object>	HTML <object> tag in HTML is used to show multimedia on web pages, including audio, video, pictures, webisite, PDFs, and Flash.
<ol>	HTML <ol> tag is used to create an ordered list. The default order of the ordered list is numerical.
<script>	HTML <script> tag is used to declared Client-side script (JavaScript).
<source>	HTML <source> tag is an empty element. It denotes the absence of both a closing tag and any content in the tag.
<style>	HTML <style> tag contains style information for an HTML document or part of a document.
<menu>	HTML <menu> tag is used for creating a menu list.
<link>	HTML <link> tag specifies relationship between the current document and an external resource.

Examples of HTML type Attribute

Below examples will illustrate the HTML type attribute, where and how we should use this attribute!

Using type attribute with "input" tag

On running the below code, the output window will display the input field along with a submit and reset button on the webpage.

<!DOCTYPE html>
<html>
<body>
   <h1>The button type attribute</h1>
   <form action="" method="post">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
      <br>
      <br>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
      <br>
      <br>
      <button type="submit" value="Submit">Submit</button>
      <button type="reset" value="Reset">Reset</button>
   </form>
</body>
</html>

Using type attribute with "embed" tag

When we run the below code, it will generate an output consisting of the image displayed on the webpage.

<!DOCTYPE html>
<html>
<body>
   <h1>The embed type attribute</h1>
   <embed type="image/jpg" src=
"https://www.tutorialspoint.com/images/logo.png?v2"/>
</body>
</html>

Using type attribute with "link" tag

On running the below code, the output window will display the text applied with CSS on the webpage. CSS will not work as it will not able link.

style.css

body{
   background-color: purple;
}
h2{
   color: green;
}
span{
   color: black;
}

type.html

<!DOCTYPE html>
<html>
<body>
   <head>
      <link rel="stylesheet" type="text/css" 
            href="style.css">
   </head>
   <body>
      <h2>
         Tutorials<span>point</span>
      </h2>
      <h3>Link element with type attribute</h3>
      <p>This is external CSS</p>
   </body>
</html>

Using type attribute with "button" tag

On running the below code, a form gets displayed with submit and reset buttons.

<!DOCTYPE html>
<html>

<head>
      <title>Button tag with type Attribute</title>
</head>

<body>
      <h2>Button Types</h2>
      <form action=
"https://tutorialspoint.com/" method="post">
         <label for="first_name">First name:</label>
         <input type="text" name="first_name" />
         <br><br>
         <label for="last_name">Last name:</label>
         <input type="text" name="last_name" />
         <br><br>
         <button type="submit"> Submit</button>
         <button type="reset">Reset</button>
      </form>
</body>

</html>

Using type attribute with "object" tag

On running the below code, tutorialspoint logo gets displayed on the output screen.

<!DOCTYPE html>
<html>

<head>
      <title>Object tag with type attribute</title>
</head>

<body>
      <h1>Tutorialspoint</h1>
      <object data=
"https://www.tutorialspoint.com/cg/images/logo.png" 
              type="image/png">
      </object>
</body>

</html>

Using type attribute with "script" tag

On running the below code, javascript text gets displayed on the output screen.

<!DOCTYPE html>
<html>

<head>
      <title>Script tag with type attribute</title>
</head>

<body>
      <script type="text/JavaScript">
         document.write("You're visiting tutorialspoint!")
      </script>
</body>

</html>

Using type attribute with "source" tag

On running the below code, audio file gets displayed on the output screen.

<!DOCTYPE html>
<html>

<head>
      <title>Source tag with type attribute</title>
</head>

<body>
      <audio controls>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
              type="audio/mpeg">
   </audio>
</body>

</html>

Using type attribute with "style" tag

On running the below code, content inside h1 tag gets displayed with internal styling applied using style tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Style Tag with type attribute</title>
   <style type="text/css">
      h1 {
         color: green;
         font-size: 40px;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h1>Applied css internal styling within h1 tag</h1>
</body>
</html>

Supported Browsers

Attribute
type	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm