Was befindet sich im Kopfbereich? Metadaten eines Webseiten
Der Kopfbereich eines HTML-Dokuments ist der Teil, der beim Laden der Seite im Webbrowser nicht angezeigt wird. Er enthält Metadateninformationen wie den Seitentitel (<title>
Webbrowser verwenden die im Kopfbereich enthaltenen Informationen, um das HTML-Dokument korrekt darzustellen. In diesem Artikel werden wir all das oben Genannte und noch mehr behandeln, um Ihnen eine gute Grundlage für die Arbeit mit Markup zu geben.
| Voraussetzungen: | Grundlegende HTML-Kenntnisse, wie im vorherigen Kapitel behandelt. |
|---|---|
| Lernziele: |
|
Was ist der HTML-Kopfbereich?
Lassen Sie uns das einfache HTML-Dokument, das wir im vorherigen Artikel behandelt haben, erneut betrachten:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Der HTML-Kopfbereich ist der Inhalt des <head>-Elements. Im Gegensatz zu den Inhalten des <body>-Elements (die auf der Seite angezeigt werden, wenn sie in einem Browser geladen wird), wird der Inhalt des Kopfbereichs nicht auf der Seite angezeigt. Stattdessen besteht die Aufgabe des Kopfbereichs darin, Metadaten über das Dokument zu enthalten. In dem obigen Beispiel ist der Kopfbereich recht klein:
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
Bei größeren Seiten kann der Kopfbereich jedoch ziemlich groß werden. Versuchen Sie, einige Ihrer Lieblingswebsites zu besuchen und die Entwicklertools zu verwenden, um deren Kopfbereichsinhalte zu überprüfen. Unser Ziel hier ist es nicht, Ihnen zu zeigen, wie Sie alles verwenden, was möglicherweise in den Kopfbereich eingefügt werden kann, sondern vielmehr, Ihnen beizubringen, wie Sie die wichtigsten Elemente verwenden, die Sie in den Kopfbereich einfügen möchten, und Ihnen ein gewisses Maß an Vertrautheit zu vermitteln. Lassen Sie uns beginnen.
Einen Titel hinzufügen
Wir haben das <title>-Element bereits in Aktion gesehen — damit kann dem Dokument ein Titel hinzugefügt werden. Dies kann jedoch mit dem h1-Element, das verwendet wird, um eine Überschrift der obersten Ebene zu Ihrem Hauptteilinhalt hinzuzufügen, verwechselt werden — dies wird manchmal auch als Seitentitel bezeichnet. Aber sie sind unterschiedliche Dinge!
- Das h1-Element erscheint, wenn es im Browser geladen wird, auf der Seite — im Allgemeinen sollte es pro Seite einmal verwendet werden, um den Titel Ihres Seiteninhalts (den Titel der Geschichte, die Nachrichtenschlagzeile oder was immer für Ihre Verwendung angemessen ist) zu kennzeichnen.
- Das
<title>-Element ist Metadaten, die den Titel des gesamten HTML-Dokuments darstellen (nicht den Inhalt des Dokuments).
Ein Beispiel inspizieren
-
In dieser Übung möchten wir, dass Sie anfangen, indem Sie zu unserem GitHub-Repo gehen und eine Kopie unserer title-example.html-Seite herunterladen. Um dies zu tun, entweder
- Den Code aus der Seite in eine neue Textdatei in Ihrem Code-Editor kopieren und einfügen und dann an einem sinnvollen Ort speichern.
- Die Schaltfläche "Raw" auf der GitHub-Seite drücken, wodurch der rohe Code erscheint (möglicherweise in einem neuen Browsertab). Wählen Sie dann das Menü Seite speichern unter... Ihres Browsers und wählen Sie einen geeigneten Ort zum Speichern der Datei.
-
Öffnen Sie die Datei nun in Ihrem Browser. Sie sollten etwas wie das Folgende sehen:
Es sollte nun absolut klar sein, wo der
<h1>-Inhalt erscheint und wo der<title>-Inhalt erscheint! -
Sie sollten auch versuchen, den Code in Ihrem Code-Editor zu öffnen, den Inhalt dieser Elemente zu bearbeiten und dann die Seite in Ihrem Browser zu aktualisieren. Haben Sie ein wenig Spaß damit.
Die <title>-Inhalte werden auch in anderer Weise verwendet. Zum Beispiel, wenn Sie versuchen, die Seite zu bookmarken (Lesezeichen > Diese Seite bookmarken oder das Sternsymbol in der Adressleiste in Firefox), sehen Sie die <title>-Inhalte als vorgeschlagenen Namen für das Lesezeichen ausgefüllt.
Die <title>-Inhalte werden auch in Suchergebnissen verwendet, wie Sie unten sehen werden.
Metadaten: das <meta>-Element
Metadaten sind Daten, die Daten beschreiben, und HTML hat eine "offizielle" Möglichkeit, Metadaten zu einem Dokument hinzuzufügen — das <meta>-Element. Natürlich könnte man die anderen Dinge, über die wir in diesem Artikel sprechen, auch als Metadaten betrachten. Es gibt viele verschiedene Arten von <meta>-Elementen, die im <head> einer Seite enthalten sein können, aber wir werden nicht versuchen, sie alle an dieser Stelle zu erklären, da es einfach zu verwirrend wäre. Stattdessen erklären wir ein paar Dinge, die Sie möglicherweise häufig sehen, um Ihnen eine Vorstellung zu geben.
Die Zeichencodierung Ihres Dokuments festlegen
In dem obigen Beispiel war diese Zeile enthalten:
<meta charset="utf-8" />
Dieses Element bestimmt die Zeichencodierung des Dokuments — das Zeichenset, das das Dokument verwenden darf. utf-8 ist ein universelles Zeichenset, das so ziemlich jedes Zeichen aus jeder menschlichen Sprache umfasst. Das bedeutet, dass Ihre Webseite in der Lage sein wird, jede Sprache anzuzeigen; es ist daher eine gute Idee, dies auf jeder von Ihnen erstellten Webseite einzustellen! Beispielsweise könnte Ihre Seite Englisch und Japanisch problemlos handhaben:
Wenn Sie Ihre Zeichencodierung beispielsweise auf ISO-8859-1 setzen (das Zeichenset für das lateinische Alphabet), könnte die Darstellung Ihrer Seite völlig durcheinander erscheinen:
Hinweis:
Einige Browser (wie Chrome) korrigieren falsche Kodierungen automatisch, sodass Sie je nach verwendetem Browser dieses Problem möglicherweise nicht sehen. Sie sollten jedoch trotzdem eine Kodierung von utf-8 in Ihrer Seite einstellen, um potenzielle Probleme in anderen Browsern zu vermeiden.
Mit Zeichencodierung experimentieren
Um dies auszuprobieren, besuchen Sie die einfache HTML-Vorlage, die Sie im vorherigen Abschnitt über <title> erhalten haben (die title-example.html-Seite), versuchen Sie, den Meta-Charset-Wert auf ISO-8859-1 zu ändern, und fügen Sie das Japanische zu Ihrer Seite hinzu. Dies ist der Code, den wir verwendet haben:
<p>Japanese example: ご飯が熱い。</p>
Ein Autor und eine Beschreibung hinzufügen
Viele <meta>-Elemente enthalten name- und content-Attribute:
namegibt die Art des Metadatenelements an; welche Art von Informationen es enthält.contentgibt die tatsächlichen Metadateninhalte an.
Zwei solcher Meta-Elemente, die es sich lohnt, auf Ihrer Seite einzuschließen, definieren den Autor der Seite und bieten eine kurze Beschreibung der Seite. Sehen wir uns ein Beispiel an:
<meta name="author" content="Chris Mills" />
<meta
name="description"
content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing websites and applications." />
Das Festlegen eines Autors ist in vielerlei Hinsicht von Vorteil: Es ist nützlich zu wissen, wer die Seite geschrieben hat, wenn Sie Fragen zum Inhalt haben und ihn kontaktieren möchten. Einige Content-Management-Systeme verfügen über Funktionen, um Autoreninformationen von Seiten automatisch zu extrahieren und für solche Zwecke bereitzustellen.
Das Festlegen einer Beschreibung mit Schlüsselwörtern, die sich auf den Inhalt Ihrer Seite beziehen, ist nützlich, da es die Chance hat, Ihre Seite bei relevanten Suchanfragen in Suchmaschinen höher erscheinen zu lassen (solche Aktivitäten werden als SEO, oder Suchmaschinenoptimierung bezeichnet.)
Untersuchung der Verwendung der Beschreibung in Suchmaschinen
Die Beschreibung wird auch auf Suchergebnisseiten verwendet. Lassen Sie uns eine Übung durchführen, um dies zu erkunden:
-
Gehen Sie zur Startseite des Mozilla Developer Network.
-
Anzeigen des Quellcodes der Seite (rechtsklicken Sie auf die Seite und wählen Sie Seitenquelltext anzeigen im Kontextmenü).
-
Suchen Sie das Beschreibungstag. Es wird so aussehen (obwohl es sich mit der Zeit ändern kann):
html<meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both websites and progressive web apps." /> -
Suchen Sie nun nach "MDN Web Docs" in Ihrer bevorzugten Suchmaschine (wir haben Google verwendet). Sie werden feststellen, dass der Beschreibungstext
<meta>und der<title>Elementinhalt im Suchergebnis verwendet wird — definitiv wertvoll, zu haben!
Hinweis: In Google werden Sie einige relevante Unterseiten von MDN Web Docs unter dem Hauptlink der Startseite aufgelistet sehen — dies sind sogenannte Sitelinks, die in Googles Webmaster-Tools konfigurierbar sind — eine Möglichkeit, die Suchergebnisse Ihrer Website im Google-Suchmaschine zu verbessern.
Hinweis:
Viele <meta>-Funktionen werden heutzutage einfach nicht mehr verwendet. Zum Beispiel wird das Schlüsselwort-<meta>-Element (<meta name="keywords" content="fill, in, your, keywords, here">) — das dazu gedacht ist, Schlüsselwörter für Suchmaschinen bereitstellen, um zu bestimmen, welche Relevanz diese Seite für verschiedene Suchbegriffe hat — von Suchmaschinen ignoriert, da Spammer einfach die Schlüsselwortliste mit Hunderten von Schlüsselwörtern gefüllt haben und so die Ergebnisse verfälschten.
Andere Arten von Metadaten
Während Sie im Internet unterwegs sind, werden Sie auf andere Arten von Metadaten stoßen. Viele der Funktionen, die Sie auf Websites sehen werden, sind proprietäre Entwicklungen, die entworfen wurden, um bestimmten Sites (wie Social-Networking-Sites) spezifische Informationen zu liefern, die sie verwenden können.
Zum Beispiel ist Open Graph Data ein Metadatenprotokoll, das Facebook erfunden hat, um reichere Metadaten für Websites bereitzustellen. Im MDN Web Docs-Quellcode finden Sie dies:
<meta
property="og:image"
content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
property="og:description"
content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both websites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />
Eine Auswirkung davon ist, dass beim Verlinken zu MDN Web Docs auf Facebook der Link zusammen mit einem Bild und einer Beschreibung erscheint: eine reichere Erfahrung für die Nutzer.
Benutzerdefinierte Icons zu Ihrer Website hinzufügen
Um das Design Ihrer Website weiter zu bereichern, können Sie in Ihren Metadaten Verweise auf benutzerdefinierte Icons hinzufügen, die in bestimmten Kontexten angezeigt werden. Der am häufigsten verwendete davon ist das Favicon (kurz für "Favoriten-Icon", in Bezug auf seine Verwendung in den Listen "Favoriten" oder "Lesezeichen" in Browsern).
Das bescheidene Favicon gibt es seit vielen Jahren. Es ist das erste Icon dieser Art: ein 16-Pixel-Quadrat-Icon, das an mehreren Stellen verwendet wird. Sie können Favicons (je nach Browser) im Browser-Tab, der jede offene Seite enthält, und neben den gebookmarkten Seiten in der Bookmark-Leiste sehen.
Ein Favicon kann zu Ihrer Seite hinzugefügt werden, indem Sie:
-
Es im selben Verzeichnis wie die Indexseite der Website, gespeichert im .ico-Format (die meisten unterstützen auch Favicons in häufigeren Formaten wie .gif oder .png), speichert.
-
Die folgende Zeile in den HTML-Kopfbereich Ihres Dokuments einfügen, um darauf zu verweisen:
html<link rel="icon" href="favicon.ico" type="image/x-icon" />
Hier ist ein Beispiel für ein Favicon in der Lesezeichen-Leiste:
Möglicherweise benötigen Sie auch verschiedene Icons für verschiedene Kontexte. Zum Beispiel finden Sie dies im Quellcode der MDN Web Docs-Startseite:
<link rel="icon" href="/favicon-48x48.[some hex hash].png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.[some hex hash].png" />
Dies ist eine Möglichkeit, der Website ein Icon hinzuzufügen, wenn sie auf einem Apple-Gerät als Startbildschirm gespeichert ist. Möglicherweise möchten Sie sogar unterschiedliche Icons für unterschiedliche Geräte bereitstellen, um sicherzustellen, dass das Icon auf allen Geräten gut aussieht. Zum Beispiel:
<!-- iPad Pro with high-resolution Retina display: -->
<link
rel="apple-touch-icon"
sizes="167x167"
href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
rel="apple-touch-icon"
sizes="152x152"
href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />
Die Kommentare erklären, wofür jedes Icon verwendet wird — diese Elemente umfassen Dinge wie das Bereitstellen eines schön hochauflösenden Icons für die Verwendung, wenn die Website auf dem Startbildschirm eines iPads gespeichert ist.
Keine Sorge, alle diese Arten von Icons jetzt zu implementieren — dies ist eine ziemlich fortschrittliche Funktion, und es wird nicht erwartet, dass Sie dieses Wissen haben, um im Kurs voranzuschreiten. Der Hauptzweck hier ist es, Ihnen mitzuteilen, was solche Dinge sind, falls Sie sie beim Durchstöbern anderer Websites' Quellcodes entdecken. Wenn Sie mehr über all diese Werte und wie Sie sie auswählen können, erfahren möchten, lesen Sie die Referenzseite des <link>-Elements.
Hinweis:
Wenn Ihre Website eine Content Security Policy (CSP) zur Verbesserung ihrer Sicherheit verwendet, gilt die Richtlinie auch für das Favicon. Wenn Sie Probleme haben, dass das Favicon nicht geladen wird, prüfen Sie, ob der Content-Security-Policy Header's img-src Directive den Zugriff darauf nicht verhindert.
Anwendung von CSS und JavaScript auf HTML
Fast alle Websites, die Sie heutzutage nutzen, verwenden CSS, um schick auszusehen, und JavaScript, um interaktive Funktionalitäten wie Videoplayer, Karten, Spiele und mehr zu betreiben. Diese werden in der Regel auf einer Webseite mit dem <link>-Element und dem <script>-Element angewendet.
-
Das
<link>-Element sollte immer in den Kopfbereich Ihres Dokuments gehen. Es nimmt zwei Attribute auf:rel="stylesheet", was darauf hinweist, dass es sich um das Stylesheet des Dokuments handelt, undhref, das den Pfad zur Stylesheet-Datei enthält:html<link rel="stylesheet" href="my-css-file.css" /> -
Das
<script>-Element sollte ebenfalls in den Kopfbereich gehen und sollte einsrc-Attribut enthalten, das den Pfad zum JavaScript angibt, das geladen werden soll, sowiedefer(ein booleanes Attribut), das dem Browser mitteilt, das JavaScript zu laden, nachdem die Seite mit dem Parsen des HTMLs fertig ist. Dasdefer-Attribut ist nützlich, da es garantiert, dass das HTML vollständig geladen ist, bevor das JavaScript ausgeführt wird, sodass Sie keine Fehler erhalten, weil JavaScript versucht, auf ein HTML-Element zuzugreifen, das noch nicht auf der Seite existiert. Es gibt mehrere Möglichkeiten, JavaScript auf Ihrer Seite zu laden, aber dies ist die zuverlässigste, die in modernen Browsern zu verwenden ist.html<script src="my-js-file.js" defer></script>Hinweis: Das
<script>-Element mag wie ein leeres Element aussehen, aber es ist keines und benötigt daher ein schließendes Tag. Anstatt auf eine externe Skriptdatei zu verweisen, können Sie Ihr Skript auch im<script>-Element einfügen.
Sie sind dran: Anwenden von CSS und JavaScript auf eine Seite
- Um diese Übung zu starten, besorgen Sie sich eine Kopie unserer meta-example.html, script.js und style.css Dateien und speichern Sie sie auf Ihrem lokalen Computer im selben Verzeichnis. Stellen Sie sicher, dass sie mit den richtigen Namen und Dateierweiterungen gespeichert sind.
- Öffnen Sie die HTML-Datei sowohl in Ihrem Browser als auch in Ihrem Texteditor.
- Indem Sie den obigen Informationen folgen, fügen Sie
<link>- und<script>-Elemente in Ihr HTML ein, damit Ihr CSS und JavaScript auf Ihr HTML angewendet werden.
Wenn dies korrekt durchgeführt wird, sollten Sie, wenn Sie Ihr HTML speichern und Ihren Browser aktualisieren, sehen können, dass sich Dinge geändert haben:
- Das JavaScript hat eine leere Liste zur Seite hinzugefügt. Wenn Sie nun irgendwo außerhalb der Liste klicken, wird ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, einen Text für ein neues Listenelement einzugeben. Wenn Sie die OK-Taste drücken, wird ein neues Listenelement mit diesem Text zur Liste hinzugefügt. Wenn Sie auf ein bestehendes Listenelement klicken, wird ein Dialogfeld angezeigt, in dem Sie den Text des Elements ändern können.
- Das CSS hat den Hintergrund grün gemacht und die Schrift vergrößert. Es hat auch einige der vom JavaScript zur Seite hinzugefügten Inhalte gestylt (der rote Balken mit dem schwarzen Rand ist das Styling, das das CSS zur JS-generierten Liste hinzugefügt hat).
Hinweis: Wenn Sie in dieser Übung stecken bleiben und das CSS/JS nicht anwenden können, versuchen Sie, unsere css-and-js.html Beispielseite anzusehen.
Die primäre Sprache des Dokuments festlegen
Abschließend ist es erwähnenswert, dass Sie die Sprache Ihrer Seite setzen können (und wirklich sollten). Dies kann durch Hinzufügen des lang-Attributs zum öffnenden HTML-Tag erfolgen (wie in der meta-example.html zu sehen und unten gezeigt wird).
<html lang="en-US">
…
</html>
Dies ist auf vielerlei Weise nützlich. Ihr HTML-Dokument wird effektiver von Suchmaschinen indexiert, wenn seine Sprache festgelegt ist (damit es beispielsweise korrekt in sprachspezifischen Ergebnissen erscheint), und es ist nützlich für Menschen mit Sehbehinderungen, die Bildschirmlesegeräte verwenden (zum Beispiel, das Wort "six" existiert sowohl im Französischen als auch im Englischen, wird aber unterschiedlich ausgesprochen).
Sie können auch Teilbereiche Ihres Dokuments auf eine andere Sprache erkennen lassen. Zum Beispiel könnten wir unseren japanischen Sprachabschnitt so kennzeichnen, dass er als Japanisch erkannt wird:
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
Diese Codes werden durch den ISO 639-1-Standard definiert. Mehr darüber erfahren Sie in Language tags in HTML and XML.
Zusammenfassung
Das markiert das Ende unserer Schnellübersicht durch den HTML-Kopfbereich — es gibt noch viel mehr, das Sie hier tun können, aber eine vollständige Übersicht wäre zu diesem Zeitpunkt langweilig und verwirrend, und wir wollten Ihnen nur eine Vorstellung der häufigsten Dinge geben, die Sie darin finden werden! Im nächsten Artikel werden wir uns mit Überschriften und Absätze in HTML befassen.