Dokumentstruktur

HTML-Dokumente enthalten eine Dokumenttypdeklaration und das <html>-Stammelement. Im <html>-Element sind der Dokumentkopf und der Dokumenttext verschachtelt. Der Head des Dokuments ist zwar außerhalb des Codes nicht sichtbar, aber für die Funktion einer Website unerlässlich. Sie enthält alle Metainformationen, einschließlich Informationen für Suchmaschinen und Ergebnisse in sozialen Medien, Symbole für den Browser-Tab und die Verknüpfung auf dem mobilen Startbildschirm sowie das Verhalten und die Darstellung Ihrer Inhalte. In diesem Abschnitt werden die Komponenten beschrieben, die zwar nicht sichtbar sind, aber auf fast jeder Webseite vorhanden sind.

Um die MachineLearningWorkshop.com-Website (MLW) zu erstellen, beginnen Sie mit den Komponenten, die für jede Webseite als essenziell gelten: der Dokumenttyp, die Sprache des Inhalts, der Zeichensatz und natürlich der Titel oder Name der Website oder Anwendung.

Zu jedem HTML-Dokument hinzufügen

Es gibt mehrere Elemente, die für jede Webseite unerlässlich sind. Browser rendern Inhalte auch, wenn diese Elemente fehlen, aber Sie sollten sie einfügen.

<!DOCTYPE html>

Das Erste in jedem HTML-Dokument ist die Präambel. Für HTML benötigen Sie nur <!DOCTYPE html>. Das sieht aus wie ein HTML-Element, ist aber tatsächlich ein spezieller Knoten namens doctype. Der DOCTYPE weist den Browser an, den Standardmodus zu verwenden. Wenn sie nicht angegeben wird, verwenden Browser einen anderen Rendering-Modus, den Quirks-Modus. Wenn Sie den DOCTYPE angeben, wird der Quirks-Modus verhindert.

<html>

Das <html>-Element ist das Stammelement für ein HTML-Dokument. Es ist das übergeordnete Element von <head> und <body> und enthält alles im HTML-Dokument außer dem DOCTYPE. Wenn die Sprache nicht angegeben ist, wird sie impliziert. Sie sollten sie jedoch angeben, um die Sprache des Dokuments zu deklarieren.

Inhaltssprache

Das Attribut lang im <html>-Tag definiert die Hauptsprache des Dokuments. Der Wert ist ein ISO-Sprachcode, gefolgt von einer optionalen Region. Beispiel: Französisch in Kanada ist fr-CA, in Burkina Faso fr-BF. Diese Deklaration hilft Screenreadern, Suchmaschinen und Übersetzungsdiensten, die Dokumentsprache zu erkennen.

Sie können das Attribut lang für andere Tags verwenden, um Ausnahmen von der primären Sprache des Dokuments anzugeben. Wie im Head hat das Attribut lang im Body keine visuellen Auswirkungen. Es fügt Semantik hinzu, sodass unterstützende Technologien und automatisierte Dienste die Sprache bestimmter Inhalte erkennen können.

Neben der Festlegung der Sprache für das Dokument und Ausnahmen von dieser Basissprache kann das Attribut in CSS-Selektoren verwendet werden. <span lang="fr-fr">Ceci n'est pas une pipe.</span> kann mit den Attribut- und Sprachselektoren [lang|="fr"] und :lang(fr) ausgerichtet werden.

Zwischen dem öffnenden und dem schließenden <html>-Tag befinden sich die beiden untergeordneten Elemente <head> und <body>:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head> enthält Metadaten für eine Website oder App, während <body> sichtbare Inhalte enthält. Im weiteren Verlauf dieses Abschnitts geht es um Komponenten, die im Element <head> verschachtelt sind.

Erforderliche Komponenten im <head>

