Understanding Attributes and Properties in HTML

When working with HTML, it's crucial to understand the concepts of attributes and properties.The terms "attribute" and "property" can be confusing in HTML. In the Angular framework, there are concepts called Property Binding and Attribute Binding, and understanding the difference between the two is important.

The main difference between attributes and properties is as follows: attributes are related to HTML, while properties are related to the DOM (Document Object Model). In HTML, we only have attributes, not properties. Similarly, in the DOM, we only have properties, not attributes.

Attributes in HTML:

Attributes are characteristics or metadata that we assign to HTML elements. They provide additional information about an element, defining its behavior, appearance, or specific details. Attributes are placed within the opening tag of an element and are written as name-value pairs. The attribute name represents its purpose, while the value specifies the particular setting.

Example of an attribute:

<a href="https://www.example.com">Click here</a>

In the above example, the "href" attribute is used to define the destination of the hyperlink. The attribute value is set to "https://www.example.com" indicating the URL the link should navigate to.

Properties in HTML:

Properties, on the other hand, are characteristics of HTML elements that can be accessed and manipulated using JavaScript. Unlike attributes, properties are part of the Document Object Model (DOM), which represents the web page as a structured tree of objects. Properties enable developers to dynamically modify element behavior and content through scripting.

Example of a property:

var myElement = document.getElementById("myElement");
myElement.innerHTML = "Example";

In the above code snippet, the innerHTML property is accessed to change the content of an HTML element with the ID "myElement." The property is modified by assigning a new value, "Example" using JavaScript.

Attribute to Property mapping

When the browser reads HTML, it converts HTML attributes into DOM properties. Often, the names of HTML attributes and DOM properties are the same.For example, in the HTML code

<input id="message"/>

Here "id" is an HTML attribute. When the browser parses this HTML element, it creates a DOM object with the property 'input.id = "message"', where "id" is the property of the DOM object.But it is not always one to one.

Different Attribute to Property mapping

Consider the below html element:

<td colspan="2"></td>

The html element <td> has the attribute 'colspan'.But when the browser parses the above html element and creates the corresponding DOM object the property names changes from 'colspan' to 'colSpan' (camelcase).Attribute and property names are different.

td.colSpan = "2"

Attribute changes reflected in DOM Property

When you change the value of an HTML attribute, it does not always update the corresponding DOM property, and vice versa.For example in the below example:

<input id="message"/> 
<script>
     var input = document.getElementById("message");
     input.setAttribute("id","newmessage"); 
    alert(input.getAttribute("id");  //accessing html attribute
    alert(input.id); //accessing dom property
</script>

input.getAttribute(“id”) is used to access the html attribute of the input element.input.id is used to access the DOM property of the input element.

On changing the attribute using the method setAttribute() , the value gets reflected in the DOM property as well and if you change the id DOM property first and get the value of the attribute it gets changed as well:

input.id ="dommessage"; 
alert(input.getAttribute("id")); 

The above code alerts the attribute id value as "dommessage" which is updated by changing the dom property id.

DOM property changes not getting reflected in HTML Attribute

Another example is the "value" attribute of an input element. Changing the attribute will update the DOM property, but changing the DOM property will not update the attribute.Let’s see it through an example:

<input id="message" value="Hello World"/> 
<script>
      var input = document.getElementById("message");
     input.setAttribute("value","Hello this is changed through attribute!"); 
    alert(input.getAttribute("value");  //accessing html attribute
    alert(input.value); //accessing dom property
</script>

In the above example both alert statements alert the value 'Hello this is changed through attribute'.This is because if you change the attribute value it gets reflected in the DOM property value.

But the reverse doesn’t work:

<input id="message" value="Hello World"/> 
<script>
input.value="Hello this is changed through DOM property"; 
alert(input.getAttribute("value")); 
</script>

Though the value property is changed , the alert still alerts the value “Hello this is changed through attribute!” as the change doesn’t get propagated from DOM property to HTML attribute.

That’s it! Happy coding!! 😊