HTML - Das Head-Element
Das HTML- <head>Element ist ein Container für die folgenden Elemente:
<title>, <style>,
<meta>, <link>, <script>, und <base>.
Das HTML-<head>-Element
Das <head>Element ist ein Container für Metadaten (Daten über Daten) und wird zwischen dem <html>Tag und dem <body>Tag platziert.
HTML-Metadaten sind Daten über das HTML-Dokument. Metadaten werden nicht angezeigt.
Metadaten definieren normalerweise den Dokumenttitel, Zeichensatz, Stile, Skripte und andere Metainformationen.
Das HTML-<title>-Element
Das <title>Element definiert den Titel des Dokuments. Der Titel muss nur aus Text bestehen und wird in der Titelleiste des Browsers oder auf der Registerkarte der Seite angezeigt.
Das <title>Element wird in HTML-Dokumenten benötigt!
Der Inhalt eines Seitentitels ist sehr wichtig für die Suchmaschinenoptimierung (SEO)! Der Seitentitel wird von Suchmaschinenalgorithmen verwendet, um die Reihenfolge beim Auflisten von Seiten in den Suchergebnissen festzulegen.
Das <title>Element:
- definiert einen Titel in der Symbolleiste des Browsers
- stellt einen Titel für die Seite bereit, wenn sie zu den Favoriten hinzugefügt wird
- zeigt einen Titel für die Seite in Suchmaschinenergebnissen an
Versuchen Sie also, den Titel so genau und aussagekräftig wie möglich zu gestalten!
Ein einfaches HTML-Dokument:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Das HTML-<style>-Element
Das <style>Element wird verwendet, um Stilinformationen für eine einzelne HTML-Seite zu definieren:
Beispiel
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Das HTML-<link>-Element
Das <link>Element definiert die Beziehung zwischen dem aktuellen Dokument und einer externen Ressource.
Das <link>
Tag wird am häufigsten verwendet, um auf externe Stylesheets zu verlinken:
Beispiel
<link rel="stylesheet" href="mystyle.css">
Tipp: Um alles über CSS zu erfahren, besuchen Sie unser CSS-Tutorial .
Das HTML-<meta>-Element
Das <meta>Element wird normalerweise verwendet, um den Zeichensatz, die Seitenbeschreibung, die Schlüsselwörter, den Autor des Dokuments und die Darstellungsfenstereinstellungen anzugeben.
Die Metadaten werden nicht auf der Seite angezeigt, sondern von Browsern (wie Inhalt angezeigt oder Seite neu geladen wird), von Suchmaschinen (Schlüsselwörter) und anderen Webdiensten verwendet.
Beispiele
Definieren Sie den verwendeten Zeichensatz:
<meta charset="UTF-8">
Keywords für Suchmaschinen definieren:
<meta name="keywords" content="HTML, CSS, JavaScript">
Definieren Sie eine Beschreibung Ihrer Webseite:
<meta name="description" content="Free Web tutorials">
Definieren Sie den Autor einer Seite:
<meta name="author" content="John Doe">
Dokument alle 30 Sekunden aktualisieren:
<meta http-equiv="refresh" content="30">
Einstellen des Darstellungsbereichs, damit Ihre Website auf allen Geräten gut aussieht:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Beispiel für <meta>Tags:
Beispiel
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Festlegen des Ansichtsfensters
Der Viewport ist der für den Benutzer sichtbare Bereich einer Webseite. Es variiert je nach Gerät - es ist auf einem Mobiltelefon kleiner als auf einem Computerbildschirm.
Sie sollten das folgende <meta>Element in alle Ihre Webseiten aufnehmen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dadurch erhält der Browser Anweisungen zum Steuern der Seitenabmessungen und -skalierung.
Der width=device-widthTeil legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts folgt (die je nach Gerät unterschiedlich ist).
Das initial-scale=1.0Teil legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.
Hier ist ein Beispiel für eine Webseite ohne das Viewport-Meta-Tag und dieselbe Webseite mit dem Viewport-Meta-Tag:
Tipp: Wenn Sie diese Seite mit einem Telefon oder Tablet durchsuchen, können Sie auf die beiden Links unten klicken, um den Unterschied zu sehen.
Das HTML-<script>-Element
Das <script>Element wird verwendet, um clientseitige JavaScripts zu definieren.
Das folgende JavaScript schreibt "Hallo JavaScript!" in ein HTML-Element mit id="demo":
Beispiel
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Tipp: Um alles über JavaScript zu erfahren, besuchen Sie unser JavaScript-Tutorial .
Das HTML-<base>-Element
Das <base>Element gibt die Basis-URL und/oder das Ziel für alle relativen URLs auf einer Seite an.
Das <base>Tag muss entweder ein href- oder ein target-Attribut oder beides enthalten.
In einem Dokument darf es nur ein einziges <base>
Element geben!
Beispiel
Geben Sie eine Standard-URL und ein Standardziel für alle Links auf einer Seite an:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Kapitelzusammenfassung
- Das
<head>Element ist ein Container für Metadaten (Daten über Daten) - Das
<head>Element wird zwischen dem<html>Tag und dem<body>Tag platziert - Das
<title>Element ist erforderlich und definiert den Titel des Dokuments - Das
<style>Element wird verwendet, um Stilinformationen für ein einzelnes Dokument zu definieren - Das
<link>Tag wird am häufigsten verwendet, um auf externe Stylesheets zu verlinken - Das
<meta>Element wird normalerweise verwendet, um den Zeichensatz, die Seitenbeschreibung, die Schlüsselwörter, den Autor des Dokuments und die Darstellungsfenstereinstellungen anzugeben - Das
<script>Element wird verwendet, um clientseitige JavaScripts zu definieren - Das
<base>Element gibt die Basis-URL und/oder das Ziel für alle relativen URLs auf einer Seite an
HTML-Head-Elemente
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .