Difference between Attribute and Property in HTML world

Arun Rajeevan
2 min readMay 9, 2020

Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model) nodes.

While writing HTML code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.

  • A few HTML attributes have 1:1 mapping to properties; for example, id.
  • Some HTML attributes don’t have corresponding properties; for example, aria-*.
  • Some DOM properties don’t have corresponding attributes; for example, textContent.

Let’s discuss further:

<input type="text" value="Name:">

There are 2 attributes, type and value.Also it has 2 properties,type and value.

Let’s take another example:

<input id="inputId" type="text" value="Name:">

The id property is a reflected property for the id attribute.Getting the property reads the attribute value, and setting the property writes the attribute value.

Let’s talk about the type property.
The type property is a reflected property for the type attribute.

Let’s take about how to get values of an attribute and a property:
<input id="inputId" type="number" value="Name:">

var element = document.getElementById(“inputId”);

element.getAttribute(“type”) will give “number” and element.type will give “text” because the initial value we have provided is a text.

Same is the case with value property. Imagine that an user has given input text as “hello”, then,

element.getAttribute(“value”) will giveName:”,since we have provided Name:as initial attribute value and element.value will give “hello”.

So, the value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (1)

What are your thoughts?

Thanks for the insight but would like more explanation of how properties fit within the context of html elements and attributes. Thanks 🙏🏾