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 are added to 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.

Code examples

On MDN, you'll see numerous code examples inserted throughout the pages to demonstrate usage of web platform features. This article discusses the different mechanisms available for adding code examples to pages, along with which ones you should use and when.

Compatibility tables and the browser compatibility data repository (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.

Live examples

MDN supports turning sample code displayed in articles into running samples the reader can look at in action. These are called live samples and allows users to see what code output looks like. It also makes documentation more dynamic and instructive.

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 supports adding quicklinks to pages; these are boxes containing a potentially hierarchical list of links to other pages on MDN or to pages off-site. This article describes how to create quicklinks boxes.

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 Yari platform on which MDN runs provides a macro system, KumaScript, which makes it possible to automate certain tasks. This article provides information on how to invoke MDN's macros within articles.