HTML Properties

What Are HTML Properties?

When building web pages, you’ll often come across terms like HTML attributes, HTML properties, and DOM manipulation. Understanding HTML properties is essential for any web developer—especially if you plan to make your pages interactive using JavaScript.

In short, HTML properties are JavaScript-accessible characteristics of DOM elements that define or reflect their current state or behavior.

While attributes are part of the HTML markup, properties live in JavaScript and represent the “live” version of that element in the DOM (Document Object Model).

What Are HTML Properties?

Definition

An HTML property is a JavaScript representation of an HTML element’s characteristics. These properties exist on the DOM object of an element and can be accessed or modified using JavaScript.

For example:

<input id="nameInput" type="text" value="John">

<input id="nameInput" type="text" value="John">

In JavaScript:

const input = document.getElementById("nameInput");
console.log(input.value); // Outputs: John

const input = document.getElementById("nameInput");
console.log(input.value); // Outputs: John

Properties vs Attributes vs Methods

Properties in the DOM

When you access an HTML element via JavaScript (e.g., document.querySelector()), you’re accessing the DOM representation. This object includes properties like innerHTML, disabled, checked, etc., which you can use to read or modify the element’s state dynamically.

HTML Attributes vs HTML Properties

Detailed Comparison

Let’s take an example:

<input type="text" value="hello">

<input type="text" value="hello">

• Attribute: The initial value (value="hello")
• Property: The current value that can be changed with JavaScript (input.value = "world")

Code Example:

<input id="example" type="text" value="hello">
<script>
  const el = document.getElementById("example");
  console.log(el.getAttribute("value")); // "hello"
  console.log(el.value);                 // "hello"

  el.value = "world";
  console.log(el.getAttribute("value")); // Still "hello"
  console.log(el.value);                 // Now "world"
</script>

<input id="example" type="text" value="hello">
<script>
  const el = document.getElementById("example");
  console.log(el.getAttribute("value")); // "hello"
  console.log(el.value);                 // "hello"

  el.value = "world";
  console.log(el.getAttribute("value")); // Still "hello"
  console.log(el.value);                 // Now "world"
</script>

When to Use Which:

Common HTML Properties (with Examples)

Let’s explore some of the most frequently used HTML DOM properties, complete with explanations, JavaScript usage, and practical applications.

1. value

Used in: <input>, <textarea>, <select>

Description: Represents the current value of a form control.

JavaScript:

document.querySelector("#email").value = "new@example.com";

document.querySelector("#email").value = "[email protected]";

Example:

<input id="email" type="email">
<script>
  const emailInput = document.getElementById("email");
  emailInput.value = "hello@domain.com";
</script>

<input id="email" type="email">
<script>
  const emailInput = document.getElementById("email");
  emailInput.value = "[email protected]";
</script>

Use Case: Autofilling a form on page load.

2. checked

Used in: <input type="checkbox">, <input type="radio">

JavaScript:

document.querySelector("#agree").checked = true;

document.querySelector("#agree").checked = true;

Example:

<input id="agree" type="checkbox">
<script>
  const checkbox = document.getElementById("agree");
  checkbox.checked = true;
</script>

<input id="agree" type="checkbox">
<script>
  const checkbox = document.getElementById("agree");
  checkbox.checked = true;
</script>

Use Case: Pre-selecting checkboxes for user agreement.

3. selected

Used in: <option>

JavaScript:

document.querySelector("option[value='2']").selected = true;

document.querySelector("option[value='2']").selected = true;

Use Case: Programmatically selecting a dropdown option.

4. disabled

Used in: Inputs, buttons, selects

JavaScript:

document.querySelector("#submitBtn").disabled = true;

document.querySelector("#submitBtn").disabled = true;

Use Case: Disabling a submit button until a form is valid.

5. readonly

Used in: Input fields

JavaScript:

document.querySelector("#readonlyInput").readOnly = true;

document.querySelector("#readonlyInput").readOnly = true;

Use Case: Locking input fields after submission.

6. className

JavaScript:

document.querySelector("#box").className = "highlight";

document.querySelector("#box").className = "highlight";

Use Case: Dynamically switching classes for styling or animations.

7. id

You can both read and set an element’s id.

JavaScript:

document.querySelector("div").id = "newId";

document.querySelector("div").id = "newId";

Use Case: Assigning dynamic IDs for JS-based plugins.

8. innerText & innerHTML

• innerText: Gets/sets the text content.
• innerHTML: Gets/sets the HTML content.

document.querySelector("#title").innerText = "New Title";
document.querySelector("#title").innerHTML = "<em>New Title</em>";

document.querySelector("#title").innerText = "New Title";
document.querySelector("#title").innerHTML = "<em>New Title</em>";

9. style

Modify inline styles via JavaScript:

document.querySelector("#box").style.backgroundColor = "blue";

document.querySelector("#box").style.backgroundColor = "blue";

How to Access and Modify HTML Properties

Using document.querySelector()

const input = document.querySelector("#myInput");
input.value = "Changed!";

const input = document.querySelector("#myInput");
input.value = "Changed!";

Using dot notation

const button = document.getElementById("saveBtn");
button.disabled = true;

const button = document.getElementById("saveBtn");
button.disabled = true;

Form Element Example

<form>
  <input id="name" type="text" value="John">
  <button id="submitBtn">Submit</button>
</form>
<script>
  const nameInput = document.getElementById("name");
  const submitBtn = document.getElementById("submitBtn");

  if (nameInput.value === "") {
    submitBtn.disabled = true;
  }
</script>

<form>
  <input id="name" type="text" value="John">
  <button id="submitBtn">Submit</button>
</form>
<script>
  const nameInput = document.getElementById("name");
  const submitBtn = document.getElementById("submitBtn");

  if (nameInput.value === "") {
    submitBtn.disabled = true;
  }
</script>

Best Practices

• Use semantic properties instead of hardcoding values in HTML.
• Keep DOM properties in sync with HTML attributes if needed (e.g., for accessibility).
• Avoid excessive DOM manipulation in large-scale apps—prefer using frameworks.

HTML Properties in Real World Projects

Dynamic Forms

Use value, checked, and disabled to create smart forms.

Toggling Buttons

Use disabled or className to disable/enable buttons or change appearance.

Live Content Updates

Change innerText or innerHTML to reflect new messages, alerts, or data.

Properties vs Attributes: Summary Table

FAQs: HTML Properties

Q1: Are HTML properties the same as CSS properties?

No. HTML properties define the structure/state of elements in the DOM, while CSS properties control visual styles.

Q2: Can I set custom properties in HTML?

Yes, but they’re typically set as data-* attributes (e.g., data-user="admin") and accessed via element.dataset.user.

Q3: Do HTML properties affect performance?

Generally no, but manipulating them too frequently in large apps can cause layout thrashing or performance issues.

Q4: What happens if I change an attribute after load?

It won’t always update the DOM property unless explicitly re-synced with JavaScript.

Q5: What is the safest way to update an element?

Use:

element.property = newValue;

element.property = newValue;

or use libraries/frameworks that abstract DOM safely.

Conclusion

HTML properties play a crucial role in creating dynamic, interactive websites. They allow developers to read and manipulate the current state of elements, making it possible to build powerful features like form validation, live updates, and more.

By mastering properties like value, checked, innerHTML, and className, you gain fine control over your page’s behavior. Understanding the difference between HTML attributes and DOM properties is essential for writing clean and maintainable code.

Ready to practice? Try creating a form that auto-fills and disables the submit button until all fields are complete!

About The Author

Pavan Kalyan

See author's posts