HTML: ¿Valores de atributo de identificación válidos?

Al crear el id atributos para elementos HTML, ¿qué reglas existen para el valor?

Para HTML 4la respuesta es técnicamente:

Los tokens de ID y NOMBRE deben comenzar con una letra ([A-Za-z]) y puede ir seguido de cualquier número de letras, dígitos ([0-9]), guiones (“-“), guiones bajos (“_”), dos puntos (“:”) y puntos (“.”).

HTML5 es aún más permisivo, diciendo solo que una identificación debe contener al menos un carácter y no puede contener ningún carácter de espacio.

El atributo id distingue entre mayúsculas y minúsculas en XHTML.

Como cuestión puramente práctica, es posible que desee evitar ciertos caracteres. Los puntos, dos puntos y ‘#’ tienen un significado especial en los selectores de CSS, por lo que tendrá que escapar de esos caracteres usando un barra invertida en CSS o una barra invertida doble en un cadena selectora pasada a jQuery. Piense en la frecuencia con la que tendrá que escapar de un carácter en sus hojas de estilo o código antes de volverse loco con puntos y dos puntos en los identificadores.

Por ejemplo, la declaración HTML <div id="first.name"></div> es válida. Puede seleccionar ese elemento en CSS como #first\.name y en jQuery así: $('#first\\.name'). Pero si olvidas la barra invertida, $('#first.name')tendrás un selector perfectamente válido buscando un elemento con id first y tambien teniendo clase name. Este es un error que es fácil pasar por alto. A la larga, puede ser más feliz eligiendo la identificación first-name (un guión en lugar de un punto), en su lugar.

Puede simplificar sus tareas de desarrollo si se apega estrictamente a una convención de nomenclatura. Por ejemplo, si se limita por completo a los caracteres en minúsculas y siempre separa las palabras con guiones o guiones bajos (pero no ambos, elija uno y nunca use el otro), entonces tiene un patrón fácil de recordar. Nunca te preguntarás “¿fue firstName o FirstName?” porque siempre sabrás que debes escribir first_name. ¿Prefieres la funda camel? Entonces limítese a eso, sin guiones ni guiones bajos, y siempre, use mayúsculas o minúsculas para el primer carácter, no los mezcle.

Un problema ahora muy oscuro fue que al menos un navegador, Netscape 6, valores de atributo de identificación tratados incorrectamente como sensibles a mayúsculas y minúsculas. Eso significaba que si hubieras escrito id="firstName" en su HTML (‘f’ minúscula) y #FirstName { color: red } en su CSS (‘F’ mayúscula), ese navegador defectuoso no habría podido establecer el color del elemento en rojo. En el momento de esta edición, abril de 2015, espero que no se le pida que admita Netscape 6. Considere esto como una nota al pie histórica.

Desde el Especificación HTML 4:

Los tokens de ID y NOMBRE deben comenzar con una letra ([A-Za-z]) y puede ir seguido de cualquier número de letras, dígitos ([0-9]), guiones (“-“), guiones bajos (“_”), dos puntos (“:”) y puntos (“.”).

Un error común es usar una identificación que comienza con un dígito.

Técnicamente, puede usar dos puntos y puntos en los atributos de identificación/nombre, pero le sugiero que evite ambos.

En CSS (y varias bibliotecas de JavaScript como jQuery), tanto el punto como los dos puntos tienen un significado especial y te encontrarás con problemas si no tienes cuidado. Los puntos son selectores de clase y los dos puntos son pseudo-selectores (p. ej., “:pasar” para un elemento cuando el mouse está sobre él).

Si le das a un elemento el id “my.cool:thing”, tu selector de CSS se verá así:

#my.cool:thing { ... /* some rules */ ... }

Lo que realmente está diciendo, “el elemento con una identificación de ‘mi’, una clase de ‘genial’ y el pseudo-selector ‘cosa'” en CSS-speak.

Apéguese a AZ de cualquier caso, números, guiones bajos y guiones. Y como se dijo anteriormente, asegúrese de que sus identificaciones sean únicas.

Esa debería ser tu primera preocupación.

