HTML-Kurs / Seitentitel, Beschreibung, Sprache und Zeichenkodierung festlegen

Das head eines HTML-Dokuments enthält Informationen wie den title seines Browser-Tabs, die Zeichencodierung und die Seitenbeschreibung. Die Standardsprache des Dokuments sollte in html lang gesetzt werden. Diese Einstellungen helfen Browsern und anderen Werkzeugen, die Seite zu interpretieren und zu beschreiben, ersetzen jedoch nicht den lesbaren Inhalt in body.

Beginnen Sie mit einem vollständigen Dokument

<!doctype html>

<html lang="de-DE">

<head>

  <meta charset="utf-8">

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

  <title>Kleiner Garten | Pflanzenpflegeleitfaden</title>

  <meta name="description"

        content="Entdecken Sie anfängerfreundliche Pflanzen und deren wesentliche Pflege mit dem Leitfaden Kleiner Garten.">

</head>

<body>

  <h1>Kleiner Garten</h1>

  <p>Lernen Sie, wie man sich um Pflanzen kümmert.</p>

</body>

</html>

Speichern Sie den Code unter index.html und öffnen Sie ihn in einem Browser. Der title erscheint auf dem Browser-Tab, während der h1 auf der Seite sichtbar ist. Sie haben unterschiedliche Funktionen, sollten aber die gleiche Seite konsistent beschreiben. Der h1 im Beispiel befindet sich innerhalb eines Beispieldokuments und nicht als zweiter Titel in diesem Tutorial-Post. Beginnen Sie mit der Unterscheidung zwischen head und body in Basisstruktur eines HTML-Dokuments.

Die meisten Inhalte von head werden auf der Seite nicht als normaler Text angezeigt. Stellen Sie die Anweisungen und Erklärungen, die die Leser sehen sollten, in body bereit. Auf einer mehrseitigen Website schreiben Sie für jede Seite einen eindeutigen und genauen Titel und eine Beschreibung, anstatt denselben Site-Namen überall zu kopieren.

Legen Sie die Sprache und die Zeichenkodierung fest

lang="de-DE" gibt an, dass die Standardsprache des Dokuments Deutsch ist. Dies kann assistiven Technologien helfen, den Inhalt auszusprechen und zu verarbeiten. Verwenden Sie die tatsächliche Sprache der Seite; ein gelegentlicher Satz in einer anderen Sprache erfordert nicht, dass das gesamte Dokument lang geändert wird. Ein längerer Abschnitt in einer anderen Sprache kann ein eigenes Sprachattribut haben. Sprache und Struktur unterstützen auch Lese- und Interaktionsprüfungen in Grundlegende Barrierefreiheit: Überschriften, Links, Bilder und Tastatur.

meta charset="utf-8" gibt die Zeichencodierung an. Speichern Sie auch die Datei selbst in UTF-8. Wenn Zeichen fehlerhaft angezeigt werden, überprüfen Sie sowohl die beim Speichern gewählte Kodierung des Editors als auch, wenn sie online bereitgestellt wird, die Antwort-Header des Servers. Das Ändern des Tags allein kann eine Datei, die in einer anderen Codierung gespeichert wurde, nicht reparieren.

Die Beschreibung und das Anzeigefenster verstehen

Die Metadaten description müssen zusammenfassen, was die Leser auf dieser speziellen Seite finden, und dürfen keine Schlüsselwörter auflisten. Suchmaschinen können einen Ergebnis-Snippet aus dem Text oder den Metadaten der Seite erstellen, daher wird die geschriebene Beschreibung nicht unbedingt wortwörtlich erscheinen. Siehe die Dokumentation zu Snippets in der Google-Suche .

Der Parameter viewport beeinflusst das Ansichtsfenster für Layout und die anfängliche Skalierung auf mobilen Geräten. Er ist nützlich zusammen mit responsivem CSS, aber das Tag allein sorgt nicht dafür, dass jedes Element auf ein Telefon passt. Beschränken Sie den Zoom nicht einfach, weil der Text klein erscheint; korrigieren Sie stattdessen das CSS und die Schriftgröße. Siehe die MDN meta Referenz und die Titelreferenz.

Die Einstellungen an der richtigen Stelle prüfen

lang ist kein separates Tag innerhalb des Head. Setzen Sie es auf das Dokumentelement, wie <html lang="de-DE">, und verwenden Sie ein Sprachattribut an einem bestimmten Element für einen Abschnitt in einer anderen Sprache.

1. Wenn die Zeichen unlesbar sind, öffnen Sie das ursprüngliche korrekte Dokument und überprüfen Sie seine tatsächliche Codierung beim Speichern. Bewahren Sie eine Kopie auf, bevor Sie einen Text speichern, der möglicherweise bereits falsch decodiert wurde.
2. Speichern Sie eine bekannte und korrekte in UTF-8 gespeicherte Datei, behalten Sie die Charset-Deklaration nahe am Anfang bei und öffnen Sie sie erneut. Das Ändern der Deklaration repariert keinen bereits beschädigten Text.
3. Wenn die lokale Datei korrekt ist, die vom Server bereitgestellte Seite jedoch nicht, überprüfen Sie den Content-Type und das Charset der Dokumentantwort im Netzwerk. Stimmen Sie die Server-Deklaration mit der tatsächlichen Codierung der Datei ab.

Globales Attribut lang MDN

Überprüfen Sie die Seite, bevor Sie sie teilen

Stellen Sie sicher, dass jeder Tab-Titel seine Seite unterscheidet, dass der sichtbare Titel dasselbe Thema beschreibt und dass die Zeichen richtig angezeigt werden. Wenn Sie eine Beschreibung verfasst haben, vergleichen Sie sie mit dem aktuellen Textkörper und nicht mit einer alten Version. Öffnen Sie die Seite in einer typischen Telefonbreite und testen Sie das Zoomen und horizontale Scrollen; die Metadaten und das Layout müssen zusammen funktionieren.