Page structures

Throughout MDN there are document structures that are used to provide consistent presentation of information in MDN articles. This page lists articles describing these structures so that you can modify page content appropriately for the documents you write, edit, or translate.

Banners and notices

Banners and notices are displayed in some pages, in particular API reference, in order to highlight important factors that will affect how the described content is used. For example, banners are used to highlight when a particular interface, method or property is deprecated, and should not be used in production code, or can only be used in a secure context.

Browser Compatibility tables and Browser Compatibility Data (BCD)

MDN has a standard format for tables that illustrate compatibility of shared technologies across all browsers, such as DOM, HTML, CSS, JavaScript, SVG, etc. To make this data available in multiple projects programmatically, a Node.js package is built from the browser-compat-data repository and published to npm.

Code examples on MDN

On MDN, you'll see numerous code examples that demonstrate how to use web platform features that we document. This article describes the ways you can add code examples to pages, along with the types you can use and when to use them.

Feature status

A feature status provides developers with information about the implementation stage of the feature among browser vendors and is one of the following:

MDN provides numerous macros to create always up-to-date links to MDN content. In this guide, you will learn about MDN cross-reference macros that you can use to include a single link to another page or a list of links to all of a document's subpages.

Live samples (EmbedLiveSample)

MDN supports displaying code blocks within the articles as live samples, so readers can see both the source code and its output as it looks on a web page. This feature allows readers to understand exactly what the executed code would produce, making the documentation dynamic and instructive. It also allows authors to be absolutely sure that the code blocks in documentation have the expected output, and work appropriately when used with different browsers.

Page types

There are a number of types of pages that are used repeatedly on MDN. This article describes these page types, their purpose, and gives examples of each and templates to use when creating a new page.

MDN pages all include sidebars. Most of them are created using a standard system that defines data structures in YAML files, and includes sidebars on pages using macro calls.

Specification tables

Every reference page on MDN should provide information about the specification or specifications in which that API or technology was defined. This article demonstrates what these tables look like and explains how to add them.

Syntax sections

The syntax section of an MDN reference page contains a syntax box defining the exact syntax that a feature has (e.g. what parameters can it accept, which ones are optional?) This article explains how to write syntax boxes for reference articles.

Using macros

The rari backend is MDN's build system and provides a macro syntax for common tasks.

See also