Was sind gültige Werte für das id-Attribut in HTML?
Das id-Attribut ist eine eindeutige Kennung, die verwendet wird, um ein Dokument zu spezifizieren. Das id-Attribut wird mit #(Hash)-Symbol gefolgt von id verwendet. Der Wert muss unter allen IDs im Stammbaum des Elements eindeutig sein.
Syntax:
<tag id = #Values>
Zulässige Werte für ID-Attribut:
Ab HTML5 muss id diese drei Bedingungen erfüllen:
- Muss im Dokument eindeutig sein.
- Darf keine Leerzeichen enthalten.
- Muss mindestens ein Zeichen enthalten.
Der Wert kann also alle Ziffern sein, nur eine Ziffer, Sonderzeichen enthalten usw. Nur keine Leerzeichen.
In HTML 5 sind diese Werte von IDs gültig:
<tag id = "#999" > .... </tag >
<tag id = "#%LV-||" > .... </tag >
<tag id = " ____V" > .... </tag >
<tag id = "{}" > .... </tag >
<tag id = " ©" > .... </tag >
Hinweis: Die Verwendung von Zahlen oder Sonderzeichen im Wert einer ID kann in anderen Kontexten (CSS, JavaScript) zu Problemen führen.
Beispiel:
<tag id = ".\1gfg" > .... <\tag >
Diese ID ist in HTML 5 gültig, aber in CSS dürfen Javascript- Bezeichner (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen [a-zA-Z0-9] enthalten.
Jetzt sehen wir Beispiele für gültige und ungültige ID-Werte in HTML und CSS .
Beispiel 1: Der Wert von id ist 1gfg und 1geeks , die in HTML 5 , aber nicht in CSS gültig sind . Wir erhalten also nur eine einfache Ausgabe anstelle einer formatierten Ausgabe, da der Wert von ID in CSS ungültig ist .
<!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>
Ausgabe:
Beispiel 2: Jetzt ändern wir den Wert der IDs, aber der Code bleibt derselbe wie zuvor. Der Wert von id ist gfg und geeks , die sowohl in HTML 5 als auch in CSS gültig sind . Diesmal erhalten wir also eine formatierte Ausgabe, da der Wert von ID in CSS gültig ist .
<!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>
Ausgabe:
Wir haben gerade ein Beispiel für gültige ID-Werte in HTML und CSS gesehen .
Jetzt sehen wir ein weiteres Beispiel für gültige und ungültige ID-Werte in HTML und Javascript .
Beispiel 3: Wir nehmen den ID-Wert .\1gfg , der in HTML 5 gültig, aber in Javascript ungültig ist . Nach dem Klicken auf die Schaltfläche "Text ändern" wird also nichts passieren, da der Wert der ID für Javascript ungültig ist .
<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>
Ausgabe:
Jetzt sehen wir ein weiteres Beispiel, in dem wir den Wert der ID von .\1gfg in gfg ändern und die Schaltfläche „Ändern“ funktioniert . Hallo Geeks! wird durch GeeksForGeeks mit grüner Farbe ersetzt, da der ID-Wert für JavaScript gültig ist .
Beispiel 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>
Ausgabe: