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-datarepository 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.
- Quicklinks
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.