señor tiburón
Al crear el id
atributos para elementos HTML, ¿qué reglas existen para el valor?
vid
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.
-
Tenga en cuenta que los atributos de clase e identificación son distingue entre mayúsculas y minúsculas en XHTML, todos los demás atributos no lo son. Eric Meyer mencionó esto en un taller de CSS al que asistí.
– John Topley
22 de abril de 2009 a las 10:35
-
También tenga en cuenta que si intenta escribir una regla CSS para apuntar a un elemento por ID, y la ID comienza con un número, no funcionará. ¡Gorrón!
– Zack el humano
20 de enero de 2010 a las 0:53
-
Como para ‘.’ o ‘:’ en una ID usando jQuery, vea jQuery Preguntas más frecuentes. Contiene una pequeña función que hace el escape necesario.
– Wolframio
6 mayo 2010 a las 10:18
-
La respuesta a las preguntas frecuentes de jquery a la que @Wolfram hace referencia es ¿cómo-selecciono-un-elemento-mediante-un-id-que-tiene-caracteres-usados-en-la-notación-css.
– Owengal
29 de diciembre de 2021 a las 0:28
-
otra restricción crucial en el valor de id es que debe ser único. Sé que esto puede parecer obvio, pero he visto esta regla rota demasiadas veces.
– brennanyoung
29 de agosto de 2022 a las 16:20
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.
-
Tenga en cuenta que HTML5 permite mucho más que HTML4, por ejemplo. 456bereastreet.com/archive/201011/… y w3.org/TR/html5/elements.html#the-id-atributo
– Señor tiburón
30 de noviembre de 2010 a las 8:33
miguel thompson
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.
-
Puede usar dos puntos y puntos, pero deberá escaparlos usando barras invertidas dobles, por ejemplo: $(‘#my\\.cool\\:thing’) o escapando una variable: $(‘#’+id.replace (/\./,’\\.’).reemplazar(/\:/,’\\:’)) groups.google.com/group/jquery-en/browse_thread/thread/…
– joeformd
3 de diciembre de 2009 a las 10:41
-
Ver la respuesta de Álvaro González.
-Peter Mortensen
7 ago 2021 a las 23:42
-
Cíñete a a-z0-9_-. Evite las mayúsculas también porque los navegadores aparentemente no distinguen entre mayúsculas y minúsculas (ug).
–Britton Kerin
22 de agosto de 2022 a las 21:25
miguel benjamin
HTML5: valores permitidos para atributos de ID y clase
A partir de HTML5, las únicas restricciones sobre el valor de un ID son:
- debe ser único en el documento
- no debe contener caracteres de espacio
- 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
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.
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';
-
Este es un comentario sobre otra respuesta y no intenta responder la pregunta original.
– sean
5 de enero de 2022 a las 20:12
-
@Sean En el pasado, la pregunta se etiquetó como jQuery. De hecho, tiene poco sentido ahora. Pero, para ser honesto, no puedo recordar lo que tenía en mente hace 13 años.
–Álvaro González
6 de enero de 2022 a las 9:44
Pedro Mortensen
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.
-
Este es un comentario sobre otra respuesta y no intenta responder la pregunta original.
– sean
5 de enero de 2022 a las 20:12
-
@Sean En el pasado, la pregunta se etiquetó como jQuery. De hecho, tiene poco sentido ahora. Pero, para ser honesto, no puedo recordar lo que tenía en mente hace 13 años.
–Álvaro González
6 de enero de 2022 a las 9:44
Pedro Mortensen
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:
- el valor debe contener al menos un carácter (no puede estar vacío)
- no puede contener caracteres de espacio.
Pre-HTML5:
La identificación debe coincidir:
[A-Za-z][-A-Za-z0-9_:.]*
- Debe comenzar con caracteres AZ o az
- 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.
-
En HTML5, la identificación no acepta
id="c365720c"
– DecPK
14 de abril de 2021 a las 3:54
-
En realidad HTML5 lo hace.
– KHAYRI RR WOULFE
5 de marzo de 2022 a las 13:02
Esto difiere entre HTML5 y versiones anteriores de la especificación. Lo expliqué aquí: mathiasbynens.be/notes/html5-id-clase
– Mathias Bynens
24 de octubre de 2011 a las 8:41
Noté que SharePoint 2010 asignaba un valor como este: {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2}-{E60CE5E2-6E64-4350-A884-654B72DA5A53} para una tabla generada dinámicamente dentro de un elemento web y una página que contiene un valor de ID de ese tipo no se rompió en ninguno de los navegadores populares. Sin embargo, lidiar con tales valores de ID a través de JavaScript es complicado: mvark.blogspot.in/2012/07/…
– mvark
20 de julio de 2012 a las 18:34
Requisitos de HTML4 y HTML5 para
ID
los valores son muy diferentes. Aquí hay un resumen rápido y completo de HTML5ID
reglas: stackoverflow.com/a/31773673/3597276– Michael Benjamín
3 de agosto de 2015 a las 0:32
Tenga en cuenta: hacer lo que han dicho algunas de las respuestas y usar un punto (
**.**)
con jQuery le traerá bastantes problemas, por ejemplo, usar<input id="me.name" />
y luego$("#me.name").val()
hará que jQuery busque un<me>
etiqueta con la clase.name
que nadie quiere realmente!– Can O’Spam
26 de agosto de 2015 a las 15:20
@SamSwift웃 No, solo tienes que escapar de los caracteres especiales como los documentos dicen. Por favor, chequee esto demostración en línea.
–Álvaro González
10 de noviembre de 2016 a las 9:58