Linter Rule: Enforce lowercase tag names

Rule: html-tag-name-lowercase

Description

Enforce that all HTML tag names are written in lowercase.

Rationale

HTML is case-insensitive for tag names, but lowercase is the widely accepted convention for writing HTML. Consistent lowercase tag names improve readability, maintain consistency across codebases, and align with the output of most HTML formatters and validators.

Writing tags in uppercase or mixed case can lead to inconsistent code and unnecessary diffs during reviews and merges.

Examples

✅ Good

<div class="container"></div>

<input type="text" name="username" />

<span>Label</span>

<%= content_tag(:div, "Hello world!") %>

🚫 Bad

<DIV class="container"></DIV>
Closing tag name `DIV` should be lowercase. Use `div` instead. (html-tag-name-lowercase)
Opening tag name `DIV` should be lowercase. Use `div` instead. (html-tag-name-lowercase)

<Input type="text" name="username" />
Opening tag name `Input` should be lowercase. Use `input` instead. (html-tag-name-lowercase)

<Span>Label</Span>
Closing tag name `Span` should be lowercase. Use `span` instead. (html-tag-name-lowercase)
Opening tag name `Span` should be lowercase. Use `span` instead. (html-tag-name-lowercase)

<%= content_tag(:DiV, "Hello world!") %> <!-- TODO -->

References

• HTML Living Standard - Tag Syntax