Pregunta ¿Cuáles son los valores válidos para el atributo id en HTML?


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


1707
2017-09-16 09:08


origen


Respuestas:


por HTML 4, la respuesta es técnicamente:

Los tokens de ID y NAME deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier cantidad de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_") , dos puntos (":") y puntos (".").

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

El atributo id es sensible a mayúsculas y minúsculas en XHTML.

Como una cuestión puramente práctica, es posible que desee evitar ciertos caracteres. Los períodos, 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 doble barra invertida en una cadena de selector pasada a jQuery. Piense en la frecuencia con la que tendrá que escapar de un personaje 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 como tal: $('#first\\.name'). Pero si te olvidas de la barra invertida, $('#first.name'), tendrá un selector perfectamente válido buscando un elemento con id first y también teniendo clase name. Este es un error que es fácil pasar por alto. Es posible que a la larga seas 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 al apegarse estrictamente a una convención de nomenclatura. Por ejemplo, si se limita por completo a caracteres en minúsculas y siempre separa 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á que debe escribir first_name. Prefiere camello? Luego, limítese a eso, sin guiones o guiones bajos, y siempre, use siempre mayúsculas o minúsculas para el primer carácter, no las mezcle.


Un problema ahora muy oscuro era que al menos un navegador, Netscape 6, valores de atributo de id incorrectamente tratados como distingue entre mayúsculas y minúsculas. Eso significaba que si habías tipeado id="firstName" en su HTML (minúscula 'f') y #FirstName { color: red } en su CSS (mayúscula 'F'), ese navegador con errores no habría podido establecer el color del elemento en rojo. En el momento de esta edición, abril de 2015, espero que no te pidan que apoyes a Netscape 6. Considera esto como una nota histórica al pie de la página.


1487
2017-09-17 01:42



Desde el Especificación HTML 4:

Los tokens de ID y NAME deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier cantidad 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.


194
2017-09-16 09:09



Técnicamente puede usar dos puntos y puntos en los atributos id / name, pero le recomiendo evitar ambos.

En CSS (y varias bibliotecas de JavaScript como jQuery), tanto el período como los dos puntos tienen un significado especial y usted tendrá problemas si no tiene cuidado. Los períodos son selectores de clase y los dos puntos son pseudo-selectores (p. Ej., ": Flotar" para un elemento cuando el mouse está sobre él).

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

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

Lo que realmente está diciendo, "el elemento con un id de 'mi', una clase de 'cool' y el 'pseudo-selector' de cosas 'en CSS-speak.

Se adhieren a A-Z 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.


130
2017-09-16 14:01



jQuery hace manejar cualquier nombre de ID válido. Solo necesita escapar metacaracteres (es decir, puntos, puntos y comas, corchetes ...). Es como decir que JavaScript tiene un problema con las comillas solo porque no se puede escribir

var name = 'O'Hara';

Selectores en jQuery API (ver nota al pie)


60
2018-01-10 20:40



Estrictamente debe coincidir

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

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


51
2017-09-16 09:11



HTML5:

se deshace de las restricciones adicionales en el atributo id mira aquí. Los únicos requisitos que quedan (además de ser únicos en el documento) son:

  1. el valor debe contener al menos un caracter (no puede estar vacio)
  2. no puede contener ningún espacio de caracteres

PRE-HTML5:

ID debe coincidir:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Debe comenzar con los caracteres A-Z o a-z
  2. Puede contener - (guión), _ (guion bajo), : (colon) y . (período)

pero uno debe evitar : y . Beacause:

Por ejemplo, una ID podría etiquetarse como "ab: c" y referenciarse en la hoja de estilo como #ab: c pero además de ser la identificación para el elemento, podría significar id "a", clase "b", pseudo- selector "c". Lo mejor es evitar la confusión y evitar el uso. y: en conjunto.


39
2018-01-18 07:09



HTML5: valores permitidos para ID y atributos de clase

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

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

Reglas similares se aplican a las clases (excepto por la singularidad, 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 no hay espacio en blanco. Esto es muy diferente de HTML4.

En HTML 4, los valores de ID deben comenzar con una letra, que luego solo se puede seguir con 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, signos de puntuación o caracteres especiales en el valor de una ID puede causar problemas en otros contextos (por ejemplo, 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 Personajes y caso

En CSS, identificadores (incluidos nombres de elementos, clases e ID en   selectores) puede contener solo 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 por un dígito.

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


Referencias del W3C

HTML5

3.2.5.1 El id   atributo

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

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

Nota: no hay otras restricciones sobre qué forma puede tomar una identificación; en   en particular, las ID pueden consistir en solo dígitos, comenzar con un dígito, comenzar   con un guion bajo, consiste solo en puntuacion, 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 representan las diversas clases que el   elemento pertenece a.

Las clases que un elemento HTML le ha asignado consta de todas   las clases devueltas cuando el valor del atributo de clase se divide en   espacios. (Los duplicados son ignorados)

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   describir la naturaleza del contenido, en lugar de los valores que describen   la presentación deseada del contenido.


33
2017-08-02 15:53