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.

Notes

XML Documents

This rule is automatically disabled for XML documents and XML+ERB templates. XML allows uppercase tag names and follows different naming conventions than HTML.

The rule will be disabled when:

• The document contains an XML declaration (<?xml version="1.0" ?>)
• The file extension is .xml or .xml.erb

Components

This rule does not apply to component tags, which are capitalized on purpose. That covers the built-in components a herb:slots template compiles away, such as <Fragment>, <Fallback>, <Async> and <Lazy>, and it covers any other capitalized tag that does not name an HTML element.

A capitalized tag that does name an HTML element, such as <Div>, is still an offense, since that one is meant as plain HTML.

SVG Elements

This rule does not apply to child elements within <svg> tags, as SVG element names are case-sensitive and may require specific capitalization (e.g., linearGradient, clipPath). However, the rule still applies to the <svg> element itself.

Examples

✅ Good

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

<input type="text" name="username" autocomplete="off">

<span>Label</span>

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

<%# herb:slots client %>

<Async>
  <p><%= Geo.locate(city) %></p>
  <Fallback><p class="pulse">Looking it up</p></Fallback>
</Async>

🚫 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" autocomplete="off">
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