The Wikipedia footnotes system uses the Cite.php software extension to generate references. MediaWiki messages are then used to format the display of the inline links and the references.

• Inline link: the link shown by the content enclosed in <ref>...</ref>; shown in superscript and enclosed in brackets; coded in the MediaWiki message as $2
• Backlink: the link shown in the references section; a single link is shown as a caret; coded as $2
• Backlink label: multiple backlinks are shown as a caret followed alpha character labels
• ID: a unique HTML ID that does not show; coded as $1
• Reference content: the content enclosed in <ref>...</ref> that shows in the reference list; coded as $3

Class .reference formats the inline link; defined in Common.css

/* Ensure refs in table headers and the like aren't bold or italic */
sup.reference {
    font-weight: normal;
    font-style: normal;
}

/* Prevent line breaks in silly places:
   3) Ref tags with group names <ref group="Note"> --> "[Note 1]"
*/
sup.reference a {
    white-space: nowrap;
}

Class .references formats the reference list; defined in Common.css When the inline cite link is clicked, the focus jumps to the proper cite in the reference list. The following rules highlight the cite in light blue. This is supported by Gecko (FireFox) and Webkit (Safari, Chrome) browsers; it is not supported by current versions of Trident, but does work in the Internet Explore 9 platform preview.

/* Highlight clicked reference in blue to help navigation */
div.references li:target,
sup.reference:target,
span.citation:target {
    background-color: #DEF;
}

Although not specific to references, Common.css does have this line height rule to keep line spacing from breaking on subscript and superscript, as used in the inline link. Internet Explorer 7 has problems with line-height when printing, so it is disabled for IE7 through Common.js.

/* Reduce line-height for <sup> and <sub> */
sup, sub {
    line-height: 1em;
}

Cite errors are classed with:

<strong class="error mw-ext-cite-error">

The extension uses some modules for CSS:

• ext.cite.css: CSS
• ext.cite.js: add accessibility attributes to the citation links
• ext.rtlcite.css: isolation to fix references in case of RTL words at the end of a reference

The inline reference links are defined in MediaWiki:Cite reference link. The default is:

<sup id="$1" class="reference">[[#$2|<nowiki>[</nowiki>$3<nowiki>]</nowiki>]]</sup>

Where:

• $1 ref ID: Cite reference link prefix + reference name + numeric starting with 0
• $2 backlink ID
• $3 count to display

The English Wikipedia customizes this to:

<sup id="$1" class="reference">[[#$2|<span class="cite-bracket">&#91;</span>$3<span class="cite-bracket">&#93;</span>]]</sup>

Where the brackets that show enclosing the reference count are enclosed in <span> tags so they can be styled.

The backlink label type is defined in MediaWiki:Cite references link many format. This interface page defaults to:

[[#$1|<sup>'''''$2'''''</sup>]]

Where:

• $1 ref ID
• $2 numeric value to use as a backlink: ^ ^{1.0 1.1 1.2 1.3 1.4}
• $3 custom value to use as a backlink as defined in MediaWiki:Cite references link many format backlink labels: ^ ^{a azz}

The English Wikipedia interface page is set to:

[[#$1|<sup>'''''$3'''''</sup>]]

Changing $2 to $3 changes the backlinks from numeric to alpha. This was modified in 2006 to match the output of {{ref}} which was the predominant method of inserting footnotes at the time.

This is the markup for some simple references

Unnamed <ref>This is an unnamed reference</ref>

Named <ref name="named">This is a named reference</ref>

Named reference used again <ref name="named"/>
<references/>

Which shows as

Unnamed ^[1]

Named ^[2]

Named reference used again ^[2]

Which renders as

The MediaWiki messages are combined to form the HTML output

<p>Unnamed <sup id="cite_ref-0" class="reference"><a href="#cite_note-0" title=""><span>[</span>1<span>]</span></a></sup></p>
<p>Named <sup id="cite_ref-named_1-0" class="reference"><a href="#cite_note-named-1" title=""><span>[</span>2<span>]</span></a></sup></p>
<p>Named reference used again <sup id="cite_ref-named_1-1" class="reference"><a href="#cite_note-named-1" title=""><span>[</span>2<span>]</span></a></sup></p>
<div class="references">
<ol>
<li id="cite_note-0"><b><a href="#cite_ref-0" title="">^</a></b> This is an unnamed reference</li>
<li id="cite_note-named-1">^ <a href="#cite_ref-named_1-0" title=""><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-named_1-1" title=""><sup><i><b>b</b></i></sup></a> This is a named reference</li>
</ol>
</div>

If citation templates are used, they will inject other classes and ids into the HTML output.