Das HTML-script-Tag im Überblick

Mithilfe von HTML <script> kennzeichnen Sie in Ihren HTML-Dokumenten den Einsatz von Skripten. Neben der direkten Einbindung von JavaScript-Code ist auch die Referenz auf externe Skripte möglich. Zudem gibt es verschiedene optionale Attribute wie async oder defer, die den Umgang mit den verwendeten Skripten regeln.

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

Das HTML-Tag <script> dient dem Zweck, clientseitige Skripte in Webseiten bzw. HTML-Dokumente einzubinden. Innerhalb des einleitenden und schließenden <script>-Tags können Sie wahlweise direkte Skriptanweisungen geben oder mithilfe des src-Attributs auf eine externe Skriptdatei verweisen. Seit HTML5 ist JavaScript als mögliche Skriptsprache für das Element festgelegt – in älteren HTML-Versionen war eine zusätzliche Angabe der Skriptsprache erforderlich.

Typische Verwendungszwecke für HTML <script> bzw. für JavaScript im Allgemeinen sind die Validierung von Formulareingaben, die Bildmanipulation und dynamische Änderungen der Website-Inhalte.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

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

Die Syntax von <script>-Elementen ist relativ unkompliziert: Ein einleitendes <script>-Tag markiert den Start, ein schließendes </script>-Tag das Ende des Skripts. Das Syntax-Grundgerüst sieht folglich so aus:

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

Wenn Sie den JavaScript-Code direkt in das Element schreiben, benötigen Sie keine weiteren Parameter. Bei einer Referenz auf ein externes Skript benötigen Sie zusätzlich das HTML-Attribut src (für engl. source „Quelle“). Die erweiterte Syntax für HTML <script> hat dann folgende Form:

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

Beispiel für die direkte Einbindung von JavaScript

Wir verdeutlichen die Syntax und Funktionsweise der direkten JavaScript-Einbindung per HTML-<script>-Tag an einem einfachen Beispiel. Innerhalb des <body>-Bereichs platzieren wir zu diesem Zweck einen Button mit der <button id> „meinButton“. Direkt im Anschluss wird der JavaScript-Code eingebunden, der dafür sorgt, dass eine Hinweis-Box mit der Nachricht „Button wurde angeklickt!“ angezeigt wird, sobald ein User auf die Schaltflä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 empfehlenswert, einen Alternativtext einzubinden, der anstelle des Skripts präsentiert wird, wenn dieses nicht ausgeführt werden kann – zum Beispiel, weil ein User JavaScript deaktiviert hat. Hierfür können Sie ganz einfach das Element <noscript> (einleitendes und schließendes Tag) verwenden.

Beispiel für die Einbindung eines externen Skripts

Wir übertragen das Beispiel auf die alternative Möglichkeit, das JavaScript-Codes als externes Skript einzubinden. Den Code für den anklickbaren Button, der nach einem Klick die Nachricht „Button wurde angeklickt!“ ausspielt, speichern wir zu diesem Zweck im ersten Schritt in einer neuen Datei mit dem beispielhaften Namen script.js:

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

Im zweiten Schritt binden wir das Skript in ein HTML-Dokument ein, das sich im gleichen Verzeichnis 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 JavaScript in HTML einbinden.

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

Das HTML-<script>-Tag lässt sich mit einer Reihe von Attributen kombinieren. Zu den wichtigsten zählen die folgenden:

  • async: Mit diesem Attribut sorgen Sie dafür, dass ein externes Skript parallel zur Interpretation des Seiten-Codes heruntergeladen und ausgeführt wird, sobald es verfügbar ist (auch wenn die Seite noch nicht vollständig 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 Interpretation des Seiten-Codes heruntergeladen. Es wird allerdings erst ausgeführt, sobald die Seite vollständig interpretiert wurde.
  • integrity: Um die Sicherheit zu erhöhen, können Sie HTML <script> um das Attribut integrity erweitern. Es sorgt dafür, dass Browser das abgerufene Skript überprüfen können. So wird sichergestellt, dass der Code niemals geladen wird, wenn der Quellcode manipuliert wurde.
  • nomodule: Mit nomodule sorgen Sie dafür, dass Ihre Skripte nicht in Browsern ausgeführt werden, die ES2015-Module unterstützen.
  • referrerpolicy: Wollen Sie angeben, welche Referrer-Informationen beim Abrufen eines Skripts gesendet werden sollen, nutzen Sie das Attribut referrerpolicy. Mögliche Werte sind unter anderem no-referrer (keine Verweisseite) und strict-origin (Refferer immer Ursprungs-Domain).
  • src: Das src-Attribut spezifiziert die URL eines externen Skripts.
  • type: Mit diesem (mittlerweile optionalen) Attribut können Sie angeben, welchen Inhalt das HTML-<script>-Element enthält. Neben dem klassischen Skript sind zum Beispiel auch ECMAScript-Module (module) und Import Maps (importmap) mit Regeln für ECMAScript-Modul-Importe möglich.
Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?