Jump to content

Wikitext coding conventions

Add links
From Meta, a Wikimedia project coordination wiki
(English) This is an essay. It expresses the opinions and ideas of some Wikimedians but may not have wide support. This is not policy on Meta, but it may be a policy or guideline on other Wikimedia projects. Feel free to update this page as needed, or use the discussion page to propose major changes.
Translate

This page summarizes coding conventions in writing wikitext.

Layout

[edit]

Sections

[edit]

Rules:

  • One space after leading =s and one before trailing =s.
  • No empty line between headings and content.
  • One empty line between two consecutive headings.
  • Use of lv1 headings (i.e. <h1>Foo</h1> or = Foobar =) should generally be avoided.
Correct Incorrect 
== Foobar ==
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

==Foobar==
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

== Foobar==
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

==Foobar  ==

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text indenting

[edit]

Rules:

  • One space after the last *, #, : and ;
  • No line breaks between indented lines of the same block (en:MOS:LISTGAP).
Correct Incorrect 
* Lorem ipsum dolor sit amet, consectetur adipiscing elit.
*: Nullam leo odio, faucibus sed lobortis ac, vestibulum ac turpis.
*:* Suspendisse vestibulum in sem sit amet placerat.
*:*# Donec cursus leo ac nunc porttitor blandit sed quis ex.

; Foobar
: Duis congue vitae lectus vitae mattis.
:: Morbi interdum suscipit diam, nec varius tellus rhoncus at.
:# Donec nibh ex, pellentesque eu sagittis a, tempus ut neque.
:# Curabitur eleifend quam leo, sed elementum ipsum viverra et.

*Lorem ipsum dolor sit amet, consectetur adipiscing elit.
*:Nullam leo odio, faucibus sed lobortis ac, vestibulum ac turpis.

*:*#Donec cursus leo ac nunc porttitor blandit sed quis ex.

;Foobar
: Duis congue vitae lectus vitae mattis.
::Morbi interdum suscipit diam, nec varius tellus rhoncus at.
:#  Donec nibh ex, pellentesque eu sagittis a, tempus ut neque.
:#Curabitur eleifend quam leo, sed elementum ipsum viverra et.

Tables

[edit]

Rules:

  • One space between {|, |+, |-, | and table/caption/row/cell attributes, if any.
  • One space followed by a pipe and another space between the aforementioned attributes of a caption/row/cell, if any, and its content.
  • One |- before each row; the first |- can be omitted if that row only contains th elements, but should be used if there is a caption.
  • Cells should be written on their own lines unless the whole table is exceptionally short and there are no attributes.
  • Attributes and CSS properties should also conform to HTML and CSS rules.
Correct Incorrect 
{| class="wikitable" style="margin: auto;"
|+ style="color: #ff0000;" | A red caption
|-
! style="font-size: large;" | A header cell with larger font
! Another header cell, unstyled
|- style="line-height: 2.5em;"
| style="background-color: #ffff00;" | Content cell with yellow background
| style="text-align: right;" | Right-aligned content cell
|}

{|class=wikitable style=margin:auto
|+A caption
!style="font-size: large;"| A header cell with larger font
!Another header cell, unstyled
|-style="line-height: 2.5em;"
| style=background-color:#ffff00;|Content cell with yellow background
|style=text-align:right; | Right-aligned content cell
|}

Formatting

[edit]
[edit]

Rules:

  • Internal links:
    • All underscores in page names need to be replaced with spaces and anchors decoded.
    • Write special page names in CamelCase correctly.
    • Abbreviated project namespace names are always be in its uppercase form (e.g. WP, WT, WB).
    • No spaces before nor after the separating colon.
    • No spaces before nor after square brackets and the pipe.
    • First letter of page names should be uppercased unless the (target) wiki disallows case-insensitive first letter.
  • External links:
    • https: and http: should be omitted if possible.
  • Interwiki links:
    • Interwiki prefixes should always be in its short and lowercased form (e.g. m, mw, c).
    • Always put a colon before interwiki prefixes to prevent accidental interlanguage linking (ones that were used in the pre-Wikidata era).

HTML and (inline) CSS

[edit]

General rules:

  • An attributes and its respective value are separated by an equal without any spaces around it.
  • Values should always be wrapped inside double quotes.
  • Consecutive attributes are separated by a space; no space should be placed before the closing greater-than sign.
  • Self-closing tags (e.g. <br />, <hr />) should be written with a space before the slash. Their opening forms (e.g. <br>, <hr>) are also valid in HTML5 and may be used.[1]
  • CSS declarations and their (property&colon)-value pairs should be separated with a space (e.g. <span style="font: italic small-caps bold 1.5em/3em Open Sans, sans-serif;">Foobar</span>). See also mw:Manual:Coding conventions/CSS.
  • Put a space right after <-- and right before --> (e.g. <-- Foobar -->, not <--Foobar-->).

List of deprecated HTML tags and attributes

[edit]

The following tags and attributes have been deprecated and should never be used. Use CSS instead.[2][3]

Attributes Description Alternate
Attribute Inline CSS
align, valign Specify alignment of elements horizontally and vertically, respectively. 
<div align="left">Foo</div>
<div align="center">Bar</div>
<div align="right">Baz</div>

<div style="text-align: left;">Foo</div>
<div style="text-align: center;">Foo</div>
<div style="text-align: right;">Foo</div>

{|
| valign="top" | Foo
| valign="middle" | Baz
| valign="bottom" | Baz
|}

{|
|-
| style="vertical-align: top;" | Foo
| style="vertical-align: middle;" | Baz
| style="vertical-align: bottom;" | Baz
|}
border, bgcolor, cellspacing, cellpadding Specifies border width, background color, space width between cells and padding of cells, respectively. 
{| border="1"
| Lorem
|}

{| style="border: 1px solid black;"
| Lorem
|}

{| bgcolor="yellow"
| Ipsum
|}

{| style="background-color: yellow;"
| Ipsum
|}

{| cellspacing="10"
| Dolor
| Sit
|}

{| style="border-collapse: separate; border-spacing: 10px;"
| Dolor
| Sit
|}

{| cellpadding="5"
| Amet.
|}

{|
| style="padding: 5px;" | Amet.
|}
height, width Specifies height and width of elements, respectively. 
{| height="30" width="15"
| Foobar
|}

{| style="height: 30px; width: 15px;"
| Foobar
|}
clear Clears right and/or left alignments 
<br clear="left">
<br clear="right">
<br clear="all">

<br style="clear: left;">
<br style="clear: right;">
<br style="clear: both;">
Tag Description Alternate
Tag Inline CSS
<big>...</big> Big text 
<big>Foobar</big>

<span style="font-size: larger;">Foobar</big>
<center>...</center> Center aligning content 
<center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus gravida varius lacus, in aliquet odio.
</center>

<center>
{| class="wikitable"
|+ Caption
! Header cell !! Header cell
|-
| Content cell || Content cell
|}
</center>

<div style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus gravida varius lacus, in aliquet odio.
</div>

{| class="wikitable" style="margin: auto;"
|+ Caption
! Header cell !! Header cell
|-
| Content cell || Content cell
|}
<font>...</font> Stylize text 
<font color="red" face="Roboto" size="5">Foobar</font>

<span style="color: red; font-family: Roboto; font-size: large;">Foobar</span>
<strike>...</strike> Strike text out 
<strike>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strike>

<s>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</s>
<tt>...</tt> Text in monospace font 
<tt>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</tt>

<span style="font-family: monospace, monospace;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

Usage notes

[edit]

These uses are strongly discouraged, not recommended or need to be careful with:

Example Rationale
Use class="center": 
<div class="center">
Center-aligned content.
</div>

...or class="nowrap": 

<span class="nowrap">Things that need to be on the same line.</div>
Assigning class .center to an element means that it will be stylized by an external CSS sheet loaded from elsewhere, which may be removed at any time depending on future updates. Inline CSS should be preferred as it will be saved permanently as plain text into the revision. For example, to prevent wrapping, use style="white-space: pre;" instead.
Replace <tt>Foobar</tt> with <kbd>Foobar</kbd> <kbd>...</kbd>s are used for keyboard inputs. If the context is coding, use <code>...</code> (for real codes) or <samp>...</samp> (for computer outputs). Otherwise, if you only want a monospace font, use font-family: monospace, monospace;. HTML should be semantically correct, not just visibly pretty.
Use ''Foo'' and '''Bar''' (or <i>Foo</i>/<b>Bar</b>) indiscriminately As explained above, HTML is meant to be semantically correct. <i>...</i> and <b>...</b> are, generally, for idomatic text and content requiring attention.[4] To specify emphasized content, use <em>...</em> and <strong>...</strong>.

See also

[edit]

References

[edit]
  1. ↑ HTML 5: Is it <br>, <br/>, or <br />?, StackOverflow
  2. ↑ Deprecated HTML Attributes, W3Docs
  3. ↑ Deprecated HTML Tags, W3Docs
  4. ↑ Using <b> and <i> elements, w3.org
Retrieved from "https://meta.wikimedia.org/w/index.php?title=Wikitext_coding_conventions&oldid=24282592"