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

2016

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

Señor tiburón
fuente
96
Esto difiere entre HTML5 y versiones anteriores de la especificación. Lo expliqué aquí: mathiasbynens.be/notes/html5-id-class
Mathias Bynens
55
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, tratar con estos valores de ID a través de JavaScript es complicado - mvark.blogspot.in/2012/07/…
mvark
3
Los requisitos HTML4 y HTML5 para los IDvalores son muy diferentes. Aquí hay un resumen rápido y completo de las IDreglas HTML5 : stackoverflow.com/a/31773673/3597276
Michael Benjamin
55
Tenga en cuenta lo siguiente: hacer lo que dicen algunas de las respuestas y usar un punto ( **.**)con jQuery se encontrará con muchos problemas, por ejemplo, usar <input id="me.name" />y luego $("#me.name").val()provocará que jQuery busque una <me>etiqueta con la clase .name, que nadie quiere Realmente!
Can O 'Spam
3
@SamSwift 웃 No, solo tienes que escapar de caracteres especiales como dicen los documentos . Por favor revise esta demostración en línea .
Álvaro González

Respuestas:

1703

Para HTML 4 , la respuesta es técnicamente:

Los tokens ID y NAME 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, solo dice que una identificación debe contener al menos un carácter y no puede contener ningún 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 personajes. Los puntos, los dos puntos y '#' tienen un significado especial en los selectores CSS, por lo que tendrá que escapar de esos caracteres utilizando una barra invertida en CSS o una barra invertida doble en una cadena de selector pasada a jQuery . Piensa en la frecuencia con la que tendrás que escapar de un personaje en tus hojas de estilo o código antes de volverte 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\.namey en jQuery así: $('#first\\.name').Pero si olvida la barra diagonal inversa, $('#first.name')tendrá un selector perfectamente válido que busca un elemento con id firsty también tiene clase name. Este es un error que es fácil de pasar por alto. En su lugar, podría ser más feliz eligiendo la identificación first-name(un guión en lugar de un punto).

Puede simplificar sus tareas de desarrollo siguiendo estrictamente una convención de nomenclatura. Por ejemplo, si se limita por completo a caracteres en minúscula y siempre separa las palabras con guiones o guiones bajos (pero no con ambos, elija uno y nunca use el otro), entonces tiene un patrón fácil de recordar. Nunca te preguntarás "¿fue firstNameo FirstName?" porque siempre sabrás que debes escribir first_name. ¿Prefieres el caso del camello? Luego limítese a eso, sin guiones ni guiones bajos, y siempre, use consistentemente 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, trataba incorrectamente los valores de los atributos de identificación como mayúsculas y minúsculas . Eso significaba que si hubiera escrito id="firstName"su HTML (minúscula 'f') y #FirstName { color: red }su CSS (mayúscula 'F'), ese navegador defectuoso no hubiera 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 Netscape 6. Considera esto como una nota al pie histórica.

dgvid
fuente
78
Tenga en cuenta que los atributos de clase e id distinguen 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
31
También tenga en cuenta que si intenta escribir una regla CSS para apuntar a un elemento por ID, y la ID tiene un número, no funcionará. ¡Gorrón!
Zack The Human
55
Como para '.' o ':' en una identificación usando jQuery, ver el jQuery FAQ . Contiene una pequeña función que hace el escape necesario.
Wolfram
77
El idatributo es [ w3.org/TR/html4/struct/global.html#adef-idfont>(case sensible en HTML4) y tiene que comenzar con una letra (limitada de A a Z). También tenga en cuenta que su ejemplo no debe hacer que el color del texto de su elemento sea rojo, ya que su CSS se refiere a un elemento con clase, FirstNameno a su id.
Augustus Kling
55
El error que Augustus señaló todavía está presente. En su ejemplo, si tiene id="firstName"HTML 4 o HTML 5 y #FirstName { color: red }CSS, solo un navegador defectuoso establecerá el color del elemento en rojo.
Stephen Booher
221

De la especificación HTML 4 :

Los tokens ID y NAME 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.

Peter Hilton
fuente
20
Tenga en cuenta que HTML5 permite mucho más que HTML4; consulte, por ejemplo, 456bereastreet.com/archive/201011/… y w3.org/TR/html5/elements.html#the-id-attribute
Mr Shark el
IE6 no admite ID que comience con guiones bajos, pero de todos modos está muerto.
doc_id
2
@rahmanisback con respecto a IE6, uno hubiera pensado que sí, pero estoy terminando una propuesta en este momento para un banco e insisten en que cualquier aplicación que desarrolle un proveedor se ejecuta en IE6. Esto es para 30,000 usuarios. Diablos, si pudiéramos hacer que actualicen sus navegadores en todos esos escritorios, podría ayudar a la tasa de desempleo.
Karl
2
@Karl Lamento escuchar esto. Haga todos sus esfuerzos para advertir sobre los problemas de seguridad de IE6. Sin embargo, IE7 pronto será el nuevo IE6, por lo que parece ser nuestro destino en esta industria remediar los errores del pasado de MS.
doc_id
@MrShark El segundo enlace está roto; Nuevo enlace
SWdV
155

Técnicamente, puede usar dos puntos y puntos en los atributos id / name, pero sugeriría encarecidamente evitar ambos.

En CSS (y varias bibliotecas de JavaScript como jQuery), tanto el punto como los dos puntos tienen un significado especial y tendrás problemas si no tienes cuidado. Los períodos son selectores de clase y los dos puntos son pseudo-selectores (por ejemplo, ": desplazarse" para un elemento cuando el mouse está sobre él).

Si le da a un elemento la identificación "my.cool:thing", su selector 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 pseudo-selector 'thing' 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 identificadores sean únicos.

Esa debería ser tu primera preocupación.

Michael Thompson
fuente
21
Puede usar dos puntos y puntos, pero necesitará escapar usando barras diagonales inversas dobles, por ejemplo: $ ('# my \\. Cool \\: thing') o escapar de una variable: $ ('#' + id.replace (/ \ ./, '\\.'). replace (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…
joeformd
2
¿Por qué no los números? ¿Por qué solo AZ? Los números son ID muy útiles cuando se refieren a elementos relacionados con datos que están marcados con un número, siempre que no comience con el número.
cori
44
Solo para tu información, los guiones son técnicamente guiones. El signo menos no está en el juego de caracteres ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
Anton Strogonoff
44
Si tiene estos caracteres ( ., :) en los identificadores y no puede eliminarlos (tos ... Sharepoint), puede solucionar esto en CSS con selectores de atributos en lugar de selectores de identificación, por ejemplo [id='my.cool:thing'], este selector tendrá una especificidad menor que un selector de id, que puede causar otros problemas.
Faust
2
Viejo, lo sé, pero actualizado para incluir números y retroceso en guiones
Michael Thompson
67

jQuery hace manejar cualquier nombre de identificación válida. 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)

Álvaro González
fuente
66

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.

Señor tiburón
fuente
2
O alternativamente: "así que sería mejor evitar jquery". ;)
domsson
59

HTML5:

se deshace de las restricciones adicionales en el atributo id, ver aquí . Los únicos requisitos restantes (además 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 con:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Debe comenzar con los caracteres AZ o az
  2. Puede contener -(guión), _(guión bajo), :(dos puntos) y .(punto)

pero uno debe evitar :y .porque:

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

Zaheer Ahmed
fuente
57

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 caracteres de espacio
  3. debe contener al menos un caracter

Se aplican reglas similares a las clases (a excepción de la singularidad, por supuesto).

Por lo tanto, el valor puede ser todos los dígitos, solo un dígito, solo caracteres de puntuación, incluye 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, 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, los identificadores (incluidos nombres de elementos, clases e ID en selectores) pueden contener solo los caracteres [a-zA-Z0-9] y los caracteres ISO 10646 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 de los personajes en contextos donde tienen restricciones o significado especial.


Referencias W3C

HTML5

3.2.5.1 El id atributo

El idatributo especifica 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, los ID pueden consistir en solo dígitos, comenzar con un dígito, comenzar con un guión bajo, constar solo de 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 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. (Los duplicados se ignoran).

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

Michael Benjamin
fuente
34

En la práctica, muchos sitios utilizan idatributos que comienzan con números, aunque técnicamente no es HTML válido.

La especificación borrador de HTML 5 afloja las reglas para los atributos idy name: ahora son solo cadenas opacas que no pueden contener espacios.

pdc
fuente
32

Los guiones, guiones bajos, puntos, dos puntos, números y letras son válidos para usar 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 se muestra en 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>
blacksun1
fuente
25

HTML5

Teniendo en cuenta que la identificación debe ser única, es decir. no debe haber múltiples elementos en un documento que tengan el mismo valor de identificación.

Las reglas sobre el contenido de ID en HTML5 son (además 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 W3 sobre ID (de 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:

  • W3 - atributos globales (id)
  • MDN atribuido (id)
Sergio
fuente
18

Para hacer referencia a una identificación con un punto, debe usar una barra invertida. No estoy seguro 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;}
Antonio
fuente
3
Los guiones y guiones bajos normalmente no necesitan escapar. Sin embargo, la excepción a esto es si el guión aparece al comienzo del identificador y es seguido por otro guión (por ejemplo \--abc) o un dígito (por ejemplo \-123).
MrWhite
16

De la especificación HTML 4 ...

Los tokens ID y NAME 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: d'oh! Golpeado hasta el botón, otra vez!

Steve Morgan
fuente
16

Además, nunca olvide que una identificación es única. Una vez utilizado, es posible que el valor de ID no vuelva a aparecer en ninguna parte del documento.

Puede tener muchas identificaciones, pero todas deben tener un valor único.

Por otro lado, está el elemento de clase. Al igual que ID, puede aparecer muchas veces, pero el valor puede usarse una y otra vez.

Vordreller
fuente
12

Un identificador único para el elemento.

No debe haber múltiples elementos en un documento que tengan el mismo valor de identificación.

Cualquier cadena, con las siguientes restricciones:

  1. debe tener al menos un carácter de largo
  2. no debe contener caracteres de espacio:

    • U + 0020 ESPACIO
    • TABULACIÓN DE CARACTERES U + 0009 (pestaña)
    • U + 000A ALIMENTACIÓN DE LÍNEA (LF)
    • U + 000C FORM FEED (FF)
    • RETORNO DE TRANSPORTE U + 000D (CR)

El uso de caracteres excepto ASCII letters and digits, '_', '-' and '.'puede causar problemas de compatibilidad, ya que no estaban permitidos HTML 4. Aunque esta restricción se ha levantado HTML 5, una identificación debe comenzar con una carta de compatibilidad.

Bhavin Solanki
fuente
10

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 puede usar valores de identificación que causarán problemas con CSS y JavaScript a menos que sea realmente cuidadoso.

Kanishka Panamaldeniya
fuente
9
  1. 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
  2. ID permite caracteres alfanuméricos y especiales
  3. pero evite el uso de # : . * !símbolos
  4. espacios no permitidos
  5. no comenzó con números o guiones seguidos de un dígito
  6. distingue mayúsculas y minúsculas
  7. usar selectores de ID es más rápido que usar selectores de clase
  8. use 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 reglas de identificación
  9. Si una regla tiene un selector de ID como su selector de clave, no agregue el nombre de la etiqueta a la regla. Como los ID son únicos, agregar un nombre de etiqueta ralentizaría innecesariamente el proceso de coincidencia.
  10. 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>.
Diseñador web cum Promotor
fuente
"subrayado también puede usar pero no es bueno para SEO": ¿Desde cuándo los motores de búsqueda se interesaron en la clase CSS o los nombres de identificación?
Nick Rice
9

Cualquier valor alfanumérico y " - " y " _ " es válido. Pero, debe comenzar el nombre de identificación con cualquier carácter entre AZ o az .

Tazwar Utshas
fuente
6

Sin espacios, debe comenzar con al menos un carácter de a a z y de 0 a 9.

Wembo Mulumba
fuente
4

En HTML

La identificación debe comenzar con {AZ} o {az} , puede agregar dígitos, punto, guión, guión bajo, dos puntos.

Por ejemplo:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

Pero a pesar de que puede hacer ID con dos puntos (:) o punto (.) Es difícil para CSS usar estos ID como Selector. Principalmente cuando quieres usar Pseudo elementos (: before,: after).

También en JS es difícil seleccionar estos ID. Por lo tanto, debe usar los primeros cuatro ID según lo prefieran muchos desarrolladores y, si es necesario, también puede usar los dos últimos.

Dev pokhariya
fuente
4

los valores pueden ser: [az], [AZ], [0-9], [* _: -]

se usa para HTML5 ...

podemos agregar id con cualquier etiqueta.

Jyotirmoy Bhattacharyya
fuente
2

Desde ES2015 también podemos usar -casi- todos los caracteres unicode para los ID, si el conjunto de caracteres del documento está configurado en UTF8.

Prueba aquí: https://mothereff.in/js-variables

ingrese la descripción de la imagen aquí

Lea sobre: https://mathiasbynens.be/notes/javascript-identifiers-es6

En ES2015, los identificadores deben comenzar con $, _ o cualquier símbolo con la propiedad principal derivada de Unicode ID_Start.

El resto del identificador puede contener $, _, U + 200C de ancho cero sin unión, U + 200D de ancho cero, o cualquier símbolo con la propiedad de núcleo derivada de Unicode ID_Continue.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"
div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}
<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">


¿Deberías usarlo? ¡Probablemente no es una buena idea!

Lea sobre: https://stackoverflow.com/a/52799593/2494754

NVRM
fuente
-4

alfabetos-> mayúsculas y
dígitos pequeños- > 0-9 caracteres
especiales-> ':', '-', '_', '.'

el formato debe comenzar desde '.' 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, no se permiten espacios, si se proporcionan, se tratan como valores diferentes, lo que no es válido en el caso de los atributos de id.

Shashank N. Pandey
fuente