Attributes

In this html tag <input type="text">, type is an attribute for the input tag. In the below image tag, src is an attribute for the img tag.

<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>

Properties

Properties are the dom properties that are parsed by the browser and available in HTMLElement property.

<input type="text" id="reply-title" placeholder="Placeholder text" tabIndex="2"/>
var elem = document.querySelector("#reply-title")

If you check the elem object, you can find the properties of the object such as type, tabIndex, placeholder.

Difference between attributes and properties

Usually there is one to one mapping between the names of attributes and properties. If there is a placeholder attribute for input element, then there is also a placeholder property in the elem object of input element

But this is not same always. The property name and attribute can be different too. Lets see some examples.

Not all attributes are available as property

If you are setting custom attributes to the html element, then it will not be reflected in the property of that element.

 <input type="text" mycustomattr="techdomain" id="reply-title"/>
 var elem = document.querySelector("#reply-title");

If you check the elem object, there is no mycustomattr property.

Table, ARIA, SVG

The svg and table colspan attribute is also a pure attribute, and it does not have corresponding property. Accessibility attributes like aria (Accessible Rich Internet Applications) tags are not reflected in the property of that element.

For example

<input type="text" mycustomattr="techdomain" id="reply-title"  aria-required="true"/>
var elem = document.querySelector("#reply-title");

If you check the elem object, you will not find aria-required property.

data-* custom attribute

If you want to add custom attributes to the tag which is private to your application, then you can use the data-* attributes. By doing so, it will be available in the properties (as dataset object) . So if you add data-length attribute, it will be available in dataset object as dataset.length

Example

<input type="text" data-length="200" >
var elem = document.querySelector("#techdomain");
elem.dataset.length = 200