1. MDN Web Docs
  2. Schreibrichtlinien
  3. Seitenstrukturen
  4. Seitentypen

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Seitentypen

Es gibt eine Reihe von Seitentypen, die auf MDN wiederholt verwendet werden. Dieser Artikel beschreibt diese Seitentypen, ihren Zweck und gibt Beispiele für jeden Typ sowie Vorlagen zur Erstellung einer neuen Seite.

Es gibt drei große Kategorien von Seitentypen auf MDN, obwohl einige Seitentypen in mehr als eine Kategorie fallen.

  • Referenzseiten beschreiben die Details von etwas und sind nach der Struktur des beschriebenen Objekts organisiert.
  • Leitfadenseiten beschreiben, wie man etwas tut oder benutzt und sind basierend auf den Zielen des Lesers organisiert.
  • Navigationsseiten existieren hauptsächlich, um Links zu anderen Seiten bereitzustellen, meist zu verwandten Themen.

Erstellen einer neuen Seite

Das Hinzufügen eines neuen Dokuments ist relativ einfach, besonders wenn Sie mit dem Kopieren einer index.md Datei aus einem ähnlichen Thema beginnen können. Es gibt ein paar Dinge, die Sie beachten sollten:

  • Dokumente werden in Markdown in einer index.md Datei geschrieben.
  • Wenn Sie beispielsweise ein neues Dokument für einen HTTP-Header namens foo erstellen, erstellen Sie einen neuen Ordner unter files/en-us/web/http/reference/headers/foo und legen Sie die Markdown-Datei in diesem Ordner ab (files/en-us/web/http/reference/headers/foo/index.md).
  • Eine index.md Datei eines Dokuments muss mit einem Front-Matter beginnen, das den title, slug und meistens page-type definiert. Es könnte hilfreich sein, sich auf das Front-Matter in einem ähnlichen Dokument zu beziehen.

Anleitung zur Verwendung der Vorlagen

Wenn Sie eine neue Seite erstellen, können Sie sicherstellen, dass Sie die richtige Seitenstruktur/Inhalte verwendet haben, indem Sie sich auf eine unserer Seitentemplates beziehen — siehe die untenstehenden Abschnitte. Sie können den genauen Quellcode jeder Vorlage finden (falls Sie ihn kopieren möchten), indem Sie dem Link "Source on GitHub" am Ende jeder Vorlage folgen. Diese Seitentemplates machen als veröffentlichte Seiten wenig Sinn, aber wenn Sie ihren Quellcode betrachten, werden Sie feststellen, dass sie viele hilfreiche Kommentare, Platzhalter und Hinweise enthalten, die erläutern, wie die fehlenden Informationen ergänzt und Ihre Seite erstellt werden.

Am Anfang jeder Vorlage finden Sie einen Abschnitt mit dem Titel Vor der Veröffentlichung entfernen — dieser enthält Informationen darüber, wie der Seitentitel, der Slug, das Seitenleistenmenü und die Tags ausgefüllt werden sollen (z. B. Informationen, die eigentlich nicht im Hauptteil des Artikels erscheinen). Sie müssen diesen Abschnitt löschen, nachdem Sie die Anweisungen darin befolgt haben, bevor die Seite als fertig betrachtet werden kann.

Alte Seitenlayouts

Manchmal stoßen Sie auf alte Referenzseiten, die sich merklich von den hier vorgestellten Vorlagen unterscheiden. Beispielsweise hatten alte Schnittstellenseiten alle Details der Mitglieder der Schnittstelle auf einer einzigen Seite, und es existierten keine separaten Seiten für Methoden/Eigenschaften/Konstruktoren/Ereignislistener.

Wenn Sie auf eine alte Sammlung von Seiten stoßen, würden wir uns freuen, wenn Sie sie in den neuen Stil aktualisieren! Wir wissen jedoch zu schätzen, dass dies eine Menge Arbeit sein könnte. Wenn die zu aktualisierende Information nicht zu umfangreich ist und Sie etwas Freizeit haben, versuchen Sie gerne, sie in den neuen Stil zu aktualisieren.

Wenn die Arbeit umfangreicher ist, sollten Sie einige Faktoren berücksichtigen, wenn Sie die Arbeit priorisieren:

  • Wie veraltet sind die Informationen?
  • Wie niedrig ist die Qualität der Informationen?
  • Wie populär ist das Feature? Wie gefragt sind die Informationen?

Wenn Sie ein Team zusammenstellen möchten, um an einem Update zu arbeiten, oder wenn Sie einfach nur einen Inhalt melden oder diskutieren möchten, der ein Update benötigt, zögern Sie nicht, ein Inhaltsproblem zu melden oder uns um Hilfe zu bitten.

Der Seitentyp-Feldschlüssel im Front Matter

Wir haben einen Front Matter Key page-type definiert, um den Typ der MDN-Seiten klar zu kennzeichnen. Die unten verlinkten Vorlagen geben an, welche page-type Werte Sie für jeden Seitentyp festlegen sollten.

Für die vollständige Liste der Seitentypen siehe Der Seitentyp-Feldschlüssel im Front Matter.

