HTML CSS JavaScript Jargons: 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”, etc.

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

Attributes are fixed set of possible things per type of element. (for example, there's no attribute of abc=val 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.


“Tag” is part of the syntax to represent a HTML node. For example, in <p>some</p>. The <p> is “opening tag”, and </p> is “closing tag”.

Note, some element do not have a closing tag.

[see List of HTML Self-Closing Tags]


“Node” is a node of tree of Document Object Model (aka DOM). A HTML element is a node. A XML element is a node. The xyz in <p>xyz</p> is a node. It is a child node of the element “p”. Whitespace between elements is also a node.

[see DOM: Navigate DOM Tree]

[see DOM: Whitespace Nodes]

[see DOM Scripting Tutorial]


In JavaScript, “object” is one of its datatype. It is characterized as a collection of key/value pairs.

[see Object Type]

In HTML/XML, when a element is parsed, it becomes a node in the DOM tree. This node, is also called object, when we want to talk about programing it. [see Browser Window Object]

In other words, HTML tag represents element, and it becomes node in DOM, and becomes object in JavaScript.


In CSS, {color, width, border, font-family, etc} are properties.

In JavaScript, properties are the key/value pairs attached to object. [see 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, src, etc} 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), and each “property” has attributes such as {writable, enumerable, configurable}. [see 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, etc} are all properties, but “getElementById” is a “method”.

Note, all these jargons are NOT used consistently among docs (for example, Mozilla vs Microsoft).





Text Decoration

Box Model

Box Decoration




Line Wrap