Laut der W3C, das ID-Attribut in HTML ist ein eindeutiger Bezeichner für das Element. Es bietet eine Möglichkeit, einen Bereich einer Webseite für CSS-Stile, Ankerlinks und Ziele für Skripte zu identifizieren.
Wofür wird das ID-Attribut verwendet?
Das ID-Attribut führt mehrere Aktionen für Webseiten aus:
- Ein Stylesheet-Selektor: Dies ist die Funktion, für die die meisten Leute das ID-Attribut verwenden. Da sie einzigartig sind, formatieren Sie nur das eine Element auf Ihrer Webseite, wenn Sie eine ID-Eigenschaft verwenden. Der Nachteil bei der Verwendung einer ID für Styling-Zwecke besteht darin, dass sie ein sehr hohes Maß an Spezifität hat. Dies kann eine große Herausforderung darstellen, wenn Sie einen Stil später aus irgendeinem Grund überschreiben müssen Stylesheet. Aus diesem Grund neigen aktuelle Web-Praktiken dazu, Klassen und Klassenselektoren anstelle von IDs und ID-Selektoren für allgemeine Gestaltungszwecke zu verwenden.
- Benannte Anker zum Verlinken mit: Internetbrowser zielen Sie auf genaue Stellen in Ihren Webdokumenten, indem Sie auf die ID am Ende der URL verweisen. Fügen Sie die ID am Ende der Seiten-URL ein, der ein Raute vorangestellt ist. Verknüpfen Sie diese Anker mit der Seite selbst, indem Sie das Hash-Tag und den ID-Namen in das href Attribut für das Element. Zum Beispiel für eine Abteilung mit einer ID von Kontakt, verlinke auf dieser Seite mit #Kontakt.
- Eine Referenz für Skripte: Wenn Sie Javascript-Funktionen schreiben, verwenden Sie das ID-Attribut, damit Sie mit Ihren Skripten genau das Element auf der Seite ändern können.
- Sonstige Verarbeitung: Die ID unterstützt die Verarbeitung innerhalb Ihrer Webdokumente auf jede gewünschte Weise. Sie können beispielsweise den HTML-Code in eine Datenbank extrahieren und das ID-Attribut verwenden, um Felder zu identifizieren.
Regeln für die Verwendung des ID-Attributs
Stellen Sie sicher, dass Ihre ID-Attribute diesen drei Standards entsprechen:
- Die ID muss mit einem Buchstaben beginnen (a-z oder A-Z).
- Alle nachfolgenden Zeichen können Buchstaben, Zahlen (0-9), Bindestriche (-), Unterstriche (_), Doppelpunkte (:) und Punkte (.) sein.
- Jede ID muss innerhalb des Dokuments eindeutig sein.
Verwenden des ID-Attributs
Nachdem Sie ein eindeutiges Element Ihrer Website identifiziert haben, verwenden Sie Stylesheets um nur dieses eine Element zu stylen.
Zum Beispiel, um eine ID mit dem Titel. zu identifizieren Kontakt, verwenden Sie eines dieser Formulare:
div#kontakt { Hintergrund: #0cf;}
#kontakt { Hintergrund: #0cf;}
Das erste Beispiel zielt auf eine Division mit einem ID-Attribut von ab Kontakt. Der zweite zielt immer noch auf das Element mit einer ID von Kontakt, es würde einfach nicht vorschreiben, dass es sich um eine Division handelt. Das Endergebnis des Stylings wäre genau das gleiche.
Sie können auch auf dieses bestimmte Element verlinken, ohne Tags hinzuzufügen.
Verweisen Sie in Ihren Skripten auf diesen Absatz mit dem getElementById JavaScript-Methode:
document.getElementById("Kontaktbereich")
ID-Attribute sind in HTML immer noch sehr nützlich, obwohl Klassenselektoren haben sie für die meisten allgemeinen Styling-Zwecke ersetzt. Durch die Verwendung des ID-Attributs als Hook für Styles, aber auch als Anker für Links oder Ziel für Skripte haben sie auch heute noch einen wichtigen Platz im Webdesign.