El atributo id es un identificador único que se utiliza para especificar un documento. El atributo id se usa usando el #símbolo (hash) seguido de id. El valor debe ser único entre todos los ID en el subárbol de inicio del elemento.
Sintaxis:
<tag id = #Values>
Valores permitidos para el atributo ID:
a partir de HTML5, el ID debe cumplir estas tres condiciones:
- Debe ser único en el documento.
- No debe contener caracteres de espacio.
- Debe contener al menos un carácter.
Entonces, el valor puede ser todos los dígitos, solo un dígito, incluir caracteres especiales, etc. Simplemente sin espacios en blanco.
En HTML 5, estos valores de id son válidos:
<tag id = "#999" > .... </tag >
<tag id = "#%LV-||" > .... </tag >
<tag id = " ____V" > .... </tag >
<tag id = "{}" > .... </tag >
<tag id = " ©" > .... </tag >
Nota: El uso de números o caracteres especiales en el valor de una identificación puede causar problemas en otros contextos (CSS, JavaScript).
Ejemplo:
<tag id = ".\1gfg" > .... <\tag >
Este ID es válido en HTML 5, pero en CSS, los identificadores de JavaScript (incluidos los nombres de los elementos, las clases y los ID en los selectores) solo pueden contener los caracteres [a-zA-Z0-9].
Ahora veremos ejemplos de valores de ID válidos e inválidos en HTML y CSS .
Ejemplo 1: el valor de id es 1gfg y 1geeks , que son válidos en HTML 5 pero no en CSS . Entonces, solo obtenemos una salida simple en lugar de una salida con estilo porque el valor de ID no es válido en CSS .
<!DOCTYPE html>
<html>
<head>
<title>Id Attributes</title>
<style>
#1gfg {
color: #009900;
font-size: 50px;
font-weight: bold;
text-align: center;
}
#1geeks {
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="1gfg">GeeksforGeeks</div>
<div id="1geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
Ejemplo 2: ahora cambiaremos el valor de los ID, pero el código seguirá siendo el mismo que antes. El valor de id es gfg y geeks , que son válidos en HTML 5 y en CSS . Así que esta vez obtendremos una salida con estilo, porque el valor de ID es válido en CSS .
<!DOCTYPE html>
<html>
<head>
<title>Id Attributes</title>
<style>
#gfg {
color: #009900;
font-size: 50px;
font-weight: bold;
text-align: center;
}
#geeks {
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="gfg">GeeksforGeeks</div>
<div id="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
Acabamos de ver un ejemplo de valores de ID válidos en HTML y CSS .
Ahora vemos otro ejemplo de valores de ID válidos e inválidos en HTML y javaScript .
Ejemplo 3: Tomaremos el valor de ID .\1gfg que es válido en HTML 5 pero no válido en javaScript . Entonces, después de hacer clic en el botón Cambiar texto, no sucederá nada porque el valor de ID no es válido para javaScript .
<html>
<body>
<h1 id=".\1gfg">Hello Geeks!</h1>
<button onclick="displayResult()">
Change text
</button>
<style>
#.\1gfg {
color: green;
}
</style>
<script>
function displayResult() {
document.getElementById(
".\1gfg").innerHTML = "GeeksForGeeks!";
}
</script>
</body>
</html>
Producción:
Ahora veremos otro ejemplo en el que cambiaremos el valor de ID de .\1gfg a gfg y el botón de cambio funcionará ¡Hola Geeks! se reemplazará por GeeksForGeeks con color verde, porque el valor de ID es válido para JavaScript .
Ejemplo 4:
<html>
<body>
<h1 id="gfg">Hello Geeks!</h1>
<button onclick="displayResult()">
Change text
</button>
<style>
#gfg {
color: green;
}
</style>
<script>
function displayResult() {
document.getElementById(
"gfg").innerHTML = "GeeksForGeeks!";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por light_yagami07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA