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


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


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]


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

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

CSS Basics

  1. Basics
  2. Tag Matching Tutorial
  3. Selector Syntax
  4. Units


  1. Color Syntax
  2. Color Names
  3. Opacity
  4. Linear Gradient
  5. Radial Gradient


  1. font-family
  2. Standard Web Fonts
  3. font-size
  4. Meaning of Font Size
  5. Font Weight
  6. Chinese Font Names

Box Model

  1. Border
  2. Outline
  3. Margin vs Padding
  4. Box Sizing


  1. Layout Tutorial
  2. Display Property
  3. Position: static, relative, fixed, absolute
  4. Pure CSS Table
  5. Tabbed Menu
  6. 3 Columns Page Layout
  7. Multi-Column Layout for Text Flow
  8. Fix Element to Window
  9. Centering
  10. Flowing List
  11. z-index
  12. Text Over Image
  13. Text Flow Around Image
  14. OverFlow, Scrollbar


  1. 2D Transform
  2. Transition
  3. Animation

Line Wrap, Justification

  1. Line Wrap
  2. Text Alignment, Justification
  3. Match first-letter and first-line
  4. “:before”, “:after”
  5. Text Decoration: Underline, Overline, Line-Through
  6. Letter Spacing, Word Spacing

Box Decoration

  1. Box Shadow
  2. Text Shadow
  3. Round Corners
  4. Background Image
  5. Image Rollover


  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
  13. Display Table on Small Screen
  14. Fixed Aspect Ratio
  15. Add Icon to Links
  16. Progress Bar Example

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

Web Dev Tutorials