This page lists many of the general-purpose macros created for use on MDN. For how-to information on using these macros, see Using macros and Using link macros. See Other macros for information on macros that are infrequently used, are used only in special contexts, or are deprecated. There is also a complete list of all macros on MDN.
See also the CSS style guide for styles available for your use.
Linking
Creating a single hyperlink
In general, you don't need to use macros for creating arbitrary links. Use the Link button in the Editor interface to create links.
- The
Glossary
macro creates a link to a specified term's entry in the MDN glossary. This macro accepts one required and two optional parameters:- The term's name (such as "HTML").
- The text to display in the article instead of the term name (this should be used rarely). Optional
- If this parameter is specified and is non-zero, the custom styling normally applied to glossary links is not applied. Optional
Examples:
- {{Glossary("HTML")}} yields HTML
- {{Glossary("CSS", "Cascading Style Sheets")}} yields Cascading Style Sheets
- {{Glossary("HTML", "", 1)}} yields HTML
Linking to pages in references
There are various macros for linking to pages in specific reference areas of MDN.
cssxref
links to a page in the CSS Reference.
Example:{{cssxref("cursor")}}
, results in:cursor
.domxref
links to pages in the DOM reference; if you include parentheses at the end, the template knows to display the link to look like a function name. For example, {{domxref("document.getElementsByName()")}} results indocument.getElementsByName()
while{{domxref("Node")}}
results inNode
.event
links to pages in the DOM Event reference, for example: {{event("change")}} results inchange
.HTMLElement
links to an HTML element in the HTML Reference.htmlattrxref
links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example,{{htmlattrxref("lang")}}
will create this link:lang
.{{htmlattrxref("type","input")}}
will create this link:type
.jsxref
links to a page in the JavaScript Reference.SVGAttr
links to a specific SVG attribute. For example,{{SVGAttr("d")}}
creates this link:d
.SVGElement
links to an SVG element in the SVG Reference.HTTPHeader
links to an HTTP header.HTTPMethod
links to an HTTP request method.HTTPStatus
links to an HTTP response status code.
Linking to bugs and IRC
- Bugs
bug
allows you to link to a bug on bugzilla.mozilla.org easily using this syntax:{{Bug(123456)}}
. This gives you: bug 123456.WebkitBug
inserts a link to a bug in the WebKit bug database. For example,{{WebkitBug(31277)}}
inserts WebKit bug 31277.
IRCLink
inserts a link to the specified IRC channel, complete with a tooltip that says that's what it does and that an IRC client is needed.
Navigation aids for multi-page guides
Previous
, Next
, and PreviousNext
provide navigation controls for articles which are part of sequences. For the single-way templates, the only parameter needed is the wiki location of the previous or next article in the sequence. For PreviousNext
, the two parameters needed are the wiki locations of the appropriate articles. The first parameter is for the previous article and the second is for the next article.
Code samples
Live samples
EmbedLiveSample
lets you embed the output of a code sample on a page, as described in Live samples.LiveSampleLink
creates a link to a page containing the output of a code sample on a page, as described in Live samples.
Attached sample files
Embed_text
template lets you embed an attached text file into the body of your article. This is helpful if you want to have code snippets that are both downloadable but also displayed within the article's content. You may optionally specify a language for syntax highlighting; if you don't specify one, the text is embedded unformatted. The first parameter is the filename of the attachment to embed; the second, if provided, is the language for the syntax highlighter to apply, such as "javascript", "svg", or "cpp".EmbedSVG
embeds an attached XML file as an SVG image, in place on the page. Specify the filename of the attached SVG file. You can use this in tandem withEmbed_text
to show the source and then the rendered output of the same file.
Sidebar generation
There templates for almost every large collection of pages. They typically link back to the main page of the reference/guide/tutorial (this is often needed because our breadcrumbs sometimes can't do this) and put the article in the appropriate category.
CSSRef
generates the sidebar for CSS reference pages.HTMLRef
generates the sidebar for HTML reference pages.APIRef
generates the sidebar for Web API reference pages.
General-purpose formatting
Inline indicators for API documentation
optional_inline
and ReadOnlyInline
are used in API documentation, usually when describing the list of properties of an object or parameters of a function.
Usage: {{optional_inline()}}
or {{ReadOnlyInline()}}
. Example:
isCustomObject
Read only- Indicates, if
true
, that the object is a custom one. - parameterX Optional
- Blah blah blah...
Noting why a page has no specification table
Most Web documentation pages have specification tables to indicate where the API is specified. However, some API terms do not have specifications for some reason; perhaps the API predates formal specifications, or the API is browser-specific and thus has no specification.
Regardless, it's important that we be able to indicate when this is the case, so we place explanatory text in lieu of the table. In order to help tools understand this is going on, you need to wrap that text using the WhyNoSpecStart
and WhyNoSpecEnd
macros, like this:
{{WhyNoSpecStart}}Not part of any specification; this API is Firefox OS specific.
These macros are just a guide for automated tools and have no visible effect on rendered content.
Status and compatibility indicators
Inline indicators with no additional parameters
Non-standard
non-standard_inline
inserts an in-line mark indicating the API has not been standardized and is not on a standards track.
Syntax
{{non-standard_inline}}
Examples
- Icon:
Experimental
experimental_inline
inserts an in-line mark indicating the API is not widely implemented and may change in the future.
Syntax
{{experimental_inline}}
Examples
- Icon:
Inline indicators that support specifying the technology
In these macros the parameter (when specified) should be one of the strings "html", "js", "css", or "gecko", followed by the version number.
Deprecated
deprecated_inline
inserts an in-line deprecated mark to discourage the use of an API that is officially deprecated. Note: "Deprecated" means that the item should no longer be used, but still functions. If you mean that it no longer works at all, use the term "obsolete."
Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).
Syntax
{{deprecated_inline}}
or {{deprecated_inline("gecko5")}}
Examples
- Icon:
- Badge: Deprecated since Gecko 5
Obsolete
obsolete_inline
inserts an in-line obsolete mark to prevent the use of, for example, a function, method or property which is officially obsolete. {{ js_obsolete_inline("1.8.5") }} is equivalent to {{ obsolete_inline("js1.8.5") }}. Same is true for js_obsolete_header.
Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).
Syntax
{{obsolete_inline}}
or {{obsolete_inline("js1.8.5")}}
Examples
- Icon:
- Badge: Obsolete since JavaScript 1.8.5
Template badges
These macros are mostly used on the WebAPI page. See Creating new badges for information on creating a new badge.
Privileged
PrivilegedBadge
is used in Firefox OS documentation to indicate Privileged APIs.
Syntax
{{PrivilegedBadge}}
Example
Privileged
Page or section header indicators
These templates have the same semantics as their inline counterparts described above. The templates should be placed directly underneath the main page title (or breadcrumb navigation if available) in the reference page. They can also be used to mark up a section on a page.
non-standard_header
:{{Non-standard_header()}}
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.SeeCompatTable
should be used on pages that provide a "Browser compatibility" section. Example:{{SeeCompatTable()}}
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.deprecated_header
:{{deprecated_header()}}
Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.deprecated_header
with parameter:{{deprecated_header("gecko5")}}
Deprecated since Gecko 5 (Firefox 5 / Thunderbird 5 / SeaMonkey 2.2)
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.obsolete_header
:{{obsolete_header()}}
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.obsolete_header
with parameter:{{obsolete_header("gecko30")}}
Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).Obsolete since Gecko 30 (Firefox 30 / Thunderbird 30 / SeaMonkey 2.27 / Firefox OS 1.4)
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
Indicating that a feature is available in web workers
The AvailableInWorkers
macro inserts a localised note box indicating that a feature is available in a Web worker context.
Version information macros
These macros are used to indicate that content is relevant only to specific versions of a product.
gecko_minversion_inline
: For example: Requires Gecko 100.9fx_minversion_inline
: For example: Firefox 100.9
These macros are not shown when the specified version is lower than current gecko release.
gecko_minversion_inline
(9.9):fx_minversion_inline
(9.9):
Macros used on special pages
Download buttons
DownloadButton
inserts a green "Download" button into the page. It accepts two parameters:
- The URL of the destination link
- The text for the button itself
For example, {{DownloadButton("http://nightly.mozilla.org/", "Download Nightly")}} results in: Download Nightly
FirefoxChannelLink
inserts a link to download a specific Firefox channel. The link can be either textual or the channel's icon. The idea behind this macro is that it provides an easy way to link to download Firefox without having to deal with potentially changing "best sources" for these downloads, and lets you use icon buttons without worrying about the icon changing. We can just update the macro and all places using the icons will be updated.
It accepts these parameters:
- The name of the channel. This is a case-insensitive string, and must be one of "nightly", "developer", "beta", or "release" (the last one can also be "firefox").
- The icon size, in pixels. The width of the icon will be set to this, with the height horizontally adjusted to match. If this is zero, the link will be presented as a textual link instead.
- The text for the link. You can leave this parameter out if you specify an icon size, thereby asking for your link to be an icon.
For example, {{FirefoxChannelLink("developer", 96)}} results in:
And {{FirefoxChannelLink("beta", 0, "Download Firefox Beta")}} results in: Download Firefox Beta