HTML-Dokumente enthalten eine Dokumenttypdeklaration und das <html>-Stammelement. Im Element <html> sind der Dokumentkopf und der Dokumenttext eingebettet. Auch wenn der Kopf des Dokuments für den sehenden Besucher nicht sichtbar ist, ist es wichtig, damit Ihre Website funktioniert. Sie enthält alle Meta-Informationen, einschließlich Informationen für Suchmaschinen und soziale Medien, Symbole für den Browsertab und die Verknüpfung für den mobilen Startbildschirm sowie das Verhalten und die Darstellung Ihrer Inhalte. In diesem Abschnitt lernen Sie die Komponenten kennen, die zwar nicht sichtbar, aber auf fast jeder Webseite vorhanden sind.
Um die Website von MachineLearningWorkshop.com (MLW) zu erstellen, fügen Sie zunächst die Komponenten hinzu, die für jede Webseite unerlässlich sind: den Dokumenttyp, die menschliche Sprache des Inhalts, den Zeichensatz und natürlich den Titel oder Namen der Website oder Anwendung.
Zu jedem HTML-Dokument hinzufügen
Es gibt mehrere Funktionen, die für jede einzelne Webseite unerlässlich sind. Wenn diese Elemente fehlen, rendern Browser trotzdem Inhalte, schließen sie aber ein. Und zwar immer.
<!DOCTYPE html>
Das Erste in jedem HTML-Dokument ist die Präambel. Für HTML benötigen Sie lediglich <!DOCTYPE html>. Dies mag wie ein HTML-Element aussehen, ist es aber nicht. Es ist eine spezielle Art von Knoten namens "doctype". Der DOCTYPE teilt dem Browser mit, dass er den Standardmodus verwenden soll. Wird er weggelassen, wird im Browser ein anderer Renderingmodus verwendet, der als Quirks-Modus bezeichnet wird. Durch das Einschließen des DOCTYPE-Elements kannst du den Quirks-Modus vermeiden.
<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 bis auf den Doctype im HTML-Dokument. Bei Auslassung wird dies impliziert, es ist jedoch wichtig, es anzugeben, da dies das Element ist, für das die Sprache des Dokumentinhalts deklariert wird.
Content-Language
Das Sprachattribut lang, das dem <html>-Tag hinzugefügt wird, definiert die Hauptsprache des Dokuments. Der Wert des lang-Attributs ist ein aus zwei oder drei Buchstaben bestehender ISO-Sprachcode, gefolgt von der Region. Die Region ist optional, wird aber empfohlen, da die Sprache je nach Region stark variieren kann. Zum Beispiel unterscheidet sich Französisch in Kanada (fr-CA) stark von Burkina Faso (fr-BF). Durch diese Spracherklärung können Screenreader, Suchmaschinen und Übersetzungsdienste die Dokumentsprache kennen.
Das Attribut lang ist nicht auf das <html>-Tag beschränkt. Wenn auf der Seite Text in einer anderen Sprache als der Hauptsprache des Dokuments vorliegt, sollte das Attribut lang verwendet werden, um Ausnahmen von der Hauptsprache im Dokument zu identifizieren. Genau wie bei der Eingabe im Head hat das Attribut lang im Text keinen visuellen Effekt. Es wird lediglich Semantik hinzugefügt, damit Hilfstechnologien und automatisierte Dienste die Sprache der betroffenen Inhalte erkennen können.
Das Attribut kann nicht nur die Sprache für das Dokument und Ausnahmen von dieser Basissprache festlegen, sondern auch in CSS-Selektoren verwendet werden. <span lang="fr-fr">Ceci n'est pas une pipe.</span> kann über die Attribut- und Sprachauswahl [lang|="fr"] und :lang(fr) ausgewählt werden.
<head>
Verschachtelt zwischen dem öffnenden und dem schließenden <html>-Tag finden wir die beiden untergeordneten Tags <head> und <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
Der <head> (Dokumentmetadaten-Header) enthält alle Metadaten für eine Website oder Anwendung. Der Textkörper enthält den sichtbaren Inhalt. Der Rest dieses Abschnitts konzentriert sich auf die Komponenten, die im öffnenden und schließenden <head></head> verschachtelt sind.
Erforderliche Komponenten im <head>
Die Metadaten des Dokuments, einschließlich Dokumenttitel, Zeichensatz, Einstellungen für den Darstellungsbereich, Beschreibung, Basis-URL, Stylesheet-Links und Symbole, finden Sie im <head>-Element. Auch wenn Sie nicht alle diese Funktionen benötigen, sollten Sie immer die Einstellungen für den Zeichensatz, den Titel und den Darstellungsbereich angeben.
Zeichencodierung
Das allererste Element in <head> sollte die Zeichencodierungsdeklaration charset sein. Es steht vor dem Titel, um sicherzustellen, dass der Browser die Zeichen in diesem Titel und alle Zeichen im restlichen Dokument rendern kann.
Die Standardcodierung ist in den meisten Browsern windows-1252, abhängig von der Sprache. Sie sollten jedoch UTF-8 verwenden, da damit die Ein- bis Vier-Byte-Codierung aller Zeichen ermöglicht wird, auch denen, von denen Sie nicht einmal wussten, dass sie existieren. Außerdem ist dies der für HTML5 erforderliche Codierungstyp.
Um die Zeichencodierung auf UTF-8 festzulegen, fügen Sie Folgendes hinzu:
<meta charset="utf-8" />
Wenn du UTF-8 angibst (Groß-/Kleinschreibung wird nicht berücksichtigt), kannst du sogar Emojis in deinen Titel einfügen. Das ist aber nicht erlaubt.
Die Zeichencodierung wird für alle Elemente im Dokument übernommen, auch für <style> und <script>. Diese kleine Deklaration bedeutet, dass Sie Emojis in Klassennamen und die selectorAPI einfügen können. Auch hier sollten Sie dies nicht tun. Wenn Sie Emojis verwenden, achten Sie darauf, sie so zu verwenden, dass die Nutzerfreundlichkeit verbessert wird, ohne die Barrierefreiheit zu beeinträchtigen.
Dokumenttitel
Ihre Startseite und alle zusätzlichen Seiten müssen einen eindeutigen Titel haben. Der Inhalt des Dokumenttitels, d. h. der Text zwischen dem öffnenden und dem schließenden <title>-Tag, wird auf dem Browsertab, in der Liste der geöffneten Fenster, im Verlauf, in den Suchergebnissen und auf Social-Media-Karten angezeigt, sofern dies nicht mit <meta>-Tags anders definiert ist.
<title>Machine Learning Workshop</title>
Metadaten des Darstellungsbereichs
Ein weiteres wichtiges Meta-Tag ist das Meta-Tag viewport. Dieses trägt dazu bei, dass die Website schneller reagiert und Inhalte unabhängig von der Breite des Darstellungsbereichs standardmäßig gut gerendert werden können. Das Meta-Tag für den Darstellungsbereich gibt es zwar schon seit Juni 2007, als das erste iPhone auf den Markt kam, aber erst vor Kurzem in einer Spezifikation dokumentiert. Dies wird auf jeden Fall empfohlen, da es die Steuerung der Größe und Skalierung eines Darstellungsbereichs ermöglicht und verhindert, dass der Inhalt der Website so verkleinert wird, dass er eine 960-Pixel-Website auf einen 320-Pixel-Bildschirm passt.
<meta name="viewport" content="width=device-width" />
Der vorherige Code bedeutet, dass „die Website responsiv gemacht wird, indem die Breite des Inhalts der Breite des Bildschirms entspricht“. Neben width können Sie den Zoom und die Skalierbarkeit festlegen, aber beide sind standardmäßig auf barrierefreie Werte eingestellt. Wenn du deine Inhalte anstößig aussprechen möchtest, kannst du Folgendes angeben:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Der Darstellungsbereich ist Teil der Lighthouse-Barrierefreiheitsprüfung. Ihre Website wird bestanden, wenn sie skalierbar ist und keine maximale Größe festgelegt ist.
Bisher lautet der Überblick für unsere HTML-Datei:
<!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
In der <head> steckt noch viel mehr. Alle Metadaten. Die meisten Elemente, die du in <head> findest, werden hier behandelt. Es fehlen nur noch wenige <meta>-Optionen für das nächste Kapitel.
Sie haben den Metazeichensatz und den Dokumenttitel gesehen, aber es gibt noch viel mehr Metadaten außerhalb der <meta>-Tags, die enthalten sein sollten.
CSS
In <head> fügen Sie Stile für Ihren HTML-Code ein. Es gibt einen Lernpfad speziell für CSS, wenn Sie mehr über Stile erfahren möchten, aber wissen müssen, wie Sie sie in Ihre HTML-Dokumente einbinden können.
Es gibt drei Möglichkeiten, CSS einzubinden: <link>, <style> und das Attribut style.
Es gibt zwei Möglichkeiten, Stile in Ihre HTML-Datei einzufügen: Binden Sie eine externe Ressource ein. Verwenden Sie dazu ein <link>-Element, bei dem das rel-Attribut auf stylesheet gesetzt ist, oder indem Sie CSS direkt in die Kopfzeile Ihres Dokuments in die öffnenden und schließenden <style>-Tags einfügen.
Das <link>-Tag ist die bevorzugte Methode zum Einbinden von Stylesheets. Die Verknüpfung einzelner oder mehrerer externer Stylesheets ist sowohl für die Entwicklererfahrung als auch für die Websiteleistung gut: CSS wird an einem Ort verwaltet, anstatt überall verteilt zu sein, und Browser können die externe Datei im Cache speichern, sodass sie nicht bei jeder Seitennavigation erneut heruntergeladen werden muss.
Die Syntax lautet <link rel="stylesheet" href="styles.css">, wobei „styles.css“ die URL Ihres Stylesheets ist. Sie sehen oft type="text/css". Nicht unbedingt! Wenn Sie Stile einschließen, die nicht in CSS geschrieben sind, ist type erforderlich. Da es aber keinen anderen Typ gibt, wird dieses Attribut nicht benötigt. Das Attribut rel definiert die Beziehung, in diesem Fall stylesheet. Andernfalls wird Ihr Preisvergleichsportal nicht verknüpft.
Demnächst lernen Sie weitere rel-Werte kennen, aber sehen wir uns zuerst andere Möglichkeiten zum Einbinden von CSS an.
Wenn Sie Ihre externen Style-Sheet-Stile innerhalb einer Kaskadenebene platzieren möchten, aber nicht berechtigt sind, die CSS-Datei zu bearbeiten, um die Ebeneninformationen einzufügen, sollten Sie den CSS-Code mit @import in eine <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 außerhalb der Zeichensatzdeklaration sein.
Kaskadenebenen sind zwar noch relativ neu und Sie erkennen die @import möglicherweise nicht in einem Head-<style>, aber Sie werden häufig benutzerdefinierte Eigenschaften sehen, die in einem Head-Stilblock deklariert sind:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Stile, entweder über <link> oder <style> (oder beides), sollten in den Kopf eingefügt werden. Sie funktionieren, wenn sie im Textkörper des Dokuments enthalten sind, aber aus Leistungsgründen sollen Ihre Stile im Kopf hervorgehoben werden. Dies mag unlogisch klingen, da Sie vielleicht denken, dass Ihr Content zuerst geladen werden soll, tatsächlich aber der Browser weiß, wie die Inhalte nach dem Laden gerendert werden sollen. Wenn Sie Stile zuerst hinzufügen, vermeiden Sie eine unnötige Darstellung von Elementen, die auftreten, wenn ein Element nach der ersten Darstellung mit Stilen versehen wird.
Dann gibt es eine Möglichkeit, Stile einzubeziehen, die Sie nie im <head> Ihres Dokuments verwenden: Inline-Stile. Sie werden wahrscheinlich niemals Inline-Stile im head-Element verwenden, da der Head standardmäßig von den Stylesheets der User-Agents ausgeblendet wird. 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. Anschließend können Sie mit einem Inline-style-Attribut einen inhalts bearbeitbaren Stilblock sichtbar machen.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Du kannst in der <style> zwar Inline-Styles hinzufügen, die <style> macht aber noch mehr Spaß.style Ich schweife ab.
Andere Verwendungen des <link>-Elements
Das link-Element wird verwendet, um Beziehungen zwischen dem HTML-Dokument und externen Ressourcen herzustellen. Einige dieser Ressourcen können heruntergeladen werden, andere dienen nur zur Information. Die Art der Beziehung wird durch den Wert des Attributs rel definiert. Derzeit sind 25 Werte für das rel-Attribut verfügbar, die mit <link>, <a> und <area> oder <form> verwendet werden können. Einige davon können auch mit allen genutzt werden. Wir empfehlen, Metadaten mit Bezug auf Metainformationen im Header und solche mit Bezug zur Leistung in <body> aufzunehmen.
Sie fügen jetzt drei weitere Typen in Ihren Header ein: icon, alternate und canonical. (Im nächsten Modul beschäftigen wir uns mit dem vierten Typ rel="manifest").
Favicon
Verwenden Sie das <link>-Tag mit dem Attribut/Wert-Paar rel="icon", um das Favicon zu identifizieren, das für Ihr Dokument verwendet werden soll. Ein Favicon ist ein sehr kleines Symbol, das auf dem Browsertab angezeigt wird, in der Regel links neben dem Dokumenttitel. Wenn Sie eine unüberschaubare Anzahl von Tabs geöffnet haben, werden die Tabs verkleinert und der Titel verschwindet möglicherweise vollständig, das Symbol bleibt jedoch immer sichtbar. Die meisten Favicons sind Firmen- oder Anwendungslogos.
Wenn Sie kein Favicon angeben, sucht der Browser im obersten Verzeichnis (dem 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="/images/mlwicon.png" />
Der vorherige Code lautet: „Verwenden Sie das mlwicon.png als Symbol für Szenarien, in denen 16, 32 oder 48 Pixel sinnvoll sind.“ Das Größenattribut akzeptiert den Wert any für skalierbare Symbole oder eine durch Leerzeichen getrennte Liste von quadratischen widthXheight-Werten. Wenn die Werte für Breite und Höhe in dieser geometrischen Folge mindestens 16, 32, 48 oder größer sind, wird die Pixeleinheit weggelassen und bei X wird nicht zwischen Groß- und Kleinschreibung unterschieden.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Es gibt zwei spezielle 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 dem Startbildschirm eine Website hinzufügt. Du kannst mehrere Symbole mit unterschiedlichen sizes für verschiedene Geräte angeben. mask-icon wird nur verwendet, wenn der Nutzer den Tab in Safari auf dem Computer anpinnt: Das Symbol selbst sollte eine einfarbige SVG-Datei sein und das Attribut color füllt das Symbol mit der erforderlichen Farbe.
Sie können zwar <link> verwenden, um auf jeder Seite oder sogar bei jedem Seitenaufbau ein völlig anderes Bild zu definieren. Dies sollten Sie jedoch nicht tun. Verwenden Sie aus Gründen der Einheitlichkeit und einer guten User Experience ein einzelnes Bild! Twitter nutzt den blauen Vogel: Wenn Sie den blauen Vogel in Ihrem Browsertab sehen, wissen Sie, dass der Tab mit einer Twitter-Seite geöffnet ist, ohne auf den Tab zu klicken. Google verwendet für jede seiner Anwendungen unterschiedliche Favicons. Beispielsweise gibt es ein E-Mail-Symbol, ein Kalendersymbol. Alle Google-Symbole verwenden jedoch dasselbe Farbschema. Wie gesagt, Sie wissen genau, was der Inhalt eines geöffneten Tabs ist, ganz einfach anhand des Symbols.
Alternative Versionen der Website
Wir verwenden den alternate-Wert des rel-Attributs, um Übersetzungen oder alternative Darstellungen der Website anzugeben.
Nehmen wir an, wir haben Versionen der Website ins Französische und ins brasilianische Portugiesisch übersetzt:
<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 alternate für eine Übersetzung verwendet wird, muss das Attribut hreflang festgelegt werden.
Der alternative Wert ist für mehr als nur Übersetzungen gedacht. 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. Erstellen wir einen Link zu einer 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 von Machine Learning Workshop erstellen, wissen Suchmaschinen möglicherweise nicht genau, welche Version die maßgebliche Quelle ist. Gib dazu mithilfe von rel="canonical" die bevorzugte URL für die Website oder Anwendung an.
Gib die kanonische URL auf allen deinen übersetzten Seiten sowie auf der Startseite an und gib unsere bevorzugte URL an:
<link rel="canonical" href="https://www.machinelearning.com" />
Der kanonische Link rel="canonical" wird meistens für Cross-Posts mit Publikationen und Blogging-Plattformen verwendet, um die ursprüngliche Quelle zu nennen. Wenn eine Website Inhalte syndiziert, sollte sie den kanonischen Link zur Originalquelle enthalten.
Skripts
Mit dem Tag <script> werden Skripts eingebunden. Der Standardtyp ist JavaScript. Falls Sie eine andere Skriptsprache verwenden, fügen Sie das Attribut type mit dem MIME-Typ oder type="module" ein, wenn es sich um ein JavaScript-Modul handelt. Nur JavaScript- und JavaScript-Module werden geparst und ausgeführt.
Die <script>-Tags können verwendet werden, um den Code zu verkapseln oder eine externe Datei herunterzuladen. Im MLW gibt es keine externe Skriptdatei, da entgegen der allgemeinen Auffassung kein JavaScript für eine funktionsfähige Website benötigt wird. Außerdem handelt es sich hierbei um einen HTML-Lernpfad und nicht um einen JavaScript-Lernpfad.
Später fügen Sie etwas JavaScript-Code 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. Mit JavaScript möchten Sie nicht auf ein Element verweisen, bevor es existiert. Da er noch nicht vorhanden ist, werden wir ihn noch nicht aufnehmen. Wenn wir das Lichtschalterelement hinzufügen, fügen wir <script> am unteren Rand von <body> und nicht in <head> ein. Warum? Zwei Gründe. Da Elemente nicht auf einem DOMContentLoaded-Ereignis basieren, möchten wir sichergehen, dass die Elemente bereits vor dem Skript vorhanden sind, das darauf verweist. Außerdem blockiert JavaScript nicht nur das Rendering. Der Browser stoppt den Download aller Assets, wenn Skripts heruntergeladen werden, und setzt den Download weiterer Assets erst fort, wenn das JavaScript vollständig ausgeführt wurde. Aus diesem Grund finden Sie JavaScript-Anfragen häufig am Ende des Dokuments und nicht im Header.
Es gibt zwei Attribute, mit denen sich das Herunterladen und Ausführen von JavaScript-Code reduzieren lässt: defer und async. Mit defer wird das HTML-Rendering während des Downloads nicht blockiert. Das JavaScript wird erst ausgeführt, nachdem das Dokument vollständig gerendert wurde. Mit async wird das Rendering auch während des Downloads nicht blockiert, aber sobald das Skript den Download abgeschlossen hat, wird es angehalten, während JavaScript ausgeführt wird.
Um das JavaScript von MLW in eine externe Datei einzufügen, könnten Sie Folgendes schreiben:
<script src="js/switch.js" defer></script>
Wenn Sie das Attribut defer hinzufügen, wird die Ausführung des Scripts so lange aufgeschoben, bis alles gerendert wurde. So wird die Leistung des Scripts nicht beeinträchtigt. Die Attribute async und defer sind nur für externe Skripts gültig.
Base
Es gibt ein weiteres Element, das nur im <head>. zu finden ist. Es wird nur selten verwendet. Mit dem <base>-Element können Sie eine Standard-Link-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 der Standardeinstellung „_self“ werden verknüpfte Dateien im selben Kontext wie das aktuelle Dokument geöffnet. Weitere Optionen sind _blank, mit dem jeder Link in einem neuen Fenster geöffnet wird, die _parent des aktuellen Inhalts, die identisch mit „self“ sein kann, wenn der Öffnender kein iFrame ist, oder _top, die sich im selben Browsertab befindet, aber aus einem anderen Kontext herausgesprungen ist und den gesamten Tab einnimmt.
Die meisten Entwickler fügen das Attribut target den wenigen Links hinzu, die sie in einem neuen Fenster über die Links öffnen oder selbst ein Formular erstellen möchten, anstatt <base> zu verwenden.
<base target="_top" href="https://machinelearningworkshop.com" />
Wenn unsere Website in einem iFrame auf einer Website wie Yummly verschachtelt ist, würde das <base>-Element bedeuten, dass ein Nutzer auf einen Link in unserem Dokument klickt, wird der Link außerhalb des iFrames geladen und nimmt das gesamte Browserfenster ein.
Einer der Nachteil dieses Elements ist, dass Ankerlinks mit <base> aufgelöst werden. Die <base> wandelt den Link <a href="#ref"> effektiv in <a target="_top" href="https://machinelearningworkshop.com#ref"> um und löst eine HTTP-Anfrage an die Basis-URL mit dem angehängten Fragment aus.
Weitere Hinweise zu <base>: Es kann nur ein <base>-Element in einem Dokument geben. Dieses sollte vor der Verwendung relativer URLs stehen, einschließlich möglicher Skript- oder Stylesheet-Verweise.
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" src="css/styles.css" />
<link rel="icon" type="image/png" href="/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
Beachten Sie, dass das Skript von einigen spitzen Klammern, Bindestrichen und einem Knall umschlossen ist. So kommentieren Sie HTML-Elemente aus. Wir lassen das Skript so lange auskommentiert, bis wir den tatsächlichen Inhalt auf der Seite gefunden haben. Werte zwischen <!-- und --> sind nicht sichtbar und werden nicht geparst. HTML-Kommentare können an einer beliebigen Stelle auf der Seite platziert werden, einschließlich des Headers oder Textkörpers, mit Ausnahme von Skripts oder Stilblöcken, wo Sie JavaScript- bzw. CSS-Kommentare verwenden sollten.
Sie haben die Grundlagen der <head> behandelt, möchten aber noch mehr als nur die Grundlagen lernen. 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.
Wissen testen
Testen Sie Ihr Wissen über die Dokumentstruktur.
Woran erkennen Sie die Sprache des Dokuments?
language hinzu.lang hinzu.Add the <lang>-Element für <head> hinzu.Wählen Sie Elemente aus, die in <head> aufgenommen werden können.
<p><title><meta>