Separate Content From Behavior
ID |
html.separate_content_presentation |
Severity |
low |
Remediation Complexity |
low |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Code Smell |
Language |
Html |
Tags |
code_smell |
Description
Flags any element that wires behaviour directly into the markup through an inline event-handler
attribute such as onclick or onmouseover.
Rationale
Mixing behaviour into the markup couples structure and logic: the handler code cannot be reused, linted, minified or unit-tested as ordinary script, and the document becomes harder to read and maintain. Attaching listeners from a separate script keeps each concern in its own place.
<button onclick="f()">a</button> <!-- FLAW — behavior in markup -->
<button type="button">a</button> <!-- OK — listener added from a script -->Remediation
Remove the inline on* handler from the element and attach the listener from a separate script,
for example with addEventListener, targeting the element by id or class.