HTML5: valores permitidos para atributos de ID y clase

A partir de HTML5, las únicas restricciones sobre el valor de un ID son:

1. debe ser único en el documento
2. no debe contener caracteres de espacio
3. debe contener al menos un caracter

Se aplican reglas similares a las clases (excepto por la unicidad, por supuesto).

Entonces, el valor puede ser todos los dígitos, solo un dígito, solo caracteres de puntuación, incluir caracteres especiales, lo que sea. Simplemente sin espacios en blanco. Esto es muy diferente de HTML4.

En HTML 4, los valores de ID deben comenzar con una letra, a la que solo pueden seguir letras, dígitos, guiones, guiones bajos, dos puntos y puntos.

En HTML5 estos son válidos:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

Solo tenga en cuenta que el uso de números, puntuación o caracteres especiales en el valor de una identificación puede causar problemas en otros contextos (p. ej., CSS, JavaScript, expresiones regulares).

Por ejemplo, la siguiente ID es válida en HTML5:

<div id="9lions"> ... </div>

Sin embargo, no es válido en CSS:

De la especificación CSS2.1:

4.1.3 Caracteres y mayúsculas y minúsculas

En CSS, identificadores (incluidos los nombres de los elementos, las clases y los ID en los selectores) solo pueden contener los caracteres [a-zA-Z0-9] e ISO 10646 caracteres U+00A0 y superiores, más el guión (-) y el guión bajo (_); no pueden comenzar con un dígito, dos guiones o un guión seguido de un dígito.

En la mayoría de los casos, puede escapar caracteres en contextos donde tienen restricciones o significado especial.

Referencias W3C

HTML5

3.2.5.1 El id
atributo

El id El atributo especifica el identificador único (ID) de su elemento.

El valor debe ser único entre todos los ID del subárbol de inicio del elemento y debe contener al menos un carácter. El valor no debe contener caracteres de espacio.

Nota: No hay otras restricciones sobre qué forma puede tomar una identificación; en particular, los ID pueden consistir solo en dígitos, comenzar con un dígito, comenzar con un guión bajo, consistir solo en puntuación, etc.

3.2.5.7 El class
atributo

El atributo, si se especifica, debe tener un valor que sea un conjunto de tokens separados por espacios que representen las diversas clases a las que pertenece el elemento.

Las clases que se le han asignado a un elemento HTML consisten en todas las clases devueltas cuando el valor del atributo de clase se divide en espacios. (Se ignoran los duplicados).

No hay restricciones adicionales sobre los tokens que los autores pueden usar en el atributo de clase, pero se anima a los autores a usar valores que describan la naturaleza del contenido, en lugar de valores que describan la presentación deseada del contenido.

jQuery hace manejar cualquier nombre de identificación válido. Solo necesita escapar de los metacaracteres (es decir, puntos, punto y coma, corchetes…). Es como decir que JavaScript tiene un problema con las comillas solo porque no puedes escribir

var name="O"Hara';

Selectores en jQuery API (ver nota inferior)

Estrictamente debería coincidir

[A-Za-z][-A-Za-z0-9_:.]*

Pero jQuery parece tener problemas con los dos puntos, por lo que sería mejor evitarlos.

HTML5:

Se deshace de las restricciones adicionales en el identificación atributo (mira aquí). Los únicos requisitos que quedan (aparte de ser únicos en el documento) son:

1. el valor debe contener al menos un carácter (no puede estar vacío)
2. no puede contener caracteres de espacio.

Pre-HTML5:

La identificación debe coincidir:

[A-Za-z][-A-Za-z0-9_:.]*

1. Debe comenzar con caracteres AZ o az
2. Puede contener - (guión), _ (guion bajo), : (colon) y . (período)

Pero uno debe evitar : y . porque:

Por ejemplo, un ID podría estar etiquetado como “ab:c” y referenciado en la hoja de estilo como #ab:c, pero además de ser el ID del elemento, podría significar id “a”, clase “b”, pseudo -selector “c”. Lo mejor es evitar la confusión y mantenerse alejado de usar . y : en total.