Die Dokumentmetadaten, einschließlich Dokumenttitel, Zeichensatz, Viewporteinstellungen, Beschreibung, Basis-URL, Stylesheet-Links und Symbole, befinden sich im <head>-Element. Möglicherweise benötigen Sie nicht alle diese Funktionen, aber Sie sollten immer Zeichensatz, Titel und Viewport-Einstellungen angeben.

Zeichencodierung

Das allererste Element in <head> sollte die charset-Zeichencodierungsdeklaration sein. Es steht vor dem Titel, damit der Browser die Zeichen im Titel und alle Zeichen im restlichen Dokument rendern kann.

Die Standardcodierung in den meisten Browsern ist je nach Spracheinstellung windows-1252. Sie sollten jedoch UTF-8 verwenden, da damit alle Zeichen mit ein bis vier Byte codiert werden können.

Um die Zeichencodierung auf UTF-8 festzulegen, fügen Sie Folgendes ein:

<meta charset="utf-8" />

Wenn Sie UTF-8 (Groß-/Kleinschreibung wird nicht beachtet) deklarieren, können Sie sogar Emojis in Ihren Titel einfügen.

Die Zeichencodierung wird in alles im Dokument übernommen, auch in <style> und <script>. Dank dieser kleinen Deklaration können Sie Emojis in Klassennamen und im selectorAPI verwenden. Wenn Sie Emojis verwenden, achten Sie darauf, dass sie die Nutzerfreundlichkeit verbessern, ohne die Barrierefreiheit zu beeinträchtigen.

Dokumenttitel

Jede Seite, sowohl die Startseite als auch alle zusätzlichen Seiten, sollte einen eindeutigen Titel haben. Der Inhalt für den Dokumenttitel, also der Text zwischen den öffnenden und schließenden <title>-Tags, wird im Browser-Tab, in der Liste der geöffneten Fenster, im Verlauf, in den Suchergebnissen und, sofern nicht mit <meta>-Tags neu definiert, in Social-Media-Karten angezeigt.

<title>Machine Learning Workshop</title>

Metadaten für den Darstellungsbereich

Das viewport-Meta-Tag ist für die Reaktionsfähigkeit von Websites unerlässlich, da es dafür sorgt, dass Inhalte unabhängig von der Breite des Darstellungsbereichs gut gerendert werden. Das Viewport-Meta-Tag gibt es zwar schon seit 2007, es wurde aber erst vor Kurzem in einer Spezifikation dokumentiert. Sie steuert die Größe und Skalierung des Darstellungsbereichs und verhindert, dass Inhalte verkleinert werden, um auf kleinere Bildschirme zu passen.

<meta name="viewport" content="width=device-width" />

Der vorherige Code bedeutet: „Mache die Website responsiv, indem du zuerst die Breite des Inhalts an die Breite des Bildschirms anpasst.“ Neben width können Sie auch Zoom und Skalierbarkeit festlegen. Beide haben jedoch standardmäßig barrierefreie Werte. Wenn Sie es genauer angeben möchten, fügen Sie Folgendes hinzu:

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

Der Viewport ist Teil der Lighthouse-Prüfung der Barrierefreiheit. Ihre Website besteht den Test, wenn sie skalierbar ist und keine maximale Größe festgelegt ist.

Bisher sieht die Gliederung für unsere HTML-Datei so aus:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

Andere <head>-Inhalte

Es gibt noch viel mehr, was in die <head> einfließt. Alle Metadaten. Die meisten Elemente, die Sie in der <head> finden, werden in diesem Modul behandelt. Weitere Informationen finden Sie im Metadatenmodul.

Sie haben den Meta-Zeichensatz und den Dokumenttitel gesehen, aber es gibt viele weitere Metadaten außerhalb von <meta>-Tags, die enthalten sein sollten.

CSS

Im <head>-Bereich können Sie Stile für Ihren HTML-Code einfügen. Wenn Sie mehr über Stile erfahren möchten, finden Sie hier einen Lernpfad zu CSS. Sie müssen jedoch wissen, wie Sie sie in Ihre HTML-Dokumente einfügen.

Es gibt drei Möglichkeiten, CSS einzufügen: <link>, <style> und das Attribut style.

Es gibt zwei Hauptmethoden, um Stile in Ihre HTML-Datei einzufügen: Sie können eine externe Ressource mit einem <link>-Element einfügen, wobei das Attribut rel auf stylesheet gesetzt ist, oder Sie können CSS direkt im Head Ihres Dokuments zwischen öffnenden und schließenden <style>-Tags einfügen.

Das <link>-Tag ist die bevorzugte Methode zum Einbinden von Stylesheets. Das Verknüpfen eines einzelnen oder weniger externer Stylesheets ist sowohl für die Entwicklerfreundlichkeit als auch für die Websiteleistung von Vorteil: Sie können CSS an einem Ort verwalten, anstatt es überall zu verteilen, und Browser können die externe Datei im Cache speichern. Das bedeutet, dass sie nicht bei jeder Seitennavigation neu heruntergeladen werden muss.

Die Syntax lautet <link rel="stylesheet" href="styles.css">, wobei styles.css der Dateiname und der relative Speicherort für Ihr Stylesheet ist. Das Attribut type="text/css" ist möglicherweise zu sehen, aber nicht erforderlich. Das Attribut rel definiert die Beziehung, die in diesem Fall stylesheet ist. Wenn Sie das Attribut rel weglassen, wird Ihr Preisvergleichsportal nicht verknüpft.

Sie werden bald einige weitere rel-Werte kennenlernen. Zuerst erfahren Sie jedoch, wie Sie CSS auf andere Weise einfügen können.

Wenn die Stile Ihres externen Stylesheets in einer Kaskadenebene enthalten sein sollen, Sie aber keinen Zugriff zum Bearbeiten der CSS-Datei haben, müssen Sie das CSS mit @import in einem <style> einfügen:

<style>
  @import "styles.css" layer(firstLayer);
</style>

Wenn Sie @import verwenden, um Stylesheets in Ihr Dokument zu importieren, optional in Kaskadenebenen, müssen die @import-Anweisungen die ersten Anweisungen in Ihrem <style> oder verknüpften Stylesheet sein, außerhalb der Zeichensatzdeklaration.

Kaskadenebenen sind noch relativ neu und Sie werden die @import in einem Head-<style> möglicherweise nicht sehen. Benutzerdefinierte Eigenschaften werden jedoch häufig in einem Head-Style-Block deklariert:

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

Mit <link>, <style> oder beidem hinzugefügte Stile sollten im Head-Bereich stehen. Sie funktionieren zwar auch, wenn sie im Body-Bereich des Dokuments enthalten sind, aber aus Leistungsgründen sollten Sie Stile im Head-Bereich hinzufügen. Das mag kontraintuitiv erscheinen, da Sie vielleicht möchten, dass Ihre Inhalte zuerst geladen werden. Es ist jedoch besser, wenn der Browser weiß, wie die Inhalte gerendert werden sollen, wenn sie geladen werden. Wenn Sie Stile zuerst hinzufügen, wird das unnötige Neurendern verhindert, das auftritt, wenn ein Element nach dem ersten Rendern formatiert wird.

Eine Möglichkeit, Styles einzufügen, die Sie nie verwenden werden, ist die Verwendung von Inline-Styles im <head> Ihres Dokuments. Inline-Styles werden wahrscheinlich nie im Head verwendet, da die Stylesheets der User-Agents den Head standardmäßig ausblenden. Wenn Sie jedoch beispielsweise einen CSS-Editor ohne JavaScript erstellen möchten, um die benutzerdefinierten Elemente Ihrer Seite zu testen, können Sie den Head mit display: block sichtbar machen und dann alles im Head ausblenden. Mit einem Inline-Attribut style können Sie dann einen bearbeitbaren Style-Block sichtbar machen.

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

Sie können dem <style>-Element Inline-Stile hinzufügen.

Mit dem link-Element werden Beziehungen zwischen dem HTML-Dokument und externen Ressourcen erstellt. Einige dieser Ressourcen können heruntergeladen werden, andere sind nur informativ. Der Beziehungstyp wird durch den Wert des rel-Attributs definiert. Es gibt 25 verfügbare Werte für das rel-Attribut, die mit <link>, <a> und <area> oder <form> verwendet werden können. Einige können mit allen verwendet werden. Es ist besser, die Metainformationen im Head und die Leistungsdaten im <body> anzugeben.

Sie fügen jetzt drei weitere Typen in den Header ein: icon, alternate und canonical. Im nächsten Modul fügen Sie einen vierten Typ hinzu: rel="manifest".

Favicon

Verwenden Sie das <link>-Tag mit rel="icon", um das Favicon für Ihr Dokument anzugeben. Ein Favicon ist ein kleines Symbol, das auf dem Browser-Tab angezeigt wird, in der Regel links neben dem Dokumenttitel. Wenn Tabs verkleinert werden, kann es sein, dass der Titel verschwindet, das Symbol aber weiterhin sichtbar ist. Die meisten Favicons sind Unternehmens- oder Anwendungslogos.

Wenn Sie kein Favicon deklarieren, sucht der Browser im Stammverzeichnis der Website nach einer Datei mit dem Namen favicon.ico. Mit <link> können Sie einen anderen Dateinamen und Speicherort verwenden:

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/https/web.dev/images/mlwicon.png" />

Im vorherigen Code wird festgelegt, dass mlwicon.png als Symbol für Szenarien verwendet werden soll, in denen eine Größe von 16, 32 oder 48 px sinnvoll ist. Für das Attribut „sizes“ kann der Wert any für skalierbare Symbole oder eine durch Leerzeichen getrennte Liste von quadratischen widthXheight-Werten verwendet werden. Dabei sind die Breiten- und Höhenwerte 16, 32, 48 oder größer in dieser geometrischen Folge. Die Pixeleinheit wird weggelassen und das „X“ ist unabhängig von der Groß- und Kleinschreibung.

<link rel="apple-touch-icon" sizes="180x180" href="/https/web.dev/images/mlwicon.png" />
<link rel="mask-icon" href="/https/web.dev/images/mlwicon.svg" color="#226DAA" />

Es gibt zwei spezielle, nicht standardmäßige Arten von Symbolen für den Safari-Browser: apple-touch-icon für iOS-Geräte und mask-icon für angepinnte Tabs unter macOS. apple-touch-icon wird nur angewendet, wenn der Nutzer eine Website dem Startbildschirm hinzufügt. Sie können mehrere Symbole mit unterschiedlichen sizes für verschiedene Geräte angeben. mask-icon wird nur verwendet, wenn der Nutzer den Tab in der Desktopversion von Safari anpinnt. Das Symbol selbst sollte ein monochromes SVG sein und das Attribut color füllt das Symbol mit der erforderlichen Farbe.

Sie können zwar mit <link> für jede Seite oder sogar für jeden Seitenaufruf ein völlig anderes Bild definieren, sollten dies aber nicht tun. Verwenden Sie ein einzelnes Bild, um für Konsistenz und eine gute Nutzererfahrung zu sorgen. Google verwendet für jede seiner Anwendungen unterschiedliche Favicons, z. B. ein E‑Mail-Symbol und ein Kalendersymbol. Alle Google-Symbole verwenden jedoch dasselbe Farbschema. Anhand des Symbols können Sie genau erkennen, woher der Inhalt eines geöffneten Tabs stammt.

Alternative Versionen der Website

Verwenden Sie den Wert alternate des Attributs rel, um Übersetzungen oder alternative Darstellungen der Website zu kennzeichnen.

Angenommen, wir haben Versionen der Website, die ins Französische und Brasilianische Portugiesische übersetzt wurden:

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

Wenn Sie alternate für eine Übersetzung verwenden, muss das Attribut hreflang festgelegt werden.

Der alternative Wert ist nicht nur für Übersetzungen vorgesehen. Mit dem Attribut type kann beispielsweise der alternative URI für einen RSS-Feed definiert werden, wenn das Attribut type auf application/rss+xml oder application/atom+xml festgelegt ist.

Link zu einer fiktiven PDF-Version der Website:

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

Wenn der rel-Wert alternate stylesheet ist, wird ein alternatives Stylesheet definiert und das Attribut title muss festgelegt werden, um diesem alternativen Stil einen Namen zu geben.

Canonical

Wenn Sie mehrere Übersetzungen oder Versionen des Machine Learning Workshop erstellen, können Suchmaschinen die maßgebliche Quelle möglicherweise nicht identifizieren. Verwenden Sie rel="canonical", um die bevorzugte URL für die Website oder Anwendung anzugeben.

Fügen Sie die kanonische URL auf allen übersetzten Seiten und auf der Startseite ein, um unsere bevorzugte URL anzugeben:

<link rel="canonical" href="https://www.machinelearning.com" />

Der kanonische Link rel="canonical" wird am häufigsten für Cross-Posting mit Publikationen und Blogging-Plattformen verwendet, um die ursprüngliche Quelle anzugeben. Wenn eine Website Inhalte syndiziert, sollte sie den kanonischen Link zur Originalquelle enthalten.

Scripts

Das <script>-Tag enthält Skripts. Der Standardtyp ist JavaScript. Wenn Sie eine andere Skriptsprache verwenden, fügen Sie das Attribut type mit dem MIME-Typ oder type="module" für ein JavaScript-Modul ein. Nur JavaScript und JavaScript-Module werden geparst und ausgeführt.

Mit den <script>-Tags können Sie Ihren Code kapseln oder eine externe Datei herunterladen. In MLW gibt es keine externe Scripting-Datei, da Sie entgegen der landläufigen Meinung kein JavaScript für eine funktionierende Website benötigen. Dies ist ein HTML-Lernpfad, kein JavaScript-Lernpfad.

Sie fügen später ein wenig JavaScript ein, um ein Easter Egg zu erstellen:

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

Mit diesem Snippet wird ein Event-Handler für ein Element mit der ID switch erstellt. In JavaScript sollten Sie nicht auf ein Element verweisen, bevor es vorhanden ist. Da switch noch nicht vorhanden ist, wird der Event-Handler noch nicht berücksichtigt.

Wenn wir das Lichtschalterelement hinzufügen, fügen wir das <script> unten im <body> und nicht im <head> ein. Warum? Dafür gibt es zwei Gründe. Wir möchten sicherstellen, dass die Elemente vorhanden sind, bevor das Skript, das auf sie verweist, ausgeführt wird, da dieses Skript nicht auf einem DOMContentLoaded-Ereignis basiert. JavaScript ist nicht nur renderblockierend, sondern der Browser stoppt auch das Herunterladen aller Assets, wenn Skripts heruntergeladen werden. Das Herunterladen anderer Assets wird erst fortgesetzt, wenn die Ausführung des JavaScript abgeschlossen ist. Aus diesem Grund finden Sie JavaScript-Anfragen oft am Ende des Dokuments und nicht im Head.

Es gibt zwei Attribute, mit denen sich die Blockierung durch das Herunterladen und Ausführen von JavaScript reduzieren lässt: defer und async. Bei defer wird das HTML-Rendering während des Downloads nicht blockiert und das JavaScript wird erst ausgeführt, nachdem das Dokument gerendert wurde. Mit async wird das Rendering auch während des Downloads nicht blockiert. Sobald das Skript heruntergeladen wurde, wird das Rendering jedoch pausiert, während das JavaScript ausgeführt wird.

Laden bei Verwendung von „async“ und „defer“.

Wenn Sie das JavaScript von MLW in eine externe Datei einfügen möchten, können Sie Folgendes schreiben:

<script src="js/switch.js" defer></script>

Wenn Sie das Attribut defer hinzufügen, wird die Ausführung des Skripts aufgeschoben, bis alles gerendert wurde. So wird verhindert, dass das Skript die Leistung beeinträchtigt. Die Attribute async und defer sind nur für externe Skripts gültig.

Basis

Ein weiteres Element, das nur in <head>. zu finden ist, ist das selten verwendete <base>-Element. Damit lassen sich eine Standardlink-URL und ein Standardziel festlegen. Das Attribut href definiert die Basis-URL für alle relativen Links.

Mit dem Attribut target, das sowohl für <base> als auch für Links und Formulare gültig ist, wird festgelegt, wo diese Links geöffnet werden sollen. Mit dem Standardwert _self werden verknüpfte Dateien im selben Kontext wie das aktuelle Dokument geöffnet. Zu den weiteren Optionen gehören _blank, mit dem jeder Link in einem neuen Fenster geöffnet wird, _parent des aktuellen Inhalts, das möglicherweise mit „self“ identisch ist, wenn der Öffner kein iFrame ist, oder _top, das im selben Browsertab, aber ohne Kontext geöffnet wird, sodass der gesamte Tab genutzt wird.

Die meisten Entwickler fügen das Attribut target den wenigen Links oder Formularen hinzu, die in einem neuen Fenster geöffnet werden sollen, anstatt <base> zu verwenden.

<base target="_top" href="https://machinelearningworkshop.com" />

Wenn sich unsere Website in einem iFrame auf einer Website wie Yummly befindet, würde das <base>-Element dazu führen, dass beim Klicken auf einen Link in unserem Dokument der Link außerhalb des iFrames geladen wird und das gesamte Browserfenster einnimmt.

Einer der Nachteile dieses Elements ist, dass Ankerlinks mit <base> aufgelöst werden. Durch <base> wird der Link <a href="#ref"> in <a target="_top" href="https://machinelearningworkshop.com#ref"> umgewandelt. Dadurch wird eine HTTP-Anfrage an die Basis-URL mit dem angehängten Fragment ausgelöst.

Einige weitere Hinweise zu <base>:

  • Ein Dokument kann nur ein <base>-Element enthalten.
  • Sie sollte vor allen relativen URLs stehen, einschließlich möglicher Skript- oder Stylesheet-Referenzen.

Der Code sieht jetzt so aus:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" type="image/png" href="/https/web.dev/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

HTML-Kommentare

Das Script ist in spitze Klammern, Bindestriche und ein Ausrufezeichen eingeschlossen. So wird HTML auskommentiert. Alles zwischen <!-- und --> ist nicht sichtbar und wird nicht geparst. Sie können HTML-Kommentare überall auf der Seite platzieren, außer in Script- oder Style-Blöcken. Dort sollten Sie JavaScript- und CSS-Kommentare verwenden.

Sie haben die Grundlagen für die <head> kennengelernt, möchten aber mehr als nur die Grundlagen wissen. In den nächsten Abschnitten erfahren Sie mehr über Meta-Tags und darüber, wie Sie steuern können, was angezeigt wird, wenn Ihre Website in sozialen Medien verlinkt wird.

Dein Wissen wird getestet

Testen Sie Ihr Wissen zur Dokumentstruktur.

Wie wird die Sprache des Dokuments erkannt?

Fügen Sie dem HTML-Tag das Attribut language hinzu.
Bitte versuchen Sie es noch einmal.
Fügen Sie dem HTML-Tag das Attribut lang hinzu.
Richtig!
Add the <lang>-Element zur <head>.
Bitte versuchen Sie es noch einmal.

Wählen Sie Elemente aus, die in <head> enthalten sein können.

<p>
Bitte versuchen Sie es noch einmal.
<title>
Richtig!
<meta>
Richtig!
Zurück
HTML-Übersicht
Weiter
Metadata