Seitentemplates

Unten finden Sie Beispiele für die verschiedenen Seiten, die Sie auf MDN finden können sowie Vorlagen, die benutzt werden können, um neue Inhalte basierend auf dem Ihnen vorliegenden Typ zu erstellen, einschließlich der folgenden Seiten:

Jeder Abschnitt enthält Links zu Live-Beispielseiten für diesen Seitentyp.

API-Landingpage

Eine API-Landingpage bietet eine Übersicht darüber, was eine bestimmte API tut, sowie Links zur Dokumentation für jede der Schnittstellen, globalen Funktionen usw., die von der API angeboten werden. Sie verlinkt nicht direkt zu spezifischen Methoden oder Eigenschaften innerhalb der Klassen der API, außer im Kontext des Übersichts-Texts. Sie ist primär eine Navigationsseite, fungiert jedoch auch als Referenzseite für die API.

Es gibt einige Fälle, in denen mehrere APIs existieren, die getrennt und in ihren eigenen Spezifikationen definiert sind, jedoch eng verwandt sind und daher auf einer einzigen API-Landingpage behandelt werden sollten. Zum Beispiel deckt die Generic Sensor API allgemeine Sensorangelegenheiten ab, spezifischere Angelegenheiten werden jedoch in anderen APIs behandelt, wie der Ambient Light Sensor oder der Motion Sensor. In solchen Fällen sind viele der hochrangigen Konzepte die gleichen, sodass es keinen Sinn macht, diese über mehrere Landingpages zu wiederholen. In einem solchen Fall würde es in Bezug auf Wiederholung und Auffindbarkeit mehr Sinn machen, sie alle unter einer einzigen "Websensoren"-Landingpage zusammenzufassen.

Beispiel

Vorlagen

API-Referenzseite

Hinweis: Auch bekannt als Interface-Landingpage.

Eine API-Referenzseite listet alle Methoden, Eigenschaften, Ereignisse usw. auf, die Mitglieder einer bestimmten Schnittstelle oder Klasse sind. Sie bietet eine Übersicht darüber, wofür die Klasse oder Schnittstelle verwendet wird, und gibt Links zur Dokumentation für jedes dieser Mitglieder. Sie ist detaillierter als eine API-Landingpage, die typischerweise auf mehrere API-Referenzseiten verlinkt.

Beispiel

Vorlagen

API-Referenzunterseite

Eine API-Referenzunterseite ist untergeordnet zu einer API-Referenzseite. Sie dokumentiert ein einzelnes Mitglied einer Schnittstelle detailliert.

Beispiele

Vorlagen

HTML-Element-Referenzseite

Eine HTML-Referenzseite listet alle Attribute auf, die einem HTML-Element zur Verfügung stehen, erklärt den Zweck und die Verwendung des Elements und bietet Beispiele, Informationen zur Browser-Kompatibilität und andere wichtige Daten.

Beispiel

Vorlagen

HTML-Attribut-Referenzseite

Eine HTML-Attributseite listet alle Werte auf, die einem HTML-Attribut zur Verfügung stehen, erklärt den Zweck und die Anwendungsfälle des Attributs und bietet Beispiele, Informationen zur Browser-Kompatibilität und andere wichtige Daten.

Hinweis: Element-spezifische Attribute (z.B. placeholder für <input>) benötigen keine separate Seite, wenn die Attribute ausreichend innerhalb der Referenzseite des übergeordneten Elements behandelt werden können (z.B. sollte das placeholder Attribut auf der Seite des <input> Elements behandelt werden und nicht als eigenständige Seite).

Beispiel

Vorlagen

SVG-Element-Referenzseite

Eine SVG-Referenzseite listet alle Attribute auf, die einem SVG-Element zur Verfügung stehen, erklärt den Zweck und die Verwendung des Elements und bietet Beispiele, Informationen zur Browser-Kompatibilität und andere wichtige Daten.

Beispiel

Vorlagen

CSS-Modul-Landingpage

Jedes CSS-Modul repräsentiert eine CSS-Spezifikation, die Unterstützung für bestimmte Funktionen und Implementierungen in CSS bietet. Zum Beispiel repräsentiert das CSS-Boxmodell Modul die Spezifikation, die die Rand- und Abstands-Eigenschaften beschreibt, die es Ihnen ermöglichen, Abstand in und um ein CSS-Box zu erstellen.

Eine CSS-Modul-Landingpage bietet einen Überblick über die Funktionen, die das Modul bereitstellt, und listet alle Eigenschaften, Datentypen, CSS-Funktionen usw. auf, die vom Modul angeboten werden. Wenn möglich, bietet die CSS-Modul-Landingpage eine schnelle Demonstration dessen, was mit den Eigenschaften des Moduls erreicht werden kann, durch ein interaktives Beispiel. Die Modul-Landingpage dient hauptsächlich als Navigationsseite, fungiert jedoch auch als Referenzseite für das Modul.

