MDN Style Guide

  • Revision slug: Project:MDC_style_guide
  • Revision title: MDC formatting guide
  • Revision id: 56565
  • Created:
  • Creator: Leandro Mercês Xavier
  • Is current revision? No
  • Comment namespace pt - reorg

Revision Content

{{template.MDCProjectPagesTOC()}}

The following is a MDC-specific wiki markup reference sheet that reflects our current "best-practices" for marking up pages within this wiki. It is subject to change over time, of course, so these are just strong recommendations rather than hard-and-fast rules.

If you need to do some markup that goes against these guidelines, feel free -- no one's going to yell at you. Just please try to stick to these guidelines as much as possible.

If you have any questions about the guidelines, contact Dria, or ask on the #devmo IRC channel at irc://irc.mozilla.org.

Basics

Sections, Paragraphs, Newlines

Result Markup
Sections

This code prevents confusion in the section editing feature

Section


Sub-section


Sub-sub-section

Sub-sub-sub-section

If your document needs more than four section levels, it is recommended that you break it up into smaller pages and link those together.

= Section =

== Sub-section ==

=== Sub-sub-section ===

==== Sub-sub-sub=section ====
Paragraphs and Newlines

A single carriage-return between lines does nothing.

Leaving a blank line

indicates a new paragraph.

You can
use "br" tags
to force
a newline.

A single carriage-return between
lines does nothing.

Leaving a blank line

indicates a new paragraph.

You can<br />
use "br" tags<br />
to force<br />
a newline.

Text Formatting

Result Markup
Text Formatting

italic or emphasis

''italic'' or ''emphasis''

bold or strong

'''bold''' or '''strong'''

bold italic or very strong

'''''bold italic''''' or '''''very strong'''''

Here is some in-line code as an example.

Here is some <code>in-line code</code> as an example.
This is how
    to do code
    blocks.
<pre>
This is how
    to do code
    blocks.
</pre>
Blockquotes - this is a blockquote.
<blockquote>
Blockquotes - this is a blockquote.
</blockquote>

Small text.

<small>Small text.</small>

<big>Big text.</big>

<big>Big text.</big>

Strikeout.

<strike>Strikeout.</strike>

Underlined.

<u>Underlined.</u>

SuperScript.

<sup>Super</sup>Script.

SubScript.

<sub>Sub</sub>Script.

Lists

Result Markup
Bulleted Lists
  • Manuals
    • Reference
    • Guide
  • Articles
    • Tutorials
      • JavaScript
      • HTML
      • CSS
    • Tips & Tricks
  • FAQs

List bullets, indenting, and so forth can be changed via CSS.

* Manuals
** Reference
** Guide
* Articles
** Tutorials
*** JavaScript
*** HTML
*** CSS
** Tips & Tricks
* FAQs
Numbered Lists
  1. Manuals
    1. Reference
    2. Guide
  2. Articles
    1. Tutorials
      1. JavaScript
      2. HTML
      3. CSS
    2. Tips & Tricks
  3. FAQs

List numbers and styling can be changed via CSS.

# Manuals
## Reference
## Guide
# Articles
## Tutorials
### JavaScript
### HTML
### CSS
## Tips & Tricks
# FAQs

Links

Result Markup
Internal Links

Simple internal link to another page...

April 1st is April Fool's Day.

April 1st is [[April Fool's Day]].

Internal link where the target page title is different than the link text...

April 1st happens to be Dria's birthday.

[[April Fool's Day|April 1st]] happens to be Dria's birthday.

Internal link to a specific section of another page...

Some April Fool Birthdays.

[[April Fool's Day#Birthdays|Some April Fool Birthdays]].

Endings are blended into the link...

In April, the crocuses begin to bloom.

In April, the [[crocus]]es begin to bloom.

Adding a signature that links to your User page...

Dria

or

Dria 13:39, 15 Mar 2005 (EST)

~~~

or

~~~~
External Links

Straight URL linking...

http://www.mozilla.org

http://www.mozilla.org

External Link with different link text...

Mozilla Project

[http://www.mozilla.org Mozilla Project]

Link to bug in Mozilla's Bugzilla...

{{template.Bug(322603)}}

{{bug|322603}}
Interwiki Links

TBD

TBD

Comments

</tr>

Result Markup

The comment here is not shown in the result. It is exactly the same as an HTML comment.

Use comments to leave notes and instructions for other writers, editors, and reviewers.

Here's the comment.

The comment here is not shown
in the result.  It is exactly the
same as an HTML comment.

Use comments to leave notes and
instructions for other writers,
editors, and reviewers.

<!--- Here's the comment. --->

Advanced markup

Tables

Result Markup
Table Markup

You can use regular HTML table markup to do wiki tables, or you can use the wiki markup. The wiki table markup uses fewer characters, but that's about the only real advantage. Use what you're most comfortable with.

heading 1 heading 2
cell 1 cell 2
<table class="standard-table">
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
  </tr>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</table>
heading 1 heading 2
cell 1 cell 2
{| class="standard-table"
|-
|class="header"|heading 1
|class="header"|heading 2
|-
|-
|cell 1
|cell 2
|-
|}

Images

Result Markup
Images

Inline image...

Image:Firefox-logo.png

[[Image:Firefox-logo.png]]

Inline image with alt text...

Firefox - Take back the web.

[[Image:Firefox-logo.png|Firefox - Take back the web.]]

Thumbnail image with alt text...

Flower macro shot.

[[Image:Flower.jpg|thumb|Flower macro shot.]]

Link to a picture...

Flower macro shot.

[[media:Flower.jpg|Flower macro shot.]]

Categories

Every page in the wiki should be included in at least one MediaWiki Category. To add a category to a page, use the following syntax:

[[Category:CategoryName]]

These category links should be put at the bottom of the page after the content. Add as many Category links as appropriate. For example, a tutorial about how to use Venkman could be in the "Venkman", "Tools", and "Tutorials" categories.

All categories, in turn, should be put in Category:All Categories.

Reference to versions in other languages

It is always nice when there are references to the page's versions written in other languages. For example, to insert in this page a reference to this page's version in portuguese, you simply need to add the following syntax at the end of this page:

[[pt:Referência de Marcação Wiki]]

In other words, you simply need to add the internal link to the desired site with the prefix which refers to the page's language.

The reference to other language's pages also works with category pages.

Force Ignore of Wiki Markup

If you need a particular piece of wiki markup ignored by the parser, simply enclose it in "nowiki" tags, like so:

<nowiki>'''this wiki markup will not be interpreted'''</nowiki>

'''this wiki markup will not be interpreted'''

HTML in Wikitext

The following tags are currently allowed in wiki markup:

  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<b>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<big>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Text containers', '<blockquote>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Others', '<br>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '<caption>')}}
  • <center>
  • <cite>
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Logical markup', '<code>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '<dd>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Other containers', '<div>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '<dl>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '<dt>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Logical markup', '<em>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<font>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '<h1>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '<h2>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '<h3>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '<h4>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '<h5>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '<h6>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Other containers', '<hr>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<i>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '<li>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '<ol>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Text containers', '<p>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Text containers', '<pre>')}}
  • <rb>
  • <rp>
  • <rt>
  • <ruby>
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<s>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<small>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<strike>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Logical markup', '<strong>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<sub>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<sup>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '<table>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '<td>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '<th>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '<tr>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<tt>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '<u>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '<ul>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Logical markup', '<var>')}}
  • {{mediawiki.interwiki('wikipedia', 'HTML_element#Others', '<!-- ... -->')}}

Special Characters

Result Markup

Umlauts and accents:

è é ê ë ì í

À Á Â Ã Ä Å
Æ Ç È É Ê Ë
Ì Í Î Ï Ñ Ò
Ó Ô Õ Ö Ø Ù
Ú Û Ü ß à á
â ã ä å æ ç
è é ê ë ì í
î ï ñ ò ó ô
œ õ ö ø ù ú
û ü ÿ


è é ê ë ì í

&Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring;
&AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml;
&Igrave; &Iacute; &Icirc; &Iuml; &Ntilde; &Ograve;
&Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave;
&Uacute; &Ucirc; &Uuml; &szlig; &agrave; &aacute;
&acirc; &atilde; &auml; &aring; &aelig; &ccedil;
&egrave; &eacute; &ecirc; &euml; &igrave; &iacute;
&icirc; &iuml; &ntilde; &ograve; &oacute; &ocirc;
&oelig; &otilde; &ouml; &oslash; &ugrave; &uacute;
&ucirc; &uuml; &yuml;

Punctuation:
¿ ¡ « » § ¶
† ‡ • - – —

&iquest; &iexcl; &laquo; &raquo; &sect; &para;
&dagger; &Dagger; &bull; - &ndash; &mdash;

Commercial symbols:
™ © ® ¢ € ¥

£ ¤
&trade; &copy; &reg; &cent; &euro; &yen;
&pound; &curren;
Greek characters:

α β γ δ ε ζ
η θ ι κ λ μ ν
ξ ο π ρ σ ς
τ υ φ χ ψ ω
Γ Δ Θ Λ Ξ Π
Σ Φ Ψ Ω

&alpha; &beta; &gamma; &delta; &epsilon; &zeta;
&eta; &theta; &iota; &kappa; &lambda; &mu; &nu;
&xi; &omicron; &pi; &rho;  &sigma; &sigmaf;
&tau; &upsilon; &phi; &chi; &psi; &omega;
&Gamma; &Delta; &Theta; &Lambda; &Xi; &Pi;
&Sigma; &Phi; &Psi; &Omega;

Math characters:
∫ ∑ ∏ √ − ± ∞
≈ ∝ ≡ ≠ ≤ ≥
× · ÷ ∂ ′ ″
∇ ‰ ° ∴ ℵ ø
∈ ∉ ∩ ∪ ⊂ ⊃ ⊆ ⊇
¬ ∧ ∨ ∃ ∀ ⇒ ⇔
→ ↔ ↑

&int; &sum; &prod; &radic; &minus; &plusmn; &infin;
&asymp; &prop; &equiv; &ne; &le; &ge; 
&times; &middot; &divide; &part; &prime; &Prime;
&nabla; &permil; &deg; &there4; &alefsym; &oslash;
&isin; &notin; &cap; &cup; &sub; &sup; &sube; &supe;
&not; &and; &or; &exist; &forall; &rArr; &hArr;
&rarr; &harr; &uarr;
x2   ≥   0 true.
  • To space things out, use non-breaking spaces - <tt>&nbsp;</tt>.
  • <tt>&nbsp;</tt> also prevents line breaks in the middle of text, this is useful in formulas.
<i>x</i><sup>2</sup>&nbsp;&nbsp;&ge;&nbsp;&nbsp;0 true.


Useful Firefox extensions

Other references

Devmo-specific

External

{{ wiki.languages( { "de": "Help:de/Wiki_Markup_Referenz", "fr": "Help:fr/R\u00e9f\u00e9rence_des_balises_wiki", "pt": "Project:pt/Refer\u00eancia_de_marca\u00e7\u00e3o_wiki", "ja": "Help:ja/Wiki_Markup_Reference", "zh-cn": "Project:cn/Wiki_Markup_Reference" } ) }}

Revision Source

<p>
{{template.MDCProjectPagesTOC()}}
</p><p>The following is a MDC-specific wiki markup reference sheet that reflects our current "best-practices" for marking up pages within this wiki.  It is subject to change over time, of course, so these are just strong recommendations rather than hard-and-fast rules.
</p><p>If you need to do some markup that goes against these guidelines, feel free -- no one's going to yell at you.  Just please try to stick to these guidelines as much as possible.
</p><p>If you have any questions about the guidelines, contact <a href="User:Dria">Dria</a>, or ask on the #devmo IRC channel at irc://irc.mozilla.org.
</p>
<h2 name="Basics"> Basics </h2>
<h3 name="Sections.2C_Paragraphs.2C_Newlines"> Sections, Paragraphs, Newlines </h3>
<table class="fullwidth-table">

<tbody><tr>
<td class="header" width="50%">Result
</td><td class="header" width="50%">Markup
</td></tr>


<tr>
<td class="header" colspan="2" width="50%">Sections
</td></tr>


<tr>
<td>
<p><span class="comment">This code prevents confusion in the section editing feature</span>
</p><p><b><font style="font-size:160%"> Section </font></b>
</p>
<hr>
<p><b><font style="font-size:140%"> Sub-section </font></b>
</p>
<hr>
<p><b><font style="font-size:120%"> Sub-sub-section</font></b>
</p><p><b><font style="font-size:100%"> Sub-sub-sub-section</font></b>
</p><p>If your document needs more than four section levels, it is recommended that you break it up into smaller pages and link those together.
</p>
</td><td>
<pre>
= Section =

== Sub-section ==

=== Sub-sub-section ===

==== Sub-sub-sub=section ====
</pre>
</td></tr>

<tr>
<td class="header" colspan="2" width="50%">Paragraphs and Newlines
</td></tr>


<tr>
<td>
<p>A single carriage-return between
lines does nothing.
</p><p>Leaving a blank line
</p><p>indicates a new paragraph.
</p><p>You can<br>
use "br" tags<br>
to force<br>
a newline.
</p>
</td><td>
<pre>
A single carriage-return between
lines does nothing.

Leaving a blank line

indicates a new paragraph.

You can&lt;br /&gt;
use "br" tags&lt;br /&gt;
to force&lt;br /&gt;
a newline.
</pre>
</td></tr>
</tbody></table>
<h3 name="Text_Formatting"> Text Formatting </h3>
<table class="fullwidth-table">

<tbody><tr>
<td class="header" width="50%">Result
</td><td class="header" width="50%">Markup
</td></tr>


<tr>
<td class="header" colspan="2" width="50%">Text Formatting
</td></tr>


<tr>
<td>
<p><i>italic</i> or <i>emphasis</i>
</p>
</td><td>
<pre>
''italic'' or ''emphasis''
</pre>
</td></tr>


<tr>
<td>
<p><b>bold</b> or <b>strong</b>
</p>
</td><td>
<pre>
'''bold''' or '''strong'''
</pre>
</td></tr>


<tr>
<td>
<p><i><b>bold italic</b></i> or <i><b>very strong</b></i>
</p>
</td><td>
<pre>
'''''bold italic''''' or '''''very strong'''''
</pre>
</td></tr>


<tr>
<td>
<p>Here is some <code>in-line code</code> as an example.
</p>
</td><td>
<pre>
Here is some &lt;code&gt;in-line code&lt;/code&gt; as an example.
</pre>
</td></tr>


<tr>
<td>
<pre>
This is how
    to do code
    blocks.
</pre>
</td><td>
<pre>
&lt;pre&gt;
This is how
    to do code
    blocks.
&lt;/pre&gt;
</pre>
</td></tr>


<tr>
<td>
<blockquote>
Blockquotes - this is a blockquote.
</blockquote>
</td><td>
<pre>
&lt;blockquote&gt;
Blockquotes - this is a blockquote.
&lt;/blockquote&gt;
</pre>
</td></tr>


<tr>
<td>
<p><small>Small text.</small>
</p>
</td><td>
<pre>
&lt;small&gt;Small text.&lt;/small&gt;
</pre>
</td></tr>


<tr>
<td>
<p><big>Big text.</big>
</p>
</td><td>
<pre>
&lt;big&gt;Big text.&lt;/big&gt;
</pre>
</td></tr>


<tr>
<td>
<p><strike>Strikeout.</strike>
</p>
</td><td>
<pre>
&lt;strike&gt;Strikeout.&lt;/strike&gt;
</pre>
</td></tr>


<tr>
<td>
<p><u>Underlined.</u>
</p>
</td><td>
<pre>
&lt;u&gt;Underlined.&lt;/u&gt;
</pre>
</td></tr>


<tr>
<td>
<p><sup>Super</sup>Script.
</p>
</td><td>
<pre>
&lt;sup&gt;Super&lt;/sup&gt;Script.
</pre>
</td></tr>


<tr>
<td>
<p><sub>Sub</sub>Script.
</p>
</td><td>
<pre>
&lt;sub&gt;Sub&lt;/sub&gt;Script.
</pre>
</td></tr>
</tbody></table>
<h3 name="Lists"> Lists </h3>
<table class="fullwidth-table">

<tbody><tr>
<td class="header" width="50%">Result
</td><td class="header" width="50%">Markup
</td></tr>


<tr>
<td class="header" colspan="2">Bulleted Lists
</td></tr>


<tr>
<td>
<ul><li> Manuals
<ul><li> Reference
</li><li> Guide
</li></ul>
</li><li> Articles
<ul><li> Tutorials
<ul><li> JavaScript
</li><li> HTML
</li><li> CSS
</li></ul>
</li><li> Tips &amp; Tricks
</li></ul>
</li><li> FAQs
</li></ul>
<p>List bullets, indenting, and so forth can be changed via CSS.
</p>
</td><td>
<pre>
* Manuals
** Reference
** Guide
* Articles
** Tutorials
*** JavaScript
*** HTML
*** CSS
** Tips &amp; Tricks
* FAQs
</pre>
</td></tr>


<tr>
<td class="header" colspan="2">Numbered Lists
</td></tr>


<tr>
<td>
<ol><li> Manuals
<ol><li> Reference
</li><li> Guide
</li></ol>
</li><li> Articles
<ol><li> Tutorials
<ol><li> JavaScript
</li><li> HTML
</li><li> CSS
</li></ol>
</li><li> Tips &amp; Tricks
</li></ol>
</li><li> FAQs
</li></ol>
<p>List numbers and styling can be changed via CSS.
</p>
</td><td>
<pre>
# Manuals
## Reference
## Guide
# Articles
## Tutorials
### JavaScript
### HTML
### CSS
## Tips &amp; Tricks
# FAQs
</pre>
</td></tr>
</tbody></table>
<h3 name="Links"> Links </h3>
<table class="fullwidth-table">

<tbody><tr>
<td class="header" width="50%">Result
</td><td class="header" width="50%">Markup
</td></tr>


<tr>
<td class="header" colspan="2">Internal Links
</td></tr>


<tr>
<td>
<p><b>Simple internal link to another page...</b>
</p><p>April 1st is <a href="en/April_Fool's_Day">April Fool's Day</a>.
</p>
</td><td>
<pre>
April 1st is [[April Fool's Day]].
</pre>
</td></tr>


<tr>
<td>
<p><b>Internal link where the target page title is different than the link text...</b>
</p><p><a href="en/April_Fool's_Day">April 1st</a> happens to be Dria's birthday.
</p>
</td><td>
<pre>
[[April Fool's Day|April 1st]] happens to be Dria's birthday.
</pre>
</td></tr>


<tr>
<td>
<p><b>Internal link to a specific section of another page...</b>
</p><p><a href="en/April_Fool's_Day#Birthdays">Some April Fool Birthdays</a>.
</p>
</td><td>
<pre>
[[April Fool's Day#Birthdays|Some April Fool Birthdays]].
</pre>
</td></tr>


<tr>
<td>
<p><b>Endings are blended into the link...</b>
</p><p>In April, the <a href="en/Crocus">crocuses</a> begin to bloom.
</p>
</td><td>
<pre>
In April, the [[crocus]]es begin to bloom.
</pre>
</td></tr>


<tr>
<td>
<p><b>Adding a signature that links to your User page...</b>
</p><p><a href="User:Dria">Dria</a>
</p><p>or
</p><p><a href="User:Dria">Dria</a> 13:39, 15 Mar 2005 (EST)
</p>
</td><td>
<pre>
~~~

or

~~~~
</pre>
</td></tr>


<tr>
<td class="header" colspan="2">External Links
</td></tr>


<tr>
<td>
<p><b>Straight URL linking...</b>
</p><p>http://www.mozilla.org
</p>
</td><td>
<pre>
http://www.mozilla.org
</pre>
</td></tr>


<tr>
<td>
<p><b>External Link with different link text...</b>
</p><p><a class="external" href="http://www.mozilla.org">Mozilla Project</a>
</p>
</td><td>
<pre>
[http://www.mozilla.org Mozilla Project]
</pre>
</td></tr>


<tr>
<td>
<p><b>Link to bug in Mozilla's Bugzilla...</b>
</p><p>{{template.Bug(322603)}}
</p>
</td><td>
<pre>
{{bug|322603}}
</pre>
</td></tr>


<tr>
<td class="header" colspan="2">Interwiki Links
</td></tr>


<tr>
<td>
<p>TBD
</p>
</td><td>
<p>TBD
</p>
</td></tr>

</tbody></table>
<h3 name="Comments"> Comments </h3>
<p>&lt;/tr&gt;
</p><table class="fullwidth-table">
<tbody><tr><td class="header" width="50%">Result</td>
<td class="header" width="50%">Markup</td>

</tr><tr>
<td>
<p>The comment here is not shown
in the result.  It is exactly the
same as an HTML comment.
</p><p>Use comments to leave notes and
instructions for other writers,
editors, and reviewers.
</p><p><span class="comment">Here's the comment.</span>
</p>
</td>
<td>
<pre>
The comment here is not shown
in the result.  It is exactly the
same as an HTML comment.

Use comments to leave notes and
instructions for other writers,
editors, and reviewers.

&lt;!--- Here's the comment. ---&gt;
</pre>
</td>
</tr>
</tbody></table>
<h2 name="Advanced_markup"> Advanced markup </h2>
<h3 name="Tables"> Tables </h3>
<table class="fullwidth-table">

<tbody><tr>
<td class="header" width="50%">Result
</td><td class="header" width="50%">Markup
</td></tr>


<tr>
<td class="header" colspan="2">Table Markup
</td></tr>


<tr>
<td colspan="2">
<p>You can use regular HTML table markup to do wiki tables, or you can use the wiki markup.  The wiki table markup uses fewer characters, but that's about the only real advantage.  Use what you're most comfortable with.
</p>
</td></tr>

<tr>
<td>
<table class="standard-table">
  <tbody><tr>
    <th>heading 1</th>
    <th>heading 2</th>
  </tr>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</tbody></table>
</td><td>
<pre>
&lt;table class="standard-table"&gt;
  &lt;tr&gt;
    &lt;th&gt;heading 1&lt;/th&gt;
    &lt;th&gt;heading 2&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;cell 1&lt;/td&gt;
    &lt;td&gt;cell 2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
</td></tr>

<tr>
<td>
<table class="standard-table">

<tbody><tr>
<td class="header">heading 1
</td><td class="header">heading 2
</td></tr>

<tr>
<td>cell 1
</td><td>cell 2
</td></tr>
</tbody></table>
</td><td>
<pre>
{| class="standard-table"
|-
|class="header"|heading 1
|class="header"|heading 2
|-
|-
|cell 1
|cell 2
|-
|}
</pre>
</td></tr>
</tbody></table>
<h3 name="Images"> Images </h3>
<table class="fullwidth-table">

<tbody><tr>
<td class="header" width="50%">Result
</td><td class="header" width="50%">Markup
</td></tr>


<tr>
<td class="header" colspan="2">Images
</td></tr>


<tr>
<td>
<p><b>Inline image...</b>
</p><p><img alt="Image:Firefox-logo.png" src="File:en/Media_Gallery/Firefox-logo.png">
</p>
</td><td>
<pre>
[[Image:Firefox-logo.png]]
</pre>
</td></tr>


<tr>
<td>
<p><b>Inline image with alt text...</b>
</p><p><img alt="Firefox - Take back the web." src="File:en/Media_Gallery/Firefox-logo.png">
</p>
</td><td>
<pre>
[[Image:Firefox-logo.png|Firefox - Take back the web.]]
</pre>
</td></tr>


<tr>
<td>
<p><b>Thumbnail image with alt text...</b>
</p><p><img alt="Flower macro shot." src="File:en/Media_Gallery/Flower.jpg">
</p>
</td><td>
<pre>
[[Image:Flower.jpg|thumb|Flower macro shot.]]
</pre>
</td></tr>


<tr>
<td>
<p><b>Link to a picture...</b>
</p><p><a href="File:en/Media_Gallery/Flower.jpg">Flower macro shot.</a>
</p>
</td><td>
<pre>
[[media:Flower.jpg|Flower macro shot.]]
</pre>
</td></tr>

</tbody></table>
<h3 name="Categories"> Categories </h3>
<p>Every page in the wiki should be included in at least one <a class="external" href="http://meta.wikimedia.org/wiki/Help:Category">MediaWiki Category</a>. To add a category to a page, use the following syntax:
</p>
<pre class="eval">[[Category:<i>CategoryName</i>]]
</pre>
<p>These category links should be put at the bottom of the page after the content.  Add as many Category links as appropriate.  For example, a tutorial about how to use Venkman could be in the "Venkman", "Tools", and "Tutorials" categories.
</p><p>All categories, in turn, should be put in <a href="Special:Tags?tag=All_Categories&amp;language=en">Category:All Categories</a>.
</p>
<h3 name="Reference_to_versions_in_other_languages"> Reference to versions in other languages </h3>
<p>It is always nice when there are references to the page's versions written in other languages. For example, to insert in this page a reference to this page's version in portuguese, you simply need to add the following syntax at the end of this page:
</p>
<pre>[[pt:Referência de Marcação Wiki]]
</pre>
<p>In other words, you simply need to add the internal link to the desired site with the prefix which refers to the page's language.
</p><p>The reference to other language's pages also works with category pages.
</p>
<h3 name="Force_Ignore_of_Wiki_Markup"> Force Ignore of Wiki Markup </h3>
<p>If you need a particular piece of wiki markup ignored by the parser, simply enclose it in "nowiki" tags, like so:
</p>
<pre>&lt;nowiki&gt;'''this wiki markup will not be interpreted'''&lt;/nowiki&gt;
</pre>
<p><span class="plain">'''this wiki markup will not be interpreted'''</span>
</p>
<h3 name="HTML_in_Wikitext"> HTML in Wikitext </h3>
<p>The following tags are currently allowed in wiki markup:  
</p>
<table border="0" cellpadding="5">
<tbody><tr>
<td valign="top">
<ul><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;b&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;big&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Text containers', '&lt;blockquote&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Others', '&lt;br&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '&lt;caption&gt;')}}
</li><li> &lt;center&gt;
</li><li> &lt;cite&gt;
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Logical markup', '&lt;code&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '&lt;dd&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Other containers', '&lt;div&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '&lt;dl&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '&lt;dt&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Logical markup', '&lt;em&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;font&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '&lt;h1&gt;')}}
</li></ul>
</td><td valign="top">
<ul><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '&lt;h2&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '&lt;h3&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '&lt;h4&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '&lt;h5&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Headings', '&lt;h6&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Other containers', '&lt;hr&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;i&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '&lt;li&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '&lt;ol&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Text containers', '&lt;p&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Text containers', '&lt;pre&gt;')}}
</li><li> &lt;rb&gt;
</li><li> &lt;rp&gt;
</li><li> &lt;rt&gt;
</li><li> &lt;ruby&gt;
</li></ul>
</td><td valign="top">
<ul><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;s&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;small&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;strike&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Logical markup', '&lt;strong&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;sub&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;sup&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '&lt;table&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '&lt;td&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '&lt;th&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Tables', '&lt;tr&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;tt&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Presentational markup', '&lt;u&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Lists', '&lt;ul&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Logical markup', '&lt;var&gt;')}}
</li><li> {{mediawiki.interwiki('wikipedia', 'HTML_element#Others', '&lt;!-- ... --&gt;')}}
</li></ul>
</td></tr></tbody></table>
<h3 name="Special_Characters"> Special Characters </h3>
<table class="fullwidth-table">
<tbody><tr>
<td class="header" width="50%">Result</td>
<td class="header" width="50%">Markup</td>
</tr>
<tr valign="top">
<td>
<p><b>Umlauts and accents:</b>
</p><p>è é ê ë ì í
</p><p>À Á Â Ã Ä Å <br>
Æ Ç È É Ê Ë <br>
Ì Í
Î Ï Ñ Ò <br>
Ó Ô Õ
Ö Ø Ù <br>
Ú Û Ü ß
à á <br>
â ã ä å æ
ç <br>
è é ê ë ì í<br>
î ï ñ ò ó ô <br>
œ õ
ö ø ù ú <br>
û ü ÿ
</p>
</td>
<td><pre>

è é ê ë ì í

&amp;Agrave; &amp;Aacute; &amp;Acirc; &amp;Atilde; &amp;Auml; &amp;Aring;
&amp;AElig; &amp;Ccedil; &amp;Egrave; &amp;Eacute; &amp;Ecirc; &amp;Euml;
&amp;Igrave; &amp;Iacute; &amp;Icirc; &amp;Iuml; &amp;Ntilde; &amp;Ograve;
&amp;Oacute; &amp;Ocirc; &amp;Otilde; &amp;Ouml; &amp;Oslash; &amp;Ugrave;
&amp;Uacute; &amp;Ucirc; &amp;Uuml; &amp;szlig; &amp;agrave; &amp;aacute;
&amp;acirc; &amp;atilde; &amp;auml; &amp;aring; &amp;aelig; &amp;ccedil;
&amp;egrave; &amp;eacute; &amp;ecirc; &amp;euml; &amp;igrave; &amp;iacute;
&amp;icirc; &amp;iuml; &amp;ntilde; &amp;ograve; &amp;oacute; &amp;ocirc;
&amp;oelig; &amp;otilde; &amp;ouml; &amp;oslash; &amp;ugrave; &amp;uacute;
&amp;ucirc; &amp;uuml; &amp;yuml;</pre></td>
</tr>
<tr valign="top">
<td>
<p><b>Punctuation:</b><br>
¿ ¡ « » § ¶<br>
† ‡ • - – —
</p>
</td>
<td><pre>
&amp;iquest; &amp;iexcl; &amp;laquo; &amp;raquo; &amp;sect; &amp;para;
&amp;dagger; &amp;Dagger; &amp;bull; - &amp;ndash; &amp;mdash;</pre></td>
</tr>
<tr valign="top">
<td>
<p><b>Commercial symbols:</b><br>
™ © ® ¢ € ¥ <br>
</p>
£ ¤</td>
<td><pre>
&amp;trade; &amp;copy; &amp;reg; &amp;cent; &amp;euro; &amp;yen;
&amp;pound; &amp;curren;
</pre></td>
</tr>
<tr valign="top"><td><b>Greek characters:</b> <br>
<p>α β γ δ ε ζ <br>
η θ ι κ λ μ ν <br>
ξ ο π ρ  σ ς <br>
τ υ φ χ ψ ω<br>
Γ Δ Θ Λ Ξ Π <br>
Σ Φ Ψ Ω
</p>
</td>
<td><pre>
&amp;alpha; &amp;beta; &amp;gamma; &amp;delta; &amp;epsilon; &amp;zeta;
&amp;eta; &amp;theta; &amp;iota; &amp;kappa; &amp;lambda; &amp;mu; &amp;nu;
&amp;xi; &amp;omicron; &amp;pi; &amp;rho;  &amp;sigma; &amp;sigmaf;
&amp;tau; &amp;upsilon; &amp;phi; &amp;chi; &amp;psi; &amp;omega;
&amp;Gamma; &amp;Delta; &amp;Theta; &amp;Lambda; &amp;Xi; &amp;Pi;
&amp;Sigma; &amp;Phi; &amp;Psi; &amp;Omega;
</pre></td>
</tr>
<tr valign="top">
<td>
<p><b>Math characters:</b> <br>
∫ ∑ ∏ √ − ± ∞<br>
≈ ∝ ≡ ≠ ≤ ≥<br>
× · ÷ ∂ ′ ″<br>
∇ ‰ ° ∴ ℵ ø<br>
∈ ∉ ∩ ∪ ⊂ ⊃ ⊆ ⊇<br>
¬ ∧ ∨ ∃ ∀ ⇒ ⇔<br>
→ ↔ ↑<br>
</p>
</td>
<td valign="middle"><pre>
&amp;int; &amp;sum; &amp;prod; &amp;radic; &amp;minus; &amp;plusmn; &amp;infin;
&amp;asymp; &amp;prop; &amp;equiv; &amp;ne; &amp;le; &amp;ge; 
&amp;times; &amp;middot; &amp;divide; &amp;part; &amp;prime; &amp;Prime;
&amp;nabla; &amp;permil; &amp;deg; &amp;there4; &amp;alefsym; &amp;oslash;
&amp;isin; &amp;notin; &amp;cap; &amp;cup; &amp;sub; &amp;sup; &amp;sube; &amp;supe;
&amp;not; &amp;and; &amp;or; &amp;exist; &amp;forall; &amp;rArr; &amp;hArr;
&amp;rarr; &amp;harr; &amp;uarr;
</pre></td>
</tr>
<tr valign="top"><td><i>x</i><sup>2</sup>   ≥   0 true.
<ul><li>To space things out, use non-breaking spaces - <tt>&amp;nbsp;</tt>.
</li><li><tt>&amp;nbsp;</tt> also prevents line breaks in the middle of text, this is useful in formulas.
</li></ul>
</td>
<td><pre>
&lt;i&gt;x&lt;/i&gt;&lt;sup&gt;2&lt;/sup&gt;&amp;nbsp;&amp;nbsp;&amp;ge;&amp;nbsp;&amp;nbsp;0 true.
</pre></td>
</tr>
</tbody></table>
<p><br>
</p>
<h2 name="Useful_Firefox_extensions"> Useful Firefox extensions </h2>
<ul><li> <a class="external" href="http://wikipedia.mozdev.org/">Wikipedia Firefox Extension</a> that adds a tag-helper toolbar.  It's very cool, and seems to work ok with Firefox 1.0.3.
</li><li> <a class="external" href="http://en.wikipedia.org/wiki/Wikipedia:Text_editor_support">External text editor support for Firefox and Mediawiki.</a>
</li></ul>
<h2 name="Other_references"> Other references </h2>
<h3 name="Devmo-specific"> Devmo-specific </h3>
<ul><li> <a href="Help:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all Devmo pages.
</li><li> <a href="Help:en/Custom_Templates">Notable Mediawiki templates</a> created for use on Devmo, with explanations.
</li><li> <a href="Project:en/Policies_and_guidelines">Devmo policies and guidelines</a>:
<ul><li> If you're not sure how to name your page, see <a href="Project:en/Page_Naming_Guide">Page naming guide</a>.
</li><li> <a href="Project:en/Disambiguation">MDC:Disambiguation</a>
</li></ul>
</li></ul>
<h3 name="External"> External </h3>
<ul><li> <a class="external" href="http://en.wikipedia.org/wiki/Wikipedia:How_to_edit_a_page">Wikipedia: How to edit a page</a>
</li><li> <a class="external" href="http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style">Wikipedia: Manual of Style</a>
</li><li> <a class="external" href="http://meta.wikimedia.org/wiki/Help:Contents">MediaWiki Handbook</a>
</li></ul>
{{ wiki.languages( { "de": "Help:de/Wiki_Markup_Referenz", "fr": "Help:fr/R\u00e9f\u00e9rence_des_balises_wiki", "pt": "Project:pt/Refer\u00eancia_de_marca\u00e7\u00e3o_wiki", "ja": "Help:ja/Wiki_Markup_Reference", "zh-cn": "Project:cn/Wiki_Markup_Reference" } ) }}
Revert to this revision