JavaScript Element tagName Property

What You’ll Learn

Element.tagName is a read-only instance property that returns the element’s tag name as a string. In HTML documents that value is always uppercase (for example "DIV" or "IMG"). Learn the HTML vs XML casing rules, how tagName compares to localName and nodeName, and practice with five examples and try-it labs.

Introduction

Every element has a tag—<div>, <span>, <img>, and so on. element.tagName tells you that tag as a string so you can branch logic, debug markup, or filter nodes without parsing HTML yourself.

The most common beginner surprise: in an HTML page, tagName is uppercase even when your source file used lowercase tags.

const span = document.createElement("span");
console.log(span.tagName); // "SPAN" in HTML

Understanding the Property

MDN: the read-only tagName property of the Element interface returns the tag name of the element on which it is called. Capitalization depends on the document type.

• HTML documents — always canonical uppercase ("DIV", "IMG").
• XML / XHTML trees — preserve the case from the original markup.
• Same as nodeName — for Element objects the values match.
• Related: localName — lowercase local name in HTML ("img").

📝 Syntax

element.tagName

Value

A string indicating the element’s tag name. In HTML it is uppercase; in XML it keeps the original case.

📋 tagName vs localName Pattern

MDN highlights that an <img> reports tagName as "IMG", while localName is "img". Both describe the same element—different casing conventions.

const img = document.createElement("img");
console.log(img.tagName);   // "IMG"
console.log(img.localName); // "img"
console.log(img.nodeName);  // "IMG" (same as tagName for elements)

Related learning: localName, slot, and Node.nodeName.

Examples Gallery

Examples follow MDN Element: tagName and show reading names, casing, comparisons, and branching.

const span = document.getElementById("born");
console.log(span.tagName); // "SPAN" in HTML

SPAN

const box = document.createElement("div");
console.log(box.tagName);   // "DIV"
console.log(box.localName); // "div"

DIV
div

const btn = document.createElement("button");
console.log(btn.tagName === "BUTTON"); // true
console.log(btn.tagName === "button"); // false
console.log(btn.localName === "button"); // true

true
false
true

function describe(el) {
  if (el.tagName === "IMG") return "image";
  if (el.tagName === "A") return "link";
  return "other: " + el.tagName;
}

console.log(describe(document.createElement("img")));
console.log(describe(document.createElement("a")));
console.log(describe(document.createElement("p")));

image
link
other: P

console.log({
  supported: "tagName" in Element.prototype,
  returns: "string (UPPERCASE in HTML)",
  tip: "Compare with \"DIV\" or use localName",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "string (UPPERCASE in HTML)",
  "tip": "Compare with \"DIV\" or use localName",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Checking whether an event target is a specific tag during delegation.
• Filtering a NodeList to keep only certain element types.
• Debugging generated markup by logging each node’s tag.
• Building simple HTML sanitizers or transformers.
• Comparing tagName with localName when teaching DOM casing rules.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Read-only — you cannot rename an element by assigning to tagName.
• In HTML, expect uppercase; in XML/XHTML, expect original case.
• Related: localName, slot, JavaScript hub.

💡 Best Practices