What's the Difference Between Tag, Element, Node, Object, Attribute, Property, Method?

By Xah Lee. Date: . Last updated: .

What is the difference between attribute and property?

In HTML, the <div>, <p>, etc are called tags.

The complete <div>…</div>, <p>…<p>, etc are called elements. We say, “div element”, “paragraph element”, “span element”, etc.

Each HTML element has attributes, such as id="…", class="…", href="…" etc. The “id” in id="…" is the attribute name, and "…" is its value.

Attribute are fixed set of possible things per type of element. (for example, there's no attribute of abc="…" in any HTML element.)

When HTML is parsed by browser into DOM, the HTML “element” is called object or node, and HTML attributes become properties of the object/node.

DOM object can have any properties, not one-to-one map with HTML attribute. Because DOM is like a language runtime. The properties are like instance variables. JavaScript can add arbitrary properties (which is key/value pair) to any DOM object, in general.


“Element” is the official name for a node of a HTML document. For example, <p>something</p> is a string representation of a HTML element. http://www.w3.org/TR/html51/syntax.html#elements-2


“Tag” is part of the syntax to represent a HTML node. For example, {<p>, </p>}. The <p> is “opening tag”, and </p> is “closing tag”. http://www.w3.org/TR/html51/syntax.html#elements-2


“Node” is a node of DOM. A HTML element is a node. A XML element is a node. The xyz in <p>xyz</p> is a child node of the element “p”. Whitespace between elements is also a node. 〔►see JS: Navigate DOM Treehttp://www.w3.org/TR/html51/syntax.html#creating-and-inserting-nodes


In JavaScript, “object” is one of its datatype. It is characterized as a collection of key/value pairs. 〔►see JS: What's Object?ECMAScript 2015 §Overview#sec-terms-and-definitions-object

Parsed HTML/XML document elements in browser are also referred to as objects. http://www.w3.org/TR/html51/dom.html#the-document-object 〔►see JS: Browser Window Object, Document Object Model


In CSS, {color, width, border, font-family, …} are properties. Full property table

In JavaScript, properties are the key/value pairs attached to object. ECMAScript 2015 §Overview#sec-property 〔►see JS: Property Overview

In DOM, “property” is a “instance variable”, it corresponds to HTML's “attribute”. For example, HTML elements has {id, class}, attributes. In DOM, they are called “properties”.


In HTML/XML, “attribute” are things like {id, class, href, width, height, title, …} of a HTML element, or arbitrary such in XML. For example: in <x y="z">3</x>, the “y” is a attribute.

In JavaScript, “attribute” is a “special” info attached to property. That is, in JavaScript, each object datatype has properties (which are key/value pairs), eand each “properties” has attributes such as {writable, enumerable, configurable}. 〔►see JS: Property Attributes


in JavaScript, a “method”, is a property whose value is a function. So, a method is also a property, technically.

In DOM, the term “property” seems to follow JavaScript, but, properties that are not functions are refered to as “property” proper. For example, { .length, .name, .nodeName, .parent .onclick, .baseURL, .characterSet, .color, …} are all properties, but “getElementById” is a “method”.

all these terms are not used consistently among docs (For example, Mozilla vs Microsoft).

Like what you read? Buy JavaScript in Depth