name - ¿Cuáles son los valores válidos para el atributo id en HTML?
etiquetas html (22)
HTML5
Teniendo en cuenta que la identificación debe ser única, es decir. no debe haber varios elementos en un documento que tengan el mismo valor de id.
Las reglas sobre el contenido de ID en HTML5 son (aparte de ser únicas):
This attribute''s value must not contain white spaces. [...]
Though this restriction has been lifted in HTML 5,
an ID should start with a letter for compatibility.
Esta es la especificación de W3 sobre ID (desde MDN):
Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values
(for example, they did not permit ID values to begin with a number).
Más información:
Al crear los atributos de id para los elementos HTML, ¿qué reglas existen para el valor?
HTML5:
elimina las restricciones adicionales en el atributo id, vea 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 ningún carácter 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),_(guión bajo),: (dos puntos) y.(período)
pero uno debe evitar : y . porque
Por ejemplo, una ID puede ser etiquetada como "ab: c" y referenciada en la hoja de estilo como #ab: c, pero además de ser la identificación del elemento, podría significar id "a", clase "b", pseudo- selector "c". Mejor evitar la confusión y evitar el uso. y: en conjunto.
HTML5: valores permitidos para ID y atributos de clase
A partir de HTML5, las únicas restricciones en el valor de una ID son:
- debe ser único en el documento
- no debe contener caracteres de espacio
- debe contener al menos un carácter
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 espacios en blanco. Esto es muy diferente de HTML4.
En HTML 4, los valores de ID deben comenzar con una letra, que luego puede ser seguida solo por 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 (por ejemplo, CSS, JavaScript, regex).
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:
En CSS, los identificadores (incluidos los nombres de elementos, las clases y las ID en los selectores) pueden contener solo los caracteres [a-zA-Z0-9] y los caracteres ISO 10646 U + 00A0 y superior, 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, es posible que pueda escapar de los personajes en contextos donde tienen restricciones o un significado especial.
Referencias W3C
HTML5
El atributo
idespecifica el identificador único (ID) de su elemento.El valor debe ser único entre todos los ID en el 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, las ID pueden consistir en solo dígitos, comenzar con un dígito, comenzar con un guión bajo, constar de solo puntuación, etc.
El atributo, si se especifica, debe tener un valor que sea un conjunto de tokens separados por espacios que representan las diversas clases a las que pertenece el elemento.
Las clases que un elemento HTML le ha asignado 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 recomienda a los autores que usen valores que describan la naturaleza del contenido, en lugar de valores que describan la presentación deseada del contenido.
- Los ID son los más adecuados para nombrar partes de su diseño, por lo que no deben dar el mismo nombre para ID y clase
- ID permite caracteres alfanuméricos y especiales.
- pero evite el uso de
# : . * !# : . * !simbolos - espacios no permitidos
- no comenzó con números o un guión seguido de un dígito
- distingue mayúsculas y minúsculas
- usar selectores de ID es más rápido que usar selectores de clase
- use el guión "-" (el guión bajo "_" también se puede usar, pero no es bueno para seo) para nombres largos de clase de CSS o regla de Id.
- Si una regla tiene un selector de ID como selector de clave, no agregue el nombre de etiqueta a la regla. Dado que los ID son únicos, agregar un nombre de etiqueta ralentizaría innecesariamente el proceso de coincidencia.
- En HTML5, el atributo id se puede usar en cualquier elemento HTML y en HTML 4.01, el atributo id no se puede usar con:
<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
Además, nunca olvides que una identificación es única. Una vez utilizado, el valor de ID puede no aparecer nuevamente en ninguna parte del documento.
Puede tener muchas identificaciones, pero todas deben tener un valor único.
Por otro lado, está el elemento clase. Al igual que la identificación, puede aparecer muchas veces, pero el valor puede usarse una y otra vez.
Cualquier valor alfanumérico y " - " y " _ " son válidos. Pero, debes comenzar el nombre de identificación con cualquier carácter entre AZ o az .
De la especificación de HTML 4 :
Los tokens de ID y NOMBRE deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos 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.
De la especificación de HTML 4 ...
Los tokens de ID y NOMBRE deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_") , dos puntos (":") y puntos (".").
EDITAR: ¡Oh! ¡Golpeado al botón, otra vez!
En HTML5, una identificación no puede comenzar con un número, por ejemplo, id- "1kid" y no pueden tener espacios (id = "Some kind" )
En la práctica, muchos sitios usan atributos de id comienzan con números, aunque técnicamente no es un HTML válido.
La especificación de borrador de HTML 5 afloja las reglas de los atributos id y name : ahora son solo cadenas opacas que no pueden contener espacios.
Estrictamente debe coincidir
[A-Za-z][-A-Za-z0-9_:.]*
Pero jquery parece tener problemas con los dos puntos por lo que podría ser mejor evitarlos.
Los guiones, guiones bajos, puntos, dos puntos, números y letras son válidos para su uso con CSS y JQuery. Lo siguiente debería funcionar pero debe ser único en toda la página y también debe comenzar con una letra [A-Za-z].
Trabajar con dos puntos y puntos necesita un poco más de trabajo, pero puede hacerlo como muestra el siguiente ejemplo.
<html>
<head>
<title>Cake</title>
<style type="text/css">
#i/.Really/.Like/.Cake {
color: green;
}
#i/:Really/:Like/:Cake {
color: blue;
}
</style>
</head>
<body>
<div id="i.Really.Like.Cake">Cake</div>
<div id="testResultPeriod"></div>
<div id="i:Really:Like:Cake">Cake</div>
<div id="testResultColon"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var testPeriod = $("#i//.Really//.Like//.Cake");
$("#testResultPeriod").html("found " + testPeriod.length + " result.");
var testColon = $("#i//:Really//:Like//:Cake");
$("#testResultColon").html("found " + testColon.length + " result.");
});
</script>
</body>
</html>
Para HTML 4 , la respuesta es técnicamente:
Los tokens de ID y NOMBRE deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier número 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 puede que no contenga ningún espacio.
El atributo id es sensible a mayúsculas y minúsculas en XHTML .
Como un asunto puramente práctico, 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 una barra invertida en CSS o una barra invertida doble en una cadena de selección que se pasa 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 las ID.
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''). #first/.name $(''#first//.name''). Pero si olvida la barra invertida, $(''#first.name'') , tendrá un selector perfectamente válido buscando un elemento con ID first y también con el name clase. Este es un error que es fácil de pasar por alto. Es posible que a la larga sea más feliz eligiendo el first-name identificación (un guión en lugar de un punto), en su lugar.
Puede simplificar sus tareas de desarrollo siguiendo estrictamente una convención de nomenclatura. Por ejemplo, si se limita por completo a los caracteres en minúscula 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 se preguntará "¿fue el primer FirstName o el FirstName ?" porque siempre sabrás que debes escribir el primer nombre. ¿Prefiere la funda de camello? Limítate a eso, sin guiones ni guiones bajos, y siempre, siempre con mayúsculas o minúsculas para el primer carácter, no los mezcles.
Un problema ahora muy oscuro fue que al menos un navegador, Netscape 6, trató incorrectamente los valores de los atributos de identificación como sensibles a las mayúsculas y minúsculas . Eso significaba que si hubiera escrito id="firstName" en su HTML (minúscula ''f'') y #FirstName { color: red } en su CSS (mayúscula ''F''), ese navegador defectuoso no habría podido establece el color del elemento en rojo. En el momento de esta edición, abril de 2015, espero que no se te pida que apoyes a Netscape 6. Considera esto como una nota histórica.
Para hacer referencia a una identificación con un punto, debe usar una barra invertida. No estoy seguro de si es lo mismo para guiones o guiones bajos. Por ejemplo: HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance/.instrumentNumber{word-wrap:break-word;}
Parece que aunque los dos puntos (:) y los puntos (.) Son válidos en la especificación HTML, no son válidos como selectores de identificación en CSS por lo que probablemente sea mejor evitarlos si pretende usarlos para ese propósito.
Sé que esto es muy tarde para responder a esta pregunta, pero debido a que tuve el mismo problema y esta respuesta me parece más completa, decido responder.
Todos a, b, c ... x, y, z, A, B, C ... X, Y, Z, 0,1,2 ... 7,8,9, -, _ pueden usarse para id, pero no debe usar dígitos y - como primer carácter.
estos son incorrectos
1adfsvsdf // use number in first
-adfasdf // use - in first
afd''ksdf // use '' in characters
asdf;asdf // use ; in characters
Sin espacios, debe comenzar con al menos un carácter de a a z y de 0 a 9.
Técnicamente puede usar dos puntos y puntos en los atributos id / name, pero le sugiero que evite ambos.
En CSS (y en varias bibliotecas de JavaScript como jQuery), tanto el período como los dos puntos tienen un significado especial y se encontrará con problemas si no tiene cuidado. Los períodos son selectores de clase y los dos puntos son pseudo-selectores (por ejemplo, ": hover" para un elemento cuando el mouse está sobre él).
Si le asignas a un elemento el id "my.cool:thing", tu selector de CSS se verá así:
#my.cool:thing { ... /* some rules */ ... }
Lo que realmente dice "el elemento con un id de ''my'', una clase de ''cool'' y el ''cosa'' de pseudo-selector" en CSS.
Se adhieren a AZ de cualquier caso, números, guiones bajos y guiones. Y como se dijo anteriormente, asegúrate de que tus ID sean únicas.
Esa debería ser tu primera preocupación.
Un identificador único para el elemento.
No debe haber varios elementos en un documento que tengan el mismo valor de id.
Cualquier cadena, con las siguientes restricciones:
- debe tener al menos un carácter de largo
no debe contener caracteres de espacio:
- U + 0020 ESPACIO
- U + 0009 TABULACIÓN DE PERSONAJES (tab)
- U + 000A LINE FEED (LF)
- U + 000C FORM ALIMENTACIÓN (FF)
- U + 000D DEVOLUCIÓN DEL CARRO (CR)
Uso de caracteres, excepto ASCII letters and digits, ''_'', ''-'' and ''.'' puede causar problemas de compatibilidad, ya que no estaban permitidos en HTML 4 . Aunque esta restricción se ha levantado en HTML 5 , una identificación debe comenzar con una letra para compatibilidad.
alfabetos-> gorras y pequeños
dígitos-> 0-9
caracteres especiales-> '':'', ''-'', ''_'', ''.''
el formato debe ser a partir de ''.'' o un alfabeto, seguido de cualquiera de los caracteres especiales de más alfabetos o números. el valor del campo id no debe terminar en ''_''.
Además, los espacios no están permitidos, si se proporcionan, se tratan como valores diferentes, lo que no es válido en el caso de los atributos de identificación.
jQuery maneja cualquier nombre de ID válido. Solo necesita escapar de los metacaracteres (es decir, puntos, punto y coma, corchetes ...). Es como decir que JavaScript tiene un problema con comillas solo porque no puedes escribir
var name = ''O''Hara'';
para HTML5
El valor debe ser único entre todos los ID en el subárbol de inicio del elemento y debe contener al menos un carácter. El valor no debe contener caracteres de espacio.
Al menos un personaje, sin espacios.
Esto abre la puerta a casos de uso válidos, como el uso de caracteres acentuados. También nos da mucha más munición para dispararnos en el pie, ya que ahora puedes usar valores de identificación que causarán problemas con CSS y JavaScript a menos que seas realmente cuidadoso.