HTML ID

Das HTML ID-Attribut wird verwendet, um einem Element eine eindeutige Kennung (Identifier) zuzuweisen. Jede ID in einem HTML-Dokument muss eindeutig sein, das bedeutet, dass kein anderes Element dieselbe ID tragen darf. IDs sind nützlich für die spezifische Identifikation und das gezielte Styling oder die Manipulation eines einzelnen Elements durch CSS und JavaScript.

1. Verwendung des ID-Attributs

Das id-Attribut kann zu jedem HTML-Element hinzugefügt werden. Es wird verwendet, um ein Element eindeutig zu kennzeichnen, damit es mit CSS oder JavaScript angesprochen werden kann.

Beispiel für das ID-Attribut

<h1 id="header">Meine Webseite</h1>
<p id="intro">Dies ist ein Einführungstext.</p>

In diesem Beispiel hat das <h1>-Element die ID header und der Absatz (<p>) die ID intro.

2. IDs in CSS

Mit CSS können Sie ein bestimmtes Element, das eine bestimmte ID hat, stylen. IDs werden in CSS mit einem Hash-Zeichen (#) angesprochen.

Beispiel: Styling einer ID mit CSS

#header {
    color: blue;
    font-size: 24px;
}

#intro {
    color: green;
}

Dieses CSS sorgt dafür, dass der header-Text blau und der intro-Text grün dargestellt wird. Da IDs einzigartig sind, wirken diese Stile nur auf das jeweilige Element.

3. IDs in JavaScript

In JavaScript wird das id-Attribut häufig verwendet, um ein bestimmtes Element im DOM (Document Object Model) zu identifizieren und zu manipulieren.

Beispiel: Zugriff auf ein Element mit einer ID in JavaScript

<h1 id="header">Meine Webseite</h1>
<button onclick="changeText()">Text ändern</button>

<script>
function changeText() {
    document.getElementById('header').innerHTML = "Willkommen!";
}
</script>

In diesem Beispiel wird das <h1>-Element über seine ID header angesprochen, und sein Inhalt wird per JavaScript geändert, wenn der Button geklickt wird.

4. IDs für Anker und Links

Eine weitere wichtige Verwendung von IDs ist das Erstellen von Sprungmarken (Ankern) innerhalb einer Seite. Dies ermöglicht es, innerhalb eines Dokuments an eine bestimmte Stelle zu springen.

Beispiel: Sprungmarke erstellen

<h2 id="section1">Abschnitt 1</h2>
<p>Inhalt von Abschnitt 1.</p>

<a href="#section1">Zum Abschnitt 1 springen</a>

Hier wird durch das Klicken auf den Link der Browser zum Element mit der ID section1 gescrollt.

5. Unterschied zwischen ID und Klasse

ID und Klasse werden oft verwechselt, haben aber unterschiedliche Verwendungszwecke:

• Eine ID wird verwendet, um ein einzigartiges Element zu identifizieren.
• Eine Klasse wird verwendet, um mehrere Elemente zu gruppieren, die gleich behandelt werden sollen.

Beispiel für ID und Klasse:

<p id="unique" class="highlight">Dieser Text hat eine ID und eine Klasse.</p>

• ID: Einzigartig für dieses spezifische Element.
• Klasse: Kann mehreren Elementen zugewiesen werden.

6. Gültige ID-Namen

IDs müssen bestimmten Regeln folgen:

• Sie dürfen keine Leerzeichen enthalten.
• Sie dürfen nicht mit einer Zahl beginnen.
• Sie müssen mit einem Buchstaben beginnen und können Buchstaben, Zahlen, Bindestriche (-) und Unterstriche (_) enthalten.

Beispiel für gültige und ungültige ID-Namen

• Gültig: header, main-section, item_1
• Ungültig: 1header, main section, @item

7. IDs und Priorität in CSS

In CSS haben IDs eine höhere Spezifität als Klassen. Das bedeutet, wenn ein Element sowohl eine ID als auch eine Klasse hat und beide in CSS angesprochen werden, hat die ID-Regel Vorrang.

Beispiel: ID vs. Klasse in CSS

#intro {
    color: red;
}

.highlight {
    color: blue;
}

<p id="intro" class="highlight">Dieser Text wird rot angezeigt, nicht blau.</p>

In diesem Beispiel hat die ID intro Vorrang vor der Klasse highlight, da die Spezifität einer ID höher ist als die einer Klasse.

Häufig gestellte Fragen