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

“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

“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

“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]

Object

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.

Property

In CSS, {color, width, border, font-family, …} 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”.

Attribute

In HTML/XML, “attribute” are things like {id, class, href, src, …} 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]

Method

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”.

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

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc