Lowercase Attribute Names

html.attr_lowercase

Severity

info

Remediation Complexity

low

Remediation Risk

low

Remediation Effort

low

Resource

Code Smell

Language

Html

Description

Flags an element that declares an attribute whose name contains an uppercase letter, except for the camelCase attributes that are legitimately mixed-case in inline SVG.

Rationale

HTML attribute names are case-insensitive, so HREF and href address the same attribute. Mixing cases is purely a style inconsistency that makes the source harder to read and to grep. SVG defines a number of genuinely camelCase presentation attributes (for example viewBox); those are recognised and not flagged.

<div dataValue="x">a</div>    <!-- FLAW — camelCase attribute name -->
<a HREF="/p">b</a>            <!-- FLAW — uppercase attribute name -->

<div class="x">c</div>        <!-- OK — lowercase -->
<rect viewBox="0 0 1 1">d</rect>  <!-- OK — known SVG attribute -->

Remediation

Write the attribute name in lowercase, e.g. data-value and href. Keep the established camelCase spelling only for SVG attributes that require it.

References

HTML spec — attributes