Jargons Explained: 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.

Attributes 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

“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>…</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 JS: 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 JS: Browser Window Object, DOM]

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

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 JS: Property Attributes, writable, enumerable, configurable]

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

CSS Misc

  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog