Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Anchor type Property
The HTML DOM Anchor type property sets or retrieves the value of the type attribute of an anchor element. This property specifies the MIME type of the linked resource, providing a hint to the browser about the content type it can expect when following the link.
The type attribute was introduced in HTML5 and serves as a suggestion to help browsers optimize how they handle the linked resource. It contains a single MIME (Multipurpose Internet Mail Extensions) type value such as text/html, application/pdf, or image/jpeg.
Syntax
Following is the syntax for getting the type property −
anchorObject.type
Following is the syntax for setting the type property −
anchorObject.type = "MIME-type"
Return Value
The property returns a string representing the MIME type of the linked resource, or an empty string if no type is specified.
Example − Getting and Setting Type Property
Following example demonstrates how to get and set the type property of anchor elements −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p><a id="anchor1" type="text/html" href="https://www.example.com">HTML Document</a></p>
<p><a id="anchor2" href="https://www.example.com/document.pdf">PDF Document</a></p>
<p>Click the buttons to get and set the type attribute:</p>
<button onclick="getType()">Get Type</button>
<button onclick="setType()">Set Type for PDF</button>
<p id="result"></p>
<script>
function getType() {
var type = document.getElementById("anchor1").type;
document.getElementById("result").innerHTML = "Type of first link: " + (type || "Not specified");
}
function setType() {
document.getElementById("anchor2").type = "application/pdf";
document.getElementById("result").innerHTML = "Type set to 'application/pdf' for PDF document link";
}
</script>
</body>
</html>
The output displays two links and buttons to manipulate their type properties −
HTML Document PDF Document Click the buttons to get and set the type attribute: [Get Type] [Set Type for PDF] (Clicking "Get Type" displays: Type of first link: text/html) (Clicking "Set Type for PDF" displays: Type set to 'application/pdf' for PDF document link)
Example − Common MIME Types
Following example shows anchor elements with different common MIME types −
<!DOCTYPE html>
<html>
<head>
<title>Common MIME Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Download Links with Type Hints</h3>
<ul>
<li><a id="htmlLink" type="text/html" href="#">HTML Page</a></li>
<li><a id="pdfLink" type="application/pdf" href="#">PDF Document</a></li>
<li><a id="imageLink" type="image/jpeg" href="#">JPEG Image</a></li>
<li><a id="videoLink" type="video/mp4" href="#">MP4 Video</a></li>
</ul>
<button onclick="showAllTypes()">Show All MIME Types</button>
<div id="typeList"></div>
<script>
function showAllTypes() {
var links = ['htmlLink', 'pdfLink', 'imageLink', 'videoLink'];
var output = "<h4>MIME Types:</h4><ul>";
links.forEach(function(linkId) {
var element = document.getElementById(linkId);
var linkText = element.textContent;
var mimeType = element.type;
output += "<li>" + linkText + ": " + mimeType + "</li>";
});
output += "</ul>";
document.getElementById("typeList").innerHTML = output;
}
</script>
</body>
</html>
This example shows how different file types can be indicated using appropriate MIME types −
Download Links with Type Hints ? HTML Page ? PDF Document ? JPEG Image ? MP4 Video [Show All MIME Types] (Clicking button displays:) MIME Types: ? HTML Page: text/html ? PDF Document: application/pdf ? JPEG Image: image/jpeg ? MP4 Video: video/mp4
Common MIME Types
Following are some commonly used MIME types for the anchor type property −
| MIME Type | Description | File Extensions |
|---|---|---|
| text/html | HTML documents | .html, .htm |
| application/pdf | PDF documents | |
| image/jpeg | JPEG images | .jpg, .jpeg |
| image/png | PNG images | .png |
| video/mp4 | MP4 video files | .mp4 |
| application/json | JSON data | .json |
| text/css | CSS stylesheets | .css |
Browser Compatibility
The anchor type property is supported in all modern browsers that support HTML5. However, it serves only as a hint to the browser and does not enforce any specific behavior. Browsers may use this information to optimize resource loading or provide better user experience.
Conclusion
The HTML DOM Anchor type property provides a way to specify the MIME type of linked resources, helping browsers optimize how they handle different content types. While not mandatory, it serves as a useful hint for improving user experience and resource management.
202 Views
