Der Kopfbereich

<meta>

Die heimlichen Strippenzieher

<meta>-Tags sind die unsichtbaren Flüstertüten deiner Webseite – sie erzählen dem Browser und der Suchmaschine, worum es hier geht. Sie liefern Informationen über Zeichencodierung, Beschreibungstexte und Anweisungen für Crawler, ohne dass die Besucher je etwas davon sehen.

<meta>

<link>

Der Vermittler zwischen HTML und der Welt

Mit <link> knüpfst du Verbindungen zu Stylesheets, Icons oder externen Ressourcen – sozusagen der Türsteher, der entscheidet, welche externen Dateien Zugang zur Webseite bekommen. Ohne <link> läuft deine Seite vielleicht, aber sie sieht aus wie ein schlecht formatierter Einkaufszettel.

<link>

<!- -Kommentare- ->

Geheime Notizen für Eingeweihte

Innerhalb von <!- – . . . – -> kannst du deine eigenen Gedanken oder kryptischen Botschaften verstecken, die dir oder deinem Team später hoffentlich noch etwas sagen. Merke dir unbedingt die Eingabe in Visual Studio Code (alt + shift + a), denn wer will schon ständig von Hand kommentieren, wenn man den magischen Shortcut hat, der das alles mit einem Fingerschnippen erledigt?

<!-- ein Kommentar -->

charset

Damit dein Text nicht in Hieroglyphen endet

Im mysteriösen Reich der Computer und des Internets gibt es ein unsichtbares System, das bestimmt, wie Zeichen auf deinem Bildschirm erscheinen. Dieses System nennt sich Zeichensatz oder „Charset“. „UTF-8“ sorgt dafür, dass Sonderzeichen und Emojis korrekt dargestellt werden. Außerdem ermöglicht es eine effiziente Speicherung und Verarbeitung von Daten – ganz ohne Magie!

<meta charset="UTF-8">

viewport

Weil nicht jeder auf einem riesigen Zauberbuch liest

Sorge dafür, dass deine Webseite auf jedem Gerät so brillant aussieht wie auf deinem Lieblingsmonitor. Mit width=device-width und initial-scale=1.0 passt sich deine Seite elegant an, egal ob auf einem winzigen Smartphone oder einem riesigen Desktop. Das bedeutet weniger Zoom-Akrobatik für deine Nutzer und ein Lächeln von den Suchmaschinen, die mobilfreundliche Seiten bevorzugen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

keywords

Flüstert der Suchmaschine die richtigen Zauberwörter zu

Beinhaltet magische Schlüsselwörter, die einst dazu gedacht waren, Suchmaschinen den Inhalt deiner Seite zu erklären. Doch in diesen modernen Zeiten schenken sie diesem alten Zauber kaum noch Beachtung. Heute schätzen sie eher hochwertigen Inhalt, eine gute Benutzererfahrung und die Geschwindigkeit, mit der deine Seite geladen wird – also die wahren Zutaten für digitalen Erfolg.

<meta name="keywords" content="HTML, CSS, Webdesign">

description

Der Klappentext deiner Webseite – für Suchmaschinen und Neugierige

Diese magischen Attribute geben deiner Webseite eine kurze, prägnante Beschreibung, die Suchmaschinen nutzen, um deinen Inhalt bei der Suche ins Rampenlicht zu rücken. Eine gute Beschreibung mit 150-160 Zeichen lockt mehr Besucher an und gibt ihnen einen Vorgeschmack auf das, was sie erwartet.

<meta name="description" content="Entdecke die uralten Geheimnisse der Webentwicklung mit unserem Zauberbuch. HTML und CSS werden zur Magie in deinen Händen.">

author

Große Worte, kleine Geschichten – die Kunst des Erzählens in HTML

Das name-Attribut mit dem Wert author ist wie ein geheimer Zauberspruch, der den wahren Schöpfer deiner Webseite enthüllt. In diesem Fall ist es der weise „Master Rabbit“, dessen Wissen und Magie diese Seite zum Leben erweckt haben. Mit diesem Zauber stellst du sicher, dass Suchmaschinen und alle digitalen Geister den Architekten dieses Meisterwerks erkennen.

<meta name="author" content="Master Rabbit">

icon

Das Wappen deiner Webseite – klein, aber stolz

Setzt ein kleines Wappen als Symbol der Webseite in die Browser-Tabs, meistens schlicht und prägnant, da es nur winzig dargestellt wird. In diesem Beispiel liegt das Bild im Ordner „img“. Der Begriff „favicon“ kommt von „favorite icon“. Ein clever gewähltes Favicon bleibt den Besuchern noch lange im Gedächtnis.

<link rel="icon" href="img/favicon.png" type="image/png">

robots

Der Befehlston für Suchmaschinen-Crawler

Die Suchmaschinen-Roboter sind bekannt für ihre unermüdliche Neugier – sie wollen alles wissen und jede Seite durchforsten. Diese magischen Befehle helfen dir, ihnen klare Anweisungen zu geben:

index: befiehlt den Robotern, die Seite zu durchsuchen und ihren Inhalt in die großen Verzeichnisse des Internets aufzunehmen. Mit noindex bittest du sie höflich, deine Seite zu ignorieren und nicht in den Suchergebnissen erscheinen zu lassen.

follow: weist die Roboter an, den Links auf deiner Seite zu folgen und auch die verlinkten Seiten zu erkunden. Bei nofollow hingegen rätst du ihnen, die Links in Ruhe zu lassen.

Diese Befehle geben dir die Kontrolle über die Sichtbarkeit deiner Webseite im Netz und helfen dir, den Suchmaschinen-Bots den richtigen Weg zu weisen, bevor sie allzu neugierig werden.

<meta name="robots" content="index, follow">

stylesheet

Der Modeberater für deine Webseite

Das <link>-Element mit dem Attribut rel=“stylesheet“ ist wie ein Ruf nach einem Design-Zauberbuch, das festlegt, wie deine Webseite aussehen soll. Es zeigt auf eine externe CSS-Datei, die all ihre modischen Geheimnisse bereithält. Das href-Attribut weist dir den Weg dorthin. Und falls du noch mehr Magie brauchst – JavaScript-Dateien können auf ähnliche Weise verknüpft werden.

<link rel="stylesheet" href="style.css">

<base>

Der Orientierungspunkt für alle Links auf der Seite

Das <base>-Element ist wie der alte Leuchtturmwächter, der mit seiner Laterne den relativen Links den Weg weist. Es legt eine Basis-URL fest, damit all diese Links, Bilder und sonstigen wandernden Ressourcen nicht in der Weite des Webs verloren gehen. Das href-Attribut gibt ihnen die Richtung, damit sie auch ja den richtigen Pfad nehmen – und das alles, ohne die vollständige URL jedes Mal ausschreiben zu müssen. Praktisch, oder?

<base href="https://www.deinedomain.com/verzeichnis/">