[5.x]: HTML IDs should be allowed to begin with a number

[MoritzLost]

What happened?

Description

The craft\helpers\Html::id() function was recently updated to strip out numbers at the beginning as a follow-up to #13943

The justification was that HTML IDs aren't allowed to begin with numbers. However, this was only the case in HTML 4. In HTML 5, there is no such restriction.

We're using this function to generate unique IDs for sections in our page builder matrix field. Those look like 123-section-name, where 123 is the entries' (previously matrix block's) ID and section-name is the headline. This string is truncated to a specific character length, so to ensure the entry ID is always part of the section ID, it needs to be at the start.

Steps to reproduce

1. Call craft\helpers\Html::id('123-custom-string')

Expected behavior

2. The function should not strip out numbers at the beginning, as there is no reason for doing so to be standard-compliant.

Actual behavior

The function unexpectedly strips out numbers at the beginning.

Craft CMS version

5.1.6

PHP version

No response

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[brandonkelly]

Doh, you’re right. Not sure how I missed that I was looking at the HTML4 spec.

Fixed for the next release.

[MoritzLost]

@brandonkelly Thanks Brandon!

[brandonkelly]

Craft 5.1.8 is out with that fix.

[AugustMiller]

Just a heads up that while HTML5 allows numerals at the beginning of id attributes, CSS identifiers do not:

{% set id = '123-custom-string' | id %}

<div id="{{ id }}">Hello, world!</div>

{% css %}
  /* This block won't be applied to our div: */
  #{{ id }} {
    color: red;
  }
{% endcss %}