HTML DOM Anchor type Property

---

<p>The HTML DOM type property associated with anchor tag is used to set or get the value of the type attribute of the link. This attribute was introduced in HTML 5. This attribute is also for only suggestive reasons and isn&rsquo;t compulsory to include. It contains single MIME(Multipurpose Internet Mail Extensions) value type.</p><h2>Syntax</h2><p>Following is the syntax for &minus;</p><p>Returning the type property &minus;</p><pre class="result notranslate">anchorObject.type</pre><p>Setting the type property &minus;</p><pre class="result notranslate">anchorObject.type = MIME-type</pre><h2>Example</h2><p>Let us see an example for anchor text property &minus;</p><p><a class="demo" href="http://tpcg.io/VAsVqK" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;p&gt;&lt;a id=&quot;Anchor&quot; type=&quot;text/html&quot; href=&quot;https://www.examplesite.com&quot;&gt;example site&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a id=&quot;Anchor2&quot; href=&quot;https://www.example.com&quot;&gt;example&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Click the buttons to set and get the type attribute.&lt;/p&gt; &lt;button onclick=&quot;getType1()&quot;&gt;GetType&lt;/button&gt; &lt;button onclick=&quot;setType2()&quot;&gt;SetType&lt;/button&gt; &lt;p id=&quot;Type1&quot;&gt;&lt;/p&gt; &lt;script&gt; &nbsp; &nbsp;function getType1() { &nbsp; &nbsp; &nbsp; var x = document.getElementById(&quot;Anchor&quot;).type; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;Type1&quot;).innerHTML = x; &nbsp; &nbsp;} &nbsp; &nbsp;function setType2(){ &nbsp; &nbsp; &nbsp; document.getElementById(&quot;Type1&quot;).innerHTML=&quot;Type has been set&quot;; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;Anchor2&quot;).type=&quot;text/html&quot;; &nbsp; &nbsp;} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This will produce the following output &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/26306/anchor_type.jpg" class="fr-fic fr-dib" style="width:587px; height:210px;border:1px solid black;" width="587" height="210"></p><p>On clicking GetType button &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/26306/anchor_type1.jpg" class="fr-fic fr-dib" style="width:589px; height:210px;border:1px solid black;" width="589" height="210"></p><p>On clicking SetType button &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/26306/anchor_type2.jpg" class="fr-fic fr-dib" style="width:589px; height:210px;border:1px solid black;" width="589" height="210"></p><p>In the above example &minus;</p><p>We have taken two links with id Anchor and Anchor2 respectively. Anchor1 has MIME type text/html associated with it while Anchor2 doesn&rsquo;t have any MIME type associated with it.</p><pre class="result notranslate">&lt;p&gt;&lt;a id=&quot;Anchor&quot; type=&quot;text/html&quot; href=&quot;https://www.examplesite.com&quot;&gt;example site&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a id=&quot;Anchor2&quot; href=&quot;https://www.example.com&quot;&gt;example&lt;/a&gt;&lt;/p&gt;</pre><p>We then have two buttons GetType and SetType to execute functions getType1() and getType2() respectively.</p><pre class="result notranslate">&lt;button onclick=&quot;getType1()&quot;&gt;GetType&lt;/button&gt; &lt;button onclick=&quot;setType2()&quot;&gt;SetType&lt;/button&gt;</pre><p>The getType1() function returns the type of the anchor tag with id &ldquo;Anchor&rdquo; associated with it. The setType2() function sets the type of the anchor tag with id &ldquo;Anchor2&rdquo; to text/html.</p><pre class="result notranslate">function getType1() { &nbsp; &nbsp;var x = document.getElementById(&quot;Anchor&quot;).type; &nbsp; &nbsp;document.getElementById(&quot;Type1&quot;).innerHTML = x; } function setType2(){ &nbsp; &nbsp;document.getElementById(&quot;Type1&quot;).innerHTML=&quot;Type has been set&quot;; &nbsp; &nbsp;document.getElementById(&quot;Anchor2&quot;).type=&quot;text/html&quot;; }</pre>

• Related Questions & Answers
• HTML DOM Anchor rel Property
• HTML DOM Anchor search Property
• HTML DOM Anchor target Property
• HTML DOM Anchor text Property
• HTML DOM Anchor username Property
• HTML DOM Anchor protocol Property
• HTML DOM Anchor password Property
• HTML DOM Anchor pathname Property
• HTML DOM Anchor href Property
• HTML DOM Anchor origin Property
• HTML DOM Anchor port Property
• HTML DOM Anchor hreflang Property
• HTML DOM Anchor download Property
• HTML DOM Anchor hash Property
• HTML DOM Anchor hostname Property