Überschrift strassencoder.ch
Logo strassencoder.ch
Überschrift Head

Das head-Element in HTML

Das head-Element in HTML ist ein Container für Metadaten und anderen Angaben und wird eingefügt zwischen dem <html> Tag und dem <body> Tag. Metadaten sind Informationen über das Dokument. Metadaten werden vom Browser nicht angezeigt. Die folgenden Angaben werden im <head>Bereich eingefügt: <title>, <style>,<meta>,<link>,<script>,<base> usw.

Das <title> Element:

Das<title>Element definiert den Titel eines Dokumentes.
Das<title>Element wird im Browser-Tab angezeigt.
Das<title>Element definiert den Titel der Webseite wenn er unter Favoriten gespeichert wird.
Das <title> Element wird im Browser-Verlauf gespeichert.
Suchmaschinen verwenden das <title> Element als Eintrag für die SERP(Search Engine Result Page) und ist ein wichtiger Rankingfaktor.

Zeichenkodierung:

Das<meta charset="UTF-8">Element verhindert das Umlaute fehlerhaft dargestellt werden. Die "8" bedeutet, dass 8-Bit-Blöcke verwendet werden zur Darstellung eines Zeichens. Die zur Darstellung eines Zeichens benötigten Blöcke variiert zwischen 1 und 4. Wenn ein Zeichen binär (alle Daten werden mit 1en und 0en dargestellt) mit nur 1 Byte gespeichert werden kann, werden keine weiteren Bytes verwendet, wodurch die Größe des Dokuments nicht unnötig aufgebläht wird. Die ersten 128 englischen Zeichen in UTF-8 sind die gleichen wie die von ASCII, was es abwärtskompatibel macht.

Meta-Tags

Description(Seitenbeschreibung)

Die Description dient der Kurzbeschreibung des Webseiten-Inhalts und eine prägnante Zusammenfassung. Die Zusammenfassung sollte nicht länger als ca. 160 Zeichen sein.
Auch dieser Meta-Tag wird von Suchmaschinen im SERP(Search Engine Result Page) als Eintrag aufgelistet.
Wirkt sich nicht aufs Ranking aus , kann wenn sie gut gestaltet ist, die Klickrate erhöhen.
<meta name="description" content="...........................">

Keywords(Stichwörter)

Der Keyword-Tag bietet Betreibern die Möglichkeit Stichwörter für eine Seite zu hinterlegen.
keine Relevanz in der Google Suchmaschinen-Optimierung.
<meta name="keywords" content="........ , ................ , .......">

Author

Angaben zum Autor der Seite.
<meta name="author" content=".........."l>

CSS in der HTML-Datei mit dem <style> Element

<!DOCTYPE html>
<html lang="de">
<head>
<style>
h1 {
color: red;
background-color: black;
}
</style>
</head>
<body>
<h1>jetzt HTML lernen mit CSS</h1>
</body>
</html>

Das HTML <link> Element

Das <link> Element verweist auf ein externes Stylesheet:
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>jetzt HTML lernen mit CSS</h1>
</body>
</html>

Das HTML <script> Element

Das <script> Element verweist auf ein externes Skript:
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<script src="dateiname.js"></script>
</head>
<body>
<h2>Javascript im head</h2>
</body>
</html>

Das HTML <base> Element

Mithilfe des base-Elements können Sie die Basis für relative Verweise festlegen. Es darf nur ein base-Element im Kopf eines HTML-Dokuments geben. Wenn nun in der Datei beispielsweise folgende relative Grafikreferenz steht: <img src="Bilder/Logo12.png"> … so ermittelt der Browser die Quelle dieser Grafik als <img src="http://strassencoder.ch/Bilder/Logo12.png"> und öffnet mit target="_blank" in einem neuen Tab.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.strassencoder.ch" target="_blank">
</head>
<body>
<h1>Das base Element</h1>
<img src="Bilder/Logo12.png" width="100" height="100" alt="Logo">
</body>
</html>