# HTML ID Das `id`-Attribut in [HTML](https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-html/) dient dazu, spezifische Elemente in einem HTML-Dokument **eindeutig identifizieren** zu können. So lassen sich diese in [CSS](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-css/) oder in JavaScript ansprechen und manipulieren. ## Was ist die HTML ID? Die HTML ID ist ein **[HTML-Attribut](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-attribute/), das zur eindeutigen Identifizierung eines [HTML-Elements](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-element/)** verwendet wird. Eine ID muss im gesamten HTML-Dokument einzigartig sein; ein HTML-Dokument, bei dem zwei Elemente eine ID teilen, ist syntaktisch nicht korrekt. Das `id`-Attribut wird häufig in Kombination mit CSS oder JavaScript verwendet, um spezifische Stile anzuwenden oder bestimmte Aktionen auf einem bestimmten Element auszuführen. Hinweis Wenn Sie HTML noch erlernen möchten, kann Ihnen unser [HTML-Einsteiger-Tutorial](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-lernen-das-grosse-einsteiger-tutorial/) dabei helfen. ## Wofür benötigt man eine HTML ID? Die HTML ID kann ausgesprochen nützlich sein. Sie kommt immer dann zum Einsatz, wenn sich **eine Aktion nur auf ein einziges Element beziehen soll**. Wichtige Fälle für die Verwendung des `id`-Attributs sind zum Beispiel: - **Styling der Website mit CSS:** Mit einer ID können Sie CSS-Regeln auf ein einzelnes HTML-Element anwenden. Dies ist besonders nützlich, wenn Sie ein bestimmtes Element hervorheben möchten. - **Interaktion mit JavaScript:** In JavaScript können IDs verwendet werden, um auf bestimmte HTML-Elemente zuzugreifen und deren Eigenschaften oder Inhalte zu ändern. Dies ist ein grundlegender Bestandteil der dynamischen Webentwicklung. - **Hyperlinks und Anker:** IDs können dazu genutzt werden, Ankerpunkte innerhalb einer Seite zu erstellen. Diese ermöglichen es, direkt zu einem bestimmten Abschnitt der Seite zu springen, wenn ein Link mit der entsprechenden ID angeklickt wird. Tipp Mithilfe des `id`-Attributs kann **egal welchem** HTML-Element eine ID zugewiesen werden. ## Syntax der HTML ID Um eine ID in HTML zu definieren, müssen sie dem entsprechenden Element **das `id`-Attribut hinzufügen und den gewünschten ID-Namen** spezifizieren. Betrachten Sie hierzu folgendes Codebeispiel: ```HTML

Diesem Paragraphen ist die ID „Testid“ zugewiesen.

``` Durch das `id`-Attribut wurde dem [HTML-Paragraph](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-absatz/) die ID „Testid“ zugewiesen. Der Nutzen von HTML IDs kann in einem etwas ausführlicheren Beispiel verdeutlicht werden: ```HTML

Ein HTML ID-Beispiel

Der Header ist ein Beispiel für die Verwendung einer HTML ID.

``` Der [HTML-Überschrift](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-ueberschriften/) wird die ID „header“ zugewiesen. Da [CSS in den HTML-Code eingebunden wurde](https://www.ionos.de/digitalguide/websites/webdesign/css-in-html-einbinden/), werden die entsprechenden CSS-Regeln für die „header“-ID auf die Überschrift angewendet. ## HTML ID vs. Class – die Unterschiede Sowohl das `id`-Attribut als auch das `class`-Attribut werden zur Identifizierung und zum Styling von HTML-Elementen verwendet, aber sie haben unterschiedliche Eigenschaften und Anwendungsbereiche. - **Einzigartigkeit:** Eine ID muss innerhalb des Dokuments einzigartig sein, wohingegen eine [HTML-Klasse](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-classes/) auf mehrere Elemente angewendet werden kann, sodass eine Gruppe von Elementen gleichzeitig manipuliert werden kann. - **Spezifität:** IDs haben eine höhere Spezifität als Klassen. Die HTML ID hat Vorrang, wenn sowohl sie als auch eine Klasse auf dasselbe HTML-Element angewendet werden. Bei der Definition widersprüchlicher Stile kann die Klasse auf diese Weise von der ID überschrieben werden. - **Referenzierung in CSS:** Um IDs in CSS anzusprechen, muss der voranstehende Hashtag (#) genutzt werden. Um Klassen zu referenzieren, benötigen Sie den voranstehenden Punkt (.). This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/html-id/](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-id/) for AI/LLM consumption.