Mithilfe von HTML <script> kenn­zeich­nen Sie in Ihren HTML-Do­ku­men­ten den Einsatz von Skripten. Neben der direkten Ein­bin­dung von Ja­va­Script-Code ist auch die Referenz auf externe Skripte möglich. Zudem gibt es ver­schie­de­ne optionale Attribute wie async oder defer, die den Umgang mit den ver­wen­de­ten Skripten regeln.

Was ist HTML <script> und wofür verwendet man es?

Das HTML-Tag <script> dient dem Zweck, cli­ent­sei­ti­ge Skripte in Webseiten bzw. HTML-Dokumente ein­zu­bin­den. Innerhalb des ein­lei­ten­den und schlie­ßen­den <script>-Tags können Sie wahlweise direkte Skrip­t­an­wei­sun­gen geben oder mithilfe des src-Attributs auf eine externe Skript­da­tei verweisen. Seit HTML5 ist Ja­va­Script als mögliche Skript­spra­che für das Element fest­ge­legt – in älteren HTML-Versionen war eine zu­sätz­li­che Angabe der Skript­spra­che er­for­der­lich.

Typische Ver­wen­dungs­zwe­cke für HTML <script> bzw. für Ja­va­Script im All­ge­mei­nen sind die Va­li­die­rung von For­mu­lar­ein­ga­ben, die Bild­ma­ni­pu­la­ti­on und dy­na­mi­sche Än­de­run­gen der Website-Inhalte.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

HTML-<script>-Tag: Syntax inklusive Code-Beispiel

Die Syntax von <script>-Elementen ist relativ un­kom­pli­ziert: Ein ein­lei­ten­des <script>-Tag markiert den Start, ein schlie­ßen­des </script>-Tag das Ende des Skripts. Das Syntax-Grund­ge­rüst sieht folglich so aus:

<script>JavaScript-Code bzw. Verweis auf externes Skript</script>
html

Wenn Sie den Ja­va­Script-Code direkt in das Element schreiben, benötigen Sie keine weiteren Parameter. Bei einer Referenz auf ein externes Skript benötigen Sie zu­sätz­lich das HTML-Attribut src (für engl. source „Quelle“). Die er­wei­ter­te Syntax für HTML <script> hat dann folgende Form:

<script src="skript.js"></script>
html

Beispiel für die direkte Ein­bin­dung von Ja­va­Script

Wir ver­deut­li­chen die Syntax und Funk­ti­ons­wei­se der direkten Ja­va­Script-Ein­bin­dung per HTML-<script>-Tag an einem einfachen Beispiel. Innerhalb des <body>-Bereichs plat­zie­ren wir zu diesem Zweck einen Button mit der <button id> „mein­But­ton“. Direkt im Anschluss wird der Ja­va­Script-Code ein­ge­bun­den, der dafür sorgt, dass eine Hinweis-Box mit der Nachricht „Button wurde an­ge­klickt!“ angezeigt wird, sobald ein User auf die Schalt­flä­che drückt:

<body>
    <h1>JavaScript Beispiel-Button: Direkte Einbindung</h1>
    <button id="meinButton">Klick mich!</button>
    <script>
        document.getElementById('meinButton').addEventListener('click', function() {
            alert('Button wurde angeklickt!');
        });
    </script>
</body>
html
Tipp

Es ist emp­feh­lens­wert, einen Al­ter­na­tiv­text ein­zu­bin­den, der anstelle des Skripts prä­sen­tiert wird, wenn dieses nicht aus­ge­führt werden kann – zum Beispiel, weil ein User Ja­va­Script de­ak­ti­viert hat. Hierfür können Sie ganz einfach das Element <noscript> (ein­lei­ten­des und schlie­ßen­des Tag) verwenden.

Beispiel für die Ein­bin­dung eines externen Skripts

Wir über­tra­gen das Beispiel auf die al­ter­na­ti­ve Mög­lich­keit, das Ja­va­Script-Codes als externes Skript ein­zu­bin­den. Den Code für den an­klick­ba­ren Button, der nach einem Klick die Nachricht „Button wurde an­ge­klickt!“ ausspielt, speichern wir zu diesem Zweck im ersten Schritt in einer neuen Datei mit dem bei­spiel­haf­ten Namen script.js:

// script.js
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('meinButton').addEventListener('click', function() {
        alert('Button wurde angeklickt!');
    });
});
ja­va­script

Im zweiten Schritt binden wir das Skript in ein HTML-Dokument ein, das sich im gleichen Ver­zeich­nis wie das Skript befindet:

<body>
    <h1>JavaScript Beispiel-Button: Einbindung via Verweis</h1>
    <button id="meinButton">Klick mich!</button>
    <script src="script.js"></script>
</body>
</html>
html
Tipp

In einem separaten Artikel gehen wir genauer darauf ein, wie Sie Ja­va­Script in HTML einbinden.

Welche Attribute für HTML <script> gibt es?

Das HTML-<script>-Tag lässt sich mit einer Reihe von At­tri­bu­ten kom­bi­nie­ren. Zu den wich­tigs­ten zählen die folgenden:

  • async: Mit diesem Attribut sorgen Sie dafür, dass ein externes Skript parallel zur In­ter­pre­ta­ti­on des Seiten-Codes her­un­ter­ge­la­den und aus­ge­führt wird, sobald es verfügbar ist (auch wenn die Seite noch nicht voll­stän­dig geladen ist).
  • crossorigin: Wenn Sie den Request-Modus für das Skript auf HTTP-CORS-Requests setzen möchten, verwenden Sie das Attribut crossorigin.
  • defer: Ist das defer-Attribut gesetzt, wird ein externes Skript ebenfalls parallel zur In­ter­pre­ta­ti­on des Seiten-Codes her­un­ter­ge­la­den. Es wird al­ler­dings erst aus­ge­führt, sobald die Seite voll­stän­dig in­ter­pre­tiert wurde.
  • integrity: Um die Si­cher­heit zu erhöhen, können Sie HTML <script> um das Attribut integrity erweitern. Es sorgt dafür, dass Browser das ab­ge­ru­fe­ne Skript über­prü­fen können. So wird si­cher­ge­stellt, dass der Code niemals geladen wird, wenn der Quellcode ma­ni­pu­liert wurde.
  • nomodule: Mit nomodule sorgen Sie dafür, dass Ihre Skripte nicht in Browsern aus­ge­führt werden, die ES2015-Module un­ter­stüt­zen.
  • referrerpolicy: Wollen Sie angeben, welche Referrer-In­for­ma­tio­nen beim Abrufen eines Skripts gesendet werden sollen, nutzen Sie das Attribut referrerpolicy. Mögliche Werte sind unter anderem no-referrer (keine Ver­weis­sei­te) und strict-origin (Refferer immer Ursprungs-Domain).
  • src: Das src-Attribut spe­zi­fi­ziert die URL eines externen Skripts.
  • type: Mit diesem (mitt­ler­wei­le op­tio­na­len) Attribut können Sie angeben, welchen Inhalt das HTML-<script>-Element enthält. Neben dem klas­si­schen Skript sind zum Beispiel auch EC­MA­Script-Module (module) und Import Maps (importmap) mit Regeln für EC­MA­Script-Modul-Importe möglich.
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü