JavaScript Document contentType Property

What You’ll Learn

Document.contentType is a read-only instance property that returns the MIME type the document is being rendered as (often text/html). Learn where that value comes from, how it differs from characterSet, why <meta http-equiv> does not change it, and five examples with try-it labs.

Introduction

Every web resource has a MIME type that tells the browser what kind of content it is: HTML, XML, SVG, PDF, and so on. For a normal web page, that type is usually text/html.

document.contentType exposes the MIME type the browser is using to render the current document. MDN notes that the value may come from HTTP headers or other MIME sources, and that browser or extension conversions can affect it.

Related Document tutorials: characterSet, compatMode, Document constructor.

Understanding Document.contentType

A read-only instance property on Document. Its value is a string naming the MIME type used for rendering.

• Value — MIME type string (e.g. text/html).
• Read-only — you cannot assign a new MIME type from JavaScript.
• Source — HTTP headers / MIME sniffing / conversions (MDN).
• Not from meta — <meta> tags do not change it (MDN).
• Different from encoding — use characterSet for UTF-8 style labels.

📝 Syntax

document.contentType

Value

A read-only string — the MIME type the document is rendered as.

Typical HTML page

console.log(document.contentType);
// "text/html" on most web pages

⚖️ MIME type vs encoding vs mode

Examples Gallery

Examples follow MDN Document: contentType. Use View Output or Try It Yourself for each case.

console.log(document.contentType);
// "text/html" on a normal HTML page

text/html

const isHtml = document.contentType === "text/html";
console.log("Is HTML document:", isHtml);
console.log("contentType:", document.contentType);

Is HTML document: true
contentType: text/html

console.log("MIME type:", document.contentType);
console.log("Encoding:", document.characterSet);
// contentType ≈ "what kind?"
// characterSet ≈ "which encoding?"

MIME type: text/html
Encoding: UTF-8

// HTML may include:
// <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

const meta = document.querySelector('meta[http-equiv="Content-Type" i]');
console.log("meta present:", !!meta);
console.log("document.contentType:", document.contentType);
// MDN: contentType is unaffected by <meta> elements

meta present: true
document.contentType: text/html
(meta does not override contentType)

const info = {
  contentType: document.contentType,
  characterSet: document.characterSet,
  compatMode: document.compatMode,
  isHtml: document.contentType === "text/html"
};

console.log(JSON.stringify(info, null, 2));

{
  "contentType": "text/html",
  "characterSet": "UTF-8",
  "compatMode": "CSS1Compat",
  "isHtml": true
}

🚀 Common Use Cases

• Shared libraries — detect HTML vs XML/SVG document hosts.
• Support tooling — log MIME type in diagnostic bundles.
• Teaching MIME types — show what the browser thinks the page is.
• Server audits — compare expected HTTP Content-Type with what scripts see.
• Not for setting type — configure the server header instead of JavaScript.
• Pair with characterSet — separate “what” from “how encoded.”

📝 Notes

• MDN: Baseline Widely available (since April 2018) — no Deprecated / Experimental / Non-standard banner.
• Read-only — set the correct HTTP Content-Type on the server.
• Unaffected by <meta> elements (MDN).
• May be influenced by browser/extension type conversions (MDN).
• Do not confuse with characterSet (encoding) or compatMode (quirks).
• Related: characterSet, compatMode, Document constructor.

💡 Best Practices