Lowercase Attribute Names
ID |
html.attr_lowercase |
Severity |
info |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Code Smell |
Language |
Html |
Tags |
code_smell |
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 -->Component templates are not reported
A component template is compiled by its framework and only then produces HTML, and the framework
matches a binding name and a directive selector case-sensitively. [ngTemplateOutlet], *ngIf and
formControlName are the only spellings that bind: lowercasing them breaks the page, so the advice
this rule gives cannot be followed there.
The whole file is therefore skipped as soon as it shows template syntax anywhere — an attribute name
that is a binding ([prop], (event), [(model)], *structural, #reference, @animation,
:bound) or text that holds a control-flow statement (@if, @for, @switch, @defer, @let,
or a {% … %} tag). The decision is made for the document rather than for each attribute because
the case-sensitive names are not confined to the ones carrying binding delimiters: a plain
matInput or svgIcon is a directive selector too.
<!-- OK — every name below is a binding or a directive selector, in a file that is a template -->
<form [formGroup]="changePassForm" (ngSubmit)="onSubmit()">
<input [type]="hide ? 'password' : 'text'" matInput formControlName="originalpassword">
</form>The trade-off is deliberate: an uppercase HTML attribute written inside a component template is not reported either.
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.