Articles
Einführung in HTML
Tags, die im Kopfbereich verwendet werden

Tags, die im Kopfbereich verwendet werden

Dieser Artikel erklärt die Tags, die im Kopfbereich verwendet werden.

Es erklärt die im Kopfbereich verwendeten Tags, wie <link>, <script>, <style>.

YouTube Video

Tags, die im Kopfbereich verwendet werden

<title>-Tag 

1<title>Document Title</title>
  • Der <title>-Tag definiert den Titel des Dokuments. Dieser Titel wird im Tab des Browsers angezeigt und wird in Lesezeichen und Suchergebnissen verwendet.

<link>-Tag

  • Der <link>-Tag wird verwendet, um externe Ressourcen mit dem aktuellen Dokument zu verknüpfen. Er wird häufig verwendet, um externe CSS-Dateien zu verknüpfen, kann aber auch für Symbole und andere externe Ressourcen verwendet werden.

Das rel-Attribut des <link>-Tags

Das rel-Attribut wird verwendet, um die Beziehung zwischen der verknüpften Ressource und dem aktuellen Dokument im <link>-Tag anzugeben. Es gibt viele Arten von Werten für das rel-Attribut, aber hier werden wir die besonders wichtigen und häufig verwendeten erklären.

stylesheet 
1<link rel="stylesheet" href="styles.css">
  • stylesheet wird verwendet, um ein externes Stylesheet zu verknüpfen.

icon 

1<link rel="icon" href="favicon.ico" type="image/x-icon">
  • rel="icon" definiert das Symbol, das im Tab oder Lesezeichen des Browsers angezeigt wird. Durch die Angabe des richtigen Favicons werden das Branding der Website und die visuelle Erkennung verbessert.

preload 

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  • preload wird verwendet, um Ressourcen im Voraus zu laden, bevor das Seitenrendering beginnt. Es ist besonders nützlich für Ressourcen, bei denen das Timing wichtig ist, wie zum Beispiel Schriftarten oder große Bilder. Dies verbessert die Leistung und verbessert die Benutzererfahrung.

canonical 

1<link rel="canonical" href="https://example.com/page.html">
  • canonical wird verwendet, um Suchmaschinen über die kanonische Version einer Seite zu informieren. Im Falle von doppeltem Inhalt hilft die Angabe der kanonischen URL, das Suchmaschinenrankings aus SEO-Perspektive zu konsolidieren und sicherzustellen, dass der Inhalt korrekt indexiert wird.

alternate 

1<link rel="alternate" hreflang="en" href="https://example.com/en/">
  • alternate wird verwendet, um Suchmaschinen und Browsern Seiten in verschiedenen Sprachen oder Formaten anzuzeigen. In mehrsprachigen Websites können Sie die URL für jede Sprachversion in Kombination mit dem hreflang-Attribut angeben, um Benutzern Seiten in der entsprechenden Sprache bereitzustellen.

manifest 

1<link rel="manifest" href="/manifest.json">
  • Das manifest stellt dem Browser eine Manifestdatei zur Verfügung, die Konfigurationsinformationen für eine PWA (Progressive Web App) enthält. Diese Datei enthält Informationen wie das App-Symbol, die Themenfarbe und den Anzeigemodus, die beim Installieren und Ausführen der PWA auf mobilen Geräten helfen.

dns-prefetch 

1<link rel="dns-prefetch" href="//example.com">
  • Wenn auf externe Ressourcen verwiesen wird, kann die vorherige DNS-Auflösung der Domain die Ladegeschwindigkeit der Seite verbessern. Dies ist besonders effektiv für Seiten mit vielen externen Ressourcen oder wenn ein schnelles Benutzererlebnis gewünscht wird.

<style>-Tag 

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>
  • Das <style>-Tag wird verwendet, um interne Stylesheets zu definieren. Es wird verwendet, um CSS-Stile auf Elemente der Seite anzuwenden, sodass Sie CSS schreiben können, ohne externe Dateien zu verwenden.

<script>-Tag 

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>
  • Das <script>-Tag wird verwendet, um JavaScript-Code in ein HTML-Dokument einzubetten. Sie können auch externe JavaScript-Dateien verknüpfen, um das dynamische Verhalten der Seite zu steuern. Verwenden Sie das src-Attribut, um die Skriptdatei anzugeben.

Die async und defer Attribute

Das <script>-Tag unterstützt zwei Attribute, async und defer, die den Zeitpunkt des Ladevorgangs und der Ausführung von Skripten beeinflussen. Normalerweise werden Skripte vom Browser sequentiell verarbeitet, aber die Verwendung dieser Attribute kann die Leistung und das Ladeerlebnis der Seite verbessern.

Das async-Attribut 
1<script src="script.js" async></script>
  • Die Verwendung des async-Attributs ermöglicht es, das Skript asynchron zu laden. Der Browser lädt das Skript parallel zu anderen Ressourcen und führt es sofort nach Abschluss des Ladevorgangs aus.
  • async eignet sich hauptsächlich für eigenständige Skripte und wird verwendet, wenn das Skript nicht vom Laden anderer Skripte oder des DOM abhängt.
Das defer-Attribut 
1<script src="script.js" defer></script>
  • Die Verwendung des defer-Attributs ermöglicht es, das Skript asynchron zu laden, aber erst nach Abschluss des HTML-Parsings auszuführen. Die Ausführung des Skripts blockiert die Seitendarstellung nicht, was das Benutzererlebnis verbessert.
  • defer ist effektiv, wenn Skripte nach vollständigem Laden des DOM ausgeführt werden müssen. Es ist zum Beispiel geeignet, wenn das Skript nach dem Laden des gesamten Layouts und der Elemente der Seite ausgeführt werden soll.

CORS-Richtlinien und das crossorigin-Attribut

Beim Laden externer Skripte können Sicherheitsbeschränkungen basierend auf der Same-Origin-Policy auferlegt werden. In solchen Fällen kann das crossorigin-Attribut verwendet werden, um die Ressourcennutzung zu ermöglichen.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Das crossorigin-Attribut kann mit den folgenden zwei Werten gesetzt werden:.

  • anonymous: Sendet Anfragen ohne die Übermittlung von Anmeldeinformationen.
  • use-credentials: Sendet Anfragen mit Anmeldeinformationen.

type-Attribut

Das <script>-Tag kann das type-Attribut verwenden, um den Skripttyp anzugeben. Standardmäßig wird JavaScript verwendet, aber Sie können auch bestimmte Skripttypen angeben (z. B. JavaScript-Modultypen oder Vorlagensprachen).

JavaScript-Module 
1<script type="module" src="module.js"></script>

  • Seit ECMAScript 2015 (ES6) wurden JavaScript-Module eingeführt, die es ermöglichen, Code auf Module aufzuteilen, was die Wiederverwendbarkeit verbessert. Durch die Angabe von type="module" können Sie das Skript als Modul behandeln.

  • Module können mit import und export in andere Module aufgeteilt werden.

Nicht-JavaScript-Skripte 
1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>
  • Im <script>-Tag können auch andere Skripte als JavaScript angegeben werden. Verwenden Sie beispielsweise type="application/ld+json", wenn Sie strukturierte Daten wie JSON-LD beschreiben. Hierbei ist JSON-LD ein Format, das Daten auf einer Webseite strukturiert und es Suchmaschinen und anderen Anwendungen ermöglicht, die Daten besser zu verstehen.

Hinweise zur Verwendung des <script>-Tags

  • Reihenfolge der Skripte: Bibliotheken, von denen Skripte abhängen, müssen vor den abhängigen Skripten geladen werden. Beispielsweise müssen Skripte, die jQuery verwenden, nach jQuery selbst geladen werden.
  • Leistungsoptimierung: Um die Ladegeschwindigkeit der Seite nicht zu beeinträchtigen, laden Sie Skripte nur bei Bedarf und vermeiden Sie das Ausführen unnötiger Skripte.
  • Sicherheitsmaßnahmen: Stellen Sie sicher, dass externe Skripte aus vertrauenswürdigen Quellen geladen werden, um das Einbinden bösartiger Skripte zu verhindern.

<base>-Tag 

1<base href="https://example.com/">
  • Das <base>-Tag setzt die Basis-URL für alle relativen URLs im Dokument. Die im href-Attribut angegebene URL wird zur Basis für relative Pfade in Links und Bildern. Es wird normalerweise nur einmal pro Seite verwendet.

<noscript>-Tag 

1<noscript>Your browser does not support JavaScript!</noscript>
  • Das <noscript>-Tag definiert Inhalte, die angezeigt werden, wenn JavaScript im Browser deaktiviert ist. Es wird verwendet, um alternativen Inhalt für Umgebungen bereitzustellen, in denen JavaScript nicht unterstützt wird.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

FormularvalidierungTags im Zusammenhang mit Metainformationen