HTML id-Attribut
Das HTML-Attribut id wird verwendet, um eine eindeutige ID für ein HTML-Element anzugeben.
Sie können nicht mehr als ein Element mit derselben ID in einem HTML-Dokument haben.
Verwendung des id-Attributs
Das Attribut id gibt eine eindeutige ID für ein HTML-Element an. Der Wert des Attributs id muss innerhalb des HTML-Dokuments eindeutig sein.
Das Attribut id wird verwendet, um auf eine bestimmte Stildeklaration in einem Stylesheet zu verweisen. Es wird auch von JavaScript verwendet, um auf das Element mit der spezifischen ID zuzugreifen und es zu bearbeiten.
Die Syntax für die ID lautet: Schreiben Sie ein Hash-Zeichen (#), gefolgt von einem ID-Namen. Definieren Sie dann die CSS-Eigenschaften in geschweiften Klammern {}.
Im folgenden Beispiel haben wir ein <h1>-Element, das auf den ID-Namen „myHeader“ verweist. Dieses <h1>-Element wird gemäß der Stildefinition #myHeader im Kopfabschnitt gestaltet:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Try it Yourself »
Hinweis: Beim ID-Namen muss die Groß-/Kleinschreibung beachtet werden!
Hinweis: Der ID-Name muss mindestens ein Zeichen enthalten, darf nicht mit einer Zahl beginnen und darf keine Leerzeichen (Leerzeichen, Tabulatoren usw.) enthalten.
Unterschied zwischen Klasse und ID
Ein Klassenname kann von mehreren HTML-Elementen verwendet werden, während ein ID-Name nur von einem HTML-Element innerhalb der Seite verwendet werden darf:
Beispiel
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Try it Yourself »
Tipp: Viel mehr über CSS erfahren Sie in unserem CSS-Tutorial.
HTML-Lesezeichen mit ID und Links
HTML-Lesezeichen werden verwendet, um Lesern den Sprung zu bestimmten Teilen einer Webseite zu ermöglichen.
Lesezeichen können nützlich sein, wenn Ihre Seite sehr lang ist.
Um ein Lesezeichen zu verwenden, müssen Sie es zuerst erstellen und dann einen Link dazu hinzufügen.
Wenn Sie dann auf den Link klicken, scrollt die Seite zur Position mit dem Lesezeichen.
Beispiel
Erstellen Sie zunächst ein Lesezeichen mit dem Attribut id:
<h2 id="C4">Chapter 4</h2>
Fügen Sie dann auf derselben Seite einen Link zum Lesezeichen hinzu („Zu Kapitel 4 springen“):
Oder fügen Sie von einer anderen Seite einen Link zum Lesezeichen hinzu („Springe zu Kapitel 4“):
<a href="html_demo.html#C4">Zu Kapitel 4 springen</a>
Verwendung des id-Attributs in JavaScript
Das Attribut id kann auch von JavaScript verwendet werden, um einige Aufgaben für dieses bestimmte Element auszuführen.
JavaScript kann mit der Methode getElementById() auf ein Element mit einer bestimmten ID zugreifen:
Beispiel
Verwenden Sie das Attribut id, um Text mit JavaScript zu bearbeiten:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Try it Yourself »
Tipp: Lernen Sie JavaScript im Kapitel HTML-JavaScript oder in unserem JavaScript-Tutorial.
Kapitelzusammenfassung
- Das Attribut
idwird verwendet, um eine eindeutige ID für ein HTML-Element anzugeben - Der Wert des Attributs
idmuss innerhalb des HTML-Dokuments eindeutig sein - Das Attribut
idwird von CSS und JavaScript verwendet, um ein bestimmtes Element zu formatieren/auszuwählen - Beim Wert des Attributs
idwird die Groß-/Kleinschreibung beachtet - Das Attribut
idwird auch zum Erstellen von HTML-Lesezeichen verwendet - JavaScript kann mit der Methode
getElementById()auf ein Element mit einer bestimmten ID zugreifen
HTML Übungen
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie unter HTML-Tag-Referenz auf unserer Website W3SchoolsDE. DasBeste.
HTML — Id - W3Schools-Video
In diesem Video wird das id-Attribut in HTML und seine Verwendung in HTML, CSS und JavaScript erklärt.
Teil einer Reihe von Video-Tutorials zum Erlernen von HTML für Anfänger!
