Verwendung des id-Attributs in HTML

Mit dem id-Attribut kannst du einem HTML-Element eine eindeutige Kennung zuweisen. Es ist wichtig für CSS-Styling, JavaScript-Manipulation oder die Seitennavigation.

Was ist das id-Attribut?

Die id ist eine eindeutige Kennung, die einem Element zugewiesen wird. Eine id darf nur einmal pro Seite vorkommen. Sie besteht in der Regel aus einem kurzen, beschreibenden Namen.

<h2 id="section1">Introduction</h2>

Wichtigkeit der Eindeutigkeit

Das id-Attribut darf nur einmal im Dokument verwendet werden. Das unterscheidet es vom class-Attribut, das mehrfach verwendet werden kann. Haben zwei Elemente dieselbe id, kann das zu Fehlern in CSS oder JavaScript führen.

id in CSS verwenden

In CSS wird die id mit einem #-Symbol geschrieben. So kannst du gezielt Stile auf ein bestimmtes Element anwenden, etwa Farben, Größen oder Layouts.

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

<h1 id="main-title">Welcome to the site</h1>

id in JavaScript verwenden

In JavaScript kannst du mit der Methode getElementById auf ein Element zugreifen. Dadurch kannst du Inhalte oder Stile dynamisch verändern.

document.getElementById("main-title").innerText = "Hello!";

id für In-Page-Navigation

Wenn ein Link auf eine id verweist, scrollt der Browser automatisch zum entsprechenden Element. Das ist nützlich bei langen Seiten wie FAQs oder Inhaltsverzeichnissen.

<a href="#contact">Go to contact section</a>

...

<h2 id="contact">Contact Us</h2>

Namensregeln für id

Vermeide Leerzeichen und Sonderzeichen bei id-Namen. Verwende Kleinbuchstaben, Bindestriche oder camelCase, z. B. main-title oder contactSection.