Einige verwandte Eigenschaften und Funktionen, die in andere Module gehören, aber eng mit der Funktionalität verbunden sind, die das von Ihnen dokumentierte Modul bietet, können auch in einem Verwandte Konzepte-Abschnitt behandelt werden. Beispielsweise werden der <easing-function> Datentyp und die prefers-reduced-motion Media-Query nicht im CSS Animationsmodul behandelt, aber da sie eng mit CSS-Animationen verbunden sind, ist es eine gute Idee, sie im Verwandte Konzepte Abschnitt der CSS Animations-Modul-Landingpage hervorzuheben.

Beispiele

Vorlagen

CSS-Feature-Referenzseite

Eine CSS-Referenzseite listet alle verfügbaren Syntax für ein CSS-Feature wie einen Selektor oder eine Eigenschaft auf und erklärt den Zweck und die Verwendung des Features. Es bietet auch Beispiele, Informationen zur Browser-Kompatibilität und andere wichtige Daten.

Beispiele

Vorlagen

HTTP-Header-Referenzseite

Eine HTTP-Header-Referenzseite listet alle verfügbaren Direktiven auf, die ein HTTP-Header enthalten kann, und erklärt den Zweck und die Verwendung des Headers. Sie bietet auch Beispiele, Informationen zur Browser-Kompatibilität und andere wichtige Erklärungen.

Beispiel

Vorlagen

ARIA-Referenzseite

Eine ARIA-Referenzseite beschreibt eine Rolle oder Attribut, die Wege definiert, um Webinhalte und Webanwendungen für Menschen mit Behinderungen zugänglicher zu machen.

Beispiele

Vorlagen

Konzeptuelle Seite

Eine konzeptuelle Seite ist eine Leitfaden Seite, die etwas erklärt oder lehrt. Generell, wenn eine Seite hauptsächlich aus Prosa besteht und nicht in einen anderen Seitentyp fällt, ist sie wahrscheinlich eine konzeptuelle Seite. Eine ausführliche Diskussion eines Themas kann über mehrere konzeptuelle Seiten verteilt sein und mit Weiter und Zurück Makros verlinkt werden.

Beispiele

Glossarseite

Eine Glossarseite enthält eine kurze Erklärung eines Begriffs, Themas oder Konzepts. Der erste Absatz sollte eine einfache, eigenständige Beschreibung des Begriffs sein, die nicht mehr als ein paar Sätze umfasst. Dies kann gefolgt werden von Links zu weiterführenden Informationen im Abschnitt Siehe auch. Wenn die Seite mehr als eine Bildschirmhöhe umfasst, ist sie zu lang und sollte in eine konzeptuelle Seite umgewandelt werden. Siehe Wie man einen neuen Eintrag im Glossar schreibt und referenziert für weitere Details.

Beispiele

Vorlagen

Landingpage

Eine Landingpage dient als eine Art Menü für ihre Unterseiten und ist daher primär eine Navigationsseite. Ein Landingpage-Layout wird typischerweise für die Hauptseite eines Thementrees verwendet. Sie beginnt mit einer kurzen Zusammenfassung des Themas und präsentiert dann eine strukturierte Liste von Links zu ihren Unterseiten und optional weiteres Material, das für den Leser nützlich sein könnte.

Die Liste der Unterseiten kann automatisch mit der SubpagesWithSummaries Vorlage generiert werden. In komplexeren Fällen muss die Liste jedoch möglicherweise manuell erstellt (und gepflegt) werden.

Lerne-Webentwicklung-Seiten

Der Lerne-Webentwicklung Abschnitt von MDN richtet sich speziell an Personen, die die grundlegenden Grundlagen der Webentwicklung erlernen, und erfordert daher einen anderen Ansatz als der Rest der MDN-Inhalte. Sie finden weitere Richtlinien unter Lerne-Webentwicklung-Schreibrichtlinien.

Es gibt nur wenige Seitentypen innerhalb des Bereichs Lerne-Webentwicklung:

Modulgruppen-Landingpage, zum Beispiel Kernlernmodule

Diese enthalten einen Einführungstext, einen Abschnitt mit den Voraussetzungen, die Sie haben sollten, bevor Sie mit der Modulgruppe beginnen, und eine Liste der Module, gefolgt von einer optionalen Liste von "Siehe auch" Links.

Modul-Landingpage, zum Beispiel Inhalte mit HTML strukturieren

Diese enthalten einen Einführungstext, einen Abschnitt mit den Voraussetzungen, die Sie haben sollten, bevor Sie mit dem Modul beginnen, und eine Liste der enthaltenen Tutorials, gefolgt von einer optionalen Liste von "Zusätzlichen Tutorials", die zwar verwandt sind, aber nicht Teil des zentralen Lernpfades sind, und einer optionalen Liste von "Siehe auch" Links.

Tutorialseite, zum Beispiel Grundsätzliche HTML-Syntax

Die Struktur eines Lern-Tutorials ist nicht streng, aber es muss eine praxisbezogene Lernerfahrung bieten (siehe Lerne-Webentwicklung-Schreibrichtlinien > Ansatz), es muss eine Reihe von "Voraussetzungen" und "Lernzielen" haben, die oben aufgeführt sind, und der Inhalt muss die angegebenen Lernziele lehren.

Beispiele

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden