Angular Interview Practice

What is the difference in handling boolean attributes in HTML and the DOM?

1. HTML uses true/false, while DOM uses present/absent

2. Both are treated as true/false

3. HTML treats them as present/absent, while DOM uses true/false properties

4. HTML does not support boolean attributes

The correct answer is: HTML treats them as present/absent, while DOM uses true/false properties

In HTML, boolean attributes are treated as present or absent. When you define a boolean attribute in your HTML, it is considered "true" if the attribute is present, regardless of the value (e.g., `<input disabled>` treats "disabled" as true). If the attribute is omitted, it is interpreted as false. In contrast, the Document Object Model (DOM) represents these boolean attributes using true/false properties. When accessing the boolean attribute through the DOM, the presence of the attribute is reflected as true, and its absence is treated as false. For example, if you check the `disabled` property of an input element in the DOM, it will return true if the attribute is present and false if it is not. This nuanced difference highlights how the same boolean attribute is represented differently in the HTML markup versus its representation in the DOM, making it important for developers to understand how to interact with HTML boolean attributes effectively when scripting.