View source for Help:Lists

This help page explains how to create and edit '''lists''' on Saintapedia.  The wiki offers three types of lists:

* unordered lists
* ordered lists 
* definition lists

Lists help readability and the ability to scan content quickly, improving [[usability]].

== List basics ==
Generally, the wikitext/Markup column is using [[Enhanced Editor]].  Many of those same lists can be generated using [[VisualEditor]]'s [[Help:Visual editor#Lists|Lists toolbar]].

=== Types ===

; Unordered lists
: Each item is on a new line starting with an asterisk <code>*</code> e.g. <code>* item</code>.
; Ordered lists
: Each item is on a new line starting with a hash <code>#</code> e.g. <code># item</code>.
; Definition lists
: Each item has two parts : the '''term''' and the '''description'''
: The ''term'' is on a new line starting with a semicolon <code>;</code> e.g. <code>; term</code>.
: The ''description'' follows on the same line after a colon <code>:</code> e.g.<code>; term : description</code>,
: or the ''description'' starts its own line with a colon <code>:</code> e.g. <code>: description</code> (there can be several descriptions per term, each one starting with a colon on a new line).

=== Enhanced editor examples ===
{{markup
| <nowiki>* Lists are easy to do:
** start every line
* with a star
** more stars mean
*** deeper levels</nowiki>
| {{crlf2}}
* Lists are easy to do:
** start every line
* with a star
** more stars mean
*** deeper levels
| <nowiki>* A newline
* in a list
marks the end of the list. Of course
* you can
* start again.</nowiki>
| {{crlf2}}
* A newline
* in a list
marks the end of the list. Of course
* you can
* start again.
| <nowiki># Numbered lists are good
## very organized
## easy to follow</nowiki>
| {{crlf2}}
# Numbered lists are good
## very organized
## easy to follow
| <nowiki>Definition lists:
; Term : Definition
or
; Term
: Definition
Can be used for more than terms and definitions.</nowiki>
| Definition lists:
; Term : Definition
or
; Term
: Definition
Can be used for more than terms and definitions.
| <nowiki>* Or create mixed lists
*# and nest them
*#* like this.
*#*; Fruits
*#*: Apple
*#*: Blueberry</nowiki>
| {{crlf2}}
* Or create mixed lists
*# and nest them
*#* like this.
*#*; Fruits
*#*: Apple
*#*: Blueberry
| <nowiki># A line break in an item is done with HTML&lt;br /&gt;like this.
# Just breaking the line will accidentally end the list
like this.
# This was supposed to be item 3, not a new list.</nowiki>
| {{crlf2}}
# A line break in an item is done with HTML<br />like this.
# Just breaking the line will accidentally end the list
like this.
# This was supposed to be item 3, not a new list.
| <nowiki>* A new paragraph in an item is also HTML.&lt;p&gt;Like so.&lt;/p&gt;
* Same goes for&lt;blockquote&gt;"block quotations"&lt;/blockquote&gt;like that.
* Note that these are done without line-breaking the wikimarkup.</nowiki>
| {{crlf2}}
* A new paragraph in an item is also HTML.<p>Like so.</p>
* Same for<blockquote>"block quotations"</blockquote>like that.
* Note that these are done without line-breaking the wikimarkup.
| <nowiki># Another way to make a new paragraph in an item is to start a new item but put a colon after the bullet character.
#: The new paragraph will appear, with the bullet item omitted. 
#: The new paragraph will, however, be indented.
# This works in ordered lists with the subsequent numbering continuing appropriately from the last number that was printed.</nowiki>
| {{crlf2}}
# Another way to make a new paragraph in an item is to start a new item but put a colon after the bullet character.
#: The new paragraph will appear, with the bullet item omitted. 
#: The new paragraph will, however, be indented.
# This works in ordered lists with the subsequent numbering continuing appropriately from the last number that was printed.
}}

== Paragraphs and other breaks ==
{{Anchor|Paragraphs in lists|reason=Old title, probably linked to many times.}}
All of the techniques described in this section can be used with each other and with any type of list, at any list level.

=== Paragraphs inside list items ===

For simplicity, list items in pure wiki markup cannot be more complex than a basic paragraph. A line break in the wikimarkup of a list item will end not just the item but the entire list, and reset the counter on ordered lists. Separating unordered list items with blank lines may look approximately normal on-screen, but it creates many separate one-item lists, which is a problem for people using [[screen readers]] and is prohibited by the policy on accessibility for people with disabilities, and is also problematic for machine analysis of the article, and for reuse of Saintapedia content more generally.

Paragraphs can be created inside list items by using the HTML {{tag|p}} (paragraph) element around the second and subsequent paragraphs, {{em|with no line breaks in the wikimarkup}}:
{{markup
| <nowiki># Paragraph 1.<p>Paragraph 2.</p><p>Paragraph 3.</p>
# Second item.</nowiki>
| {{crlf2}}
# Paragraph 1.<p>Paragraph 2.</p><p>Paragraph 3.</p>
# Second item
}}

Do not use {{tag|br|s}} as a substitute for {{tag|p}}; they have different semantic meanings and are not interchangeable.

For code readability (the improvement is more apparent when the paragraphs are long, rather than with short examples like these), line-breaks may be created with HTML comments, <code>&lt;!-- ... --&gt;</code>, that begin on one line against the end of that line's code and end on another line, against the beginning of ''that'' line's code:
{{markup
| <nowiki># Paragraph 1.<!--
 --><p>Paragraph 2.</p><!--
 --><p>Paragraph 3.</p>
# Second item.</nowiki>
| {{crlf2}}
# Paragraph 1.<!--
--><p>Paragraph 2.</p><!--
--><p>Paragraph 3.</p>
# Second item.
}}

This technique can be used with the other examples below.

=== Line breaks inside list items ===

Use a single {{tag|br|s}} for a non-paragraph line break, e.g. where using a nested list is not desired because sub-items are already preceded by numbers:

{{markup
| <nowiki># Gather ingredients:<br />1{{frac|1|2}}&nbsp;tsp eye of newt (powdered)<br />2 bat wings<br />4&amp;nbsp;cups mandrake root juice
# Stir in cauldron over low flame for 30 minutes</nowiki>
| {{crlf2}}
# Gather ingredients:<br />1{{frac|1|2}}&nbsp;tsp eye of newt (powdered)<br />2 bat wings<br />4&nbsp;cups mandrake root juice
# Stir in cauldron over low flame for 30 minutes
}}

=== Nested blocks inside list items ===

Similar HTML usage can provide for block quotations within list items:
{{markup
| <nowiki>* Beginning of first item.<blockquote>A large quotation.</blockquote>Rest of first item.<br /><br />
* Second item.</nowiki>
| {{crlf2}}
* Beginning of first item.<blockquote>A large quotation.</blockquote>Rest of first item.<br /><br />
* Second item.
| * Beginning of first item.<!--
 --><blockquote>A large quotation.</blockquote><!--
 -->Rest of first item.<br /><br />
* Second item.
| {{crlf2}}
* Beginning of first item.<!--
 --><blockquote>A large quotation.</blockquote><!--
 -->Rest of first item.<br /><br />
* Second item.
}}

Another case like this is small nested code blocks:
{{markup
| <nowiki>The {{tld|fnord}} template has two parameters:
# {{para|foo}} This indicates the ''foo'' level:<br /><pre>{{fnord|foo=20}}</pre>
# {{para|bar}} This indicates...</nowiki>
|The {{tld|fnord}} template has two parameters:
# {{para|foo}} This indicates the ''foo'' level:<br /><pre>{{fnord|foo=20}}</pre>
# {{para|bar}} This indicates...
}}

Here, linebreaks still cannot occur inside the list item, even if they are inside {{tag|pre|o}}, and the HTML comment trick does not work with {{tag|pre|o}}, which is why this technique is only suitable for {{em|short}} code examples.

=== Continuing a list item after a sub-item ===

In HTML, a list item may contain several sublists, not necessarily adjacent; thus there may be parts of the list item not only before the first sublist, but also between sublists, and after the last one.

In wikimarkup, unfortunately, sublists follow the same rules as sections of a page: the only possible part of the list item not in sublists is before the first sublist.

In the case of an unnumbered first-level list in wikimarkup, this limitation can be somewhat worked around by splitting the list into multiple lists; indented text between the partial lists may visually serve as part of a list item after a sublist. However, many readers find this confusing, as the indentation makes it look more like a continuation of the last sublist item.  Also, this technique may give, depending on CSS, a blank line before and after each list, in which case, for uniformity, every first-level list item could be made a separate list, with further complicates the code.  For complex lists like this, it is recommended to use the HTML technique, and to replace instances of the "quick and dirty" wikimarkup version with the HTML version.

Numbered lists illustrate that what should look like one list may, for the software, consist of multiple, nested lists. Unnumbered lists give a corresponding result, except that the problem of restarting with 1 is not applicable.
{{markup
| <nowiki>
<ol>
  <li>list item A1
    <ol>
      <li>list item B1</li>
      <li>list item B2</li>
    </ol>continuing list item A1
  </li>
  <li>list item A2</li>
</ol></nowiki>
| <ol>
  <li>list item A1
    <ol>
      <li>list item B1</li>
      <li>list item B2</li>
    </ol>continuing list item A1
  </li>
  <li>list item A2</li>
</ol>
| <nowiki># list item A1
## list item B1
## list item B2
#: continuing list item A1
# list item A2</nowiki>
| {{crlf2}}
# list item A1
## list item B1
## list item B2
#: continuing list item A1
# list item A2
}}

One level deeper, with a sublist item continuing after a sub-sublist, one gets even more blank lines; however, the continuation of the first-level list is not affected:
{{markup
| <nowiki># list item A1
## list item B1
### list item C1
##: continuing list item B1
## list item B2
# list item A2</nowiki>
| {{crlf2}}
# list item A1
## list item B1
### list item C1
##: continuing list item B1
## list item B2
# list item A2
}}

=== Spacing between items ===

For an ordered list with items that are more than one paragraph long, using the HTML comment trick mentioned above to add a blank line between items {{em|in the wikicode}} may be necessary to avoid editor confusion. This is done with a commented-out line:
 # First item&lt;!--
                                                 --&gt;
 # Second item
This doesn't produce unwanted visible spacing or bad list code in the rendered page like adding a plain blank line would:
# First item<!--
                                                 -->
# Second item
The comment must begin on the same line on which the preceding item ends, and the comment must end on its own line. Wrong:
 # First item
 &lt;!--
                                                 --&gt;
 # Second item
Wrong:
 # First item
 &lt;!--

 --&gt;#Second item

If the {{em|rendered text}} has a readability problem due to complex list items, or for some other reason space is desired between list items, simply add a pair of explicit HTML line-breaks to the end of the list items:
 # Item 1<nowiki><br /><br /></nowiki>
 # Item 2<nowiki><br /><br /></nowiki>
gives
# Item 1<br /><br />
# Item 2<br /><br />

Compare the version without the spacing:
# Item 1
# Item 2

== Changing the list type ==

The list type (which type of marker appears before the list item) can be changed in CSS by setting the [http://www.w3.org/TR/REC-CSS2/generate.html#lists list-style-type] property:

{{markup
| <nowiki><ol style="list-style-type: lower-roman;">
  <li>About the author</li>
  <li>Foreword to the first edition</li>
  <li>Foreword to the second edition</li>
</ol></nowiki>
| 2=<ol style="list-style-type: lower-roman;">
  <li>About the author</li>
  <li>Foreword to the first edition</li>
  <li>Foreword to the second edition</li>
</ol>
}}

== Extra indentation of lists ==

In a numbered list in a large font, some browsers do not show more than two digits, unless extra indentation is applied (if there are multiple columns: for each column). This is fixed by increasing the default indentation of 3.2em by 2em more, and it can be done in multiple ways:

When using explicit HTML {{tag|li|open}} list items, use an explicit CSS margin spacing of 4em to double the default 2em spacing. Though not the simplest, this is ''the [[Web standards|cleanest]] and most versatile method'', as it does not rely on any peculiarities of the parser, nor on abusing any semantic markup for purely visual purposes. It allows starting with a number other than 1 (''see below''). It is '''the recommended method for complex lists'''.

{{markup
|<nowiki><ol style="margin-left: 5.2em;">
  <li>abc</li>
  <li>def</li>
  <li>ghi</li>
</ol>
</nowiki>
|2=<ol style="margin-left: 5.2em;">
  <li>abc</li>
  <li>def</li>
  <li>ghi</li>
</ol>
}}

The parser translates an ordered list, {{tag|ol|open}}, without any list items, {{tag|li|open}} (in this case, it contains just another {{tag|ol|open}}) into a {{tag|div|open}} with a <code>style="margin-left: 2em;"</code>, causing indentation of the contents. This is '''a common, versatile but potentially confusing method''', as it allows starting with a number other than 1 (''see below''). It is ''[[kluge]]y, unnecessarily complex and may be confusing to other editors'', because it looks like invalid HTML. The parser corrects it on-the-fly, but only MediaWiki experts know this, with the result that other editors may try to "correct" it by removing what looks like redundant {{tag|ol|open}} code.
{{markup
|<nowiki><ol>
  <ol>
    <li>abc</li>
    <li>def</li>
    <li>ghi</li>
  </ol>
</ol>
</nowiki>
|2=<ol>
  <ol>
    <li>abc</li>
    <li>def</li>
    <li>ghi</li>
  </ol>
</ol>
}}

Just put an explicit HTML {{tag|ol}} around wiki-markup list items. It functions the same as the previous example with the content of the "ordered list without any list items", which itself is an ordered list, expressed with # codes; the HTML produced, and hence the rendering, is the same. This is '''the simplest method, and recommended when starting a simple list with number 1'''.
{{markup
|<nowiki><ol>
# abc
# def
# ghi
</ol>
</nowiki>
|2=<ol>
# abc
# def
# ghi
</ol>
}}

== Specifying a starting value ==

Specifying a starting value is only possible with HTML syntax by using the <code>start</code> and <code>value</code> attributes.

{{markup
|<nowiki>
<ol start="9">
<li>Amsterdam</li>
<li>Rotterdam</li>
<li>The Hague</li>
</ol></nowiki>
|2=
<ol start="9">
<li>Amsterdam</li>
<li>Rotterdam</li>
<li>The Hague</li>
</ol>
}}

Or:
{{markup
|<nowiki>
<ol>
<li value="9">Amsterdam</li>
<li value="8">Rotterdam</li>
<li value="7">The Hague</li>
</ol></nowiki>
|2=
<ol>
<li value="9">Amsterdam</li>
<li value="8">Rotterdam</li>
<li value="7">The Hague</li>
</ol>
}}

Only the first list item value needs to be set if you want the rest to increment from there:
{{markup
|<nowiki>
<ol>
<li value="9">Amsterdam</li>
<li>Rotterdam</li>
<li>The Hague</li>
</ol></nowiki>
|2={{crlf2}}
<ol>
<li value="9">Amsterdam</li>
<li>Rotterdam</li>
<li>The Hague</li>
</ol>
}}

== Comparison with a table ==

Apart from providing automatic numbering, the numbered list also aligns the contents of the items, comparable with using table syntax:
<pre>
{|
|-
| align="right" |  9. || Amsterdam
|-
| align="right" | 10. || Rotterdam
|-
| align="right" | 11. || The Hague
|}
</pre>
gives
{|
|-
| align="right" |  9. || Amsterdam
|-
| align="right" | 10. || Rotterdam
|-
| align="right" | 11. || The Hague
|}

This non-automatic numbering has the advantage that if a text refers to the numbers, insertion or deletion of an item does not disturb the correspondence.

== Multi-column bulleted list ==

<pre>
{|
|-
| valign="top" |
* 1
* 2
| valign="top" |
* 3
* 4
* 5
|}
</pre>
gives:
{| 
|-
| valign="top" |
* 1
* 2
| valign="top" |
* 3
* 4
* 5
|}

== Multi-column numbered list ==

Specifying a starting value is useful for a numbered list with multiple columns, to avoid restarting from one in each column. As mentioned above, this is only possible with HTML-syntax (for the first column either wiki-syntax or HTML-syntax can be used).

In combination with the extra indentation explained in the previous section:
<pre>
{| valign="top"
|-
| <ul><ol start="125"><li>a<li>bb<li>ccc</ol></ul>
| <ul><ol start="128"><li>ddd<li>ee<li>f</ol></ul>
|}
</pre>

gives

{| valign="top"
|-
| <ul><ol start="125"><li>a<li>bb<li>ccc</ol></ul>
| <ul><ol start="128"><li>ddd<li>ee<li>f</ol></ul>
|}

Using {{tl|multi-column numbered list}} the computation of the starting values can be automated, and only the first starting value and the number of items in each column except the last has to be specified. Adding an item to, or removing an item from a column requires adjusting only one number, the number of items in that column, instead of changing the starting numbers for all subsequent columns.

<pre>{{multi-column numbered list|125|a<li>bb<li>ccc|3|<li>ddd<li>ee<li>f}}</pre>

gives

{{multi-column numbered list|125|a<li>bb<li>ccc|3|<li>ddd<li>ee<li>f}}

<pre>{{multi-column numbered list|lst=lower-alpha|125|a<li>bb<li>ccc|3|<li>ddd<li>ee|2|<li>f}}</pre>

gives

{{multi-column numbered list|lst=lower-alpha|125|a<li>bb<li>ccc|3|<li>ddd<li>ee|2|<li>f}}

<pre>{{multi-column numbered list|lst=lower-roman|125|a<li>bb<li>ccc|3|<li>ddd<li>ee|2|<li>f}}</pre>

gives

{{multi-column numbered list|lst=lower-roman|125|a<li>bb<li>ccc|3|<li>ddd<li>ee|2|<li>f}}

<pre>{{multi-column numbered list|lst=disc|125|a<li>bb<li>ccc|3|<li>ddd<li>ee|2|<li>f}}</pre>

gives

{{multi-column numbered list|lst=disc|125|a<li>bb<li>ccc|3|<li>ddd<li>ee|2|<li>f}}

Note that the starting values of each column (125, +3, +2) have no effect when the disc list type is used.

== Streamlined style or horizontal style ==

It is also possible to present short lists using very basic formatting, such as:

 <nowiki>''Title of list:''</nowiki> example 1, example 2, example 3

''Title of list:'' example 1, example 2, example 3

This style requires less space on the page, and is preferred if there are only a few entries in the list, it can be read easily, and a direct edit point is not required. The list items should start with a lowercase letter unless they are proper nouns.

== Tables ==

A one-column table is very similar to a list, but it allows sorting. If the wikitext itself is already sorted with the same sortkey, this advantage does not apply.
A multiple-column table allows sorting on any column.

See also [[Help:Table]].

== Manipulating lists with user stylesheets ==
{{more|Help:User contributions#User styles}}

Virtual anything about how lists are displayed can be customized at the user end with [[Cascading Style Sheets|CSS]].  Some of the more useful tweaks are outline below.

=== Extra indentation ===

As noted above, in a numbered list in a large font, some browsers do not show more than two digits, unless extra indentation is applied (if there are multiple columns: for each column). While this should be fixed in the wikicode, user stylesheet CSS can work around the problem for as long as it is present, by increasing the default indentation of 3.2em by 2em more:
 ol { margin-left: 5.2em;}

=== Changing unordered lists to ordered ones ===

With the following [[Help:User contributions#User styles|user style]] CSS:
 ul { list-style: decimal; }
unordered lists are changed to ordered ones. This applies (as far as the CSS selector does not restrict this) to all ul-lists in the HTML source code:
* those produced with *
* those with <nowiki><ul></nowiki> in the wikitext
* those produced by the system

Since each special page, like other pages, has a class based on the pagename, one can separately specify for each type whether the lists should be ordered, see [[Help:User contributions#User styles]].

However, it does not seem possible to make all page history lists ordered (unless one makes ''all'' lists ordered), because the class name is based on the page for which the history is viewed.

== See also ==

* [[:Category:Wikipedia list formatting templates|List formatting templates]]

== External links ==

=== Wikipedia-specific help ===

* [[Wikipedia:Lists]] — For suggested styles of lists.''
*{{tn|·}} and {{tn|•}} — Dots and bullets for horizontal link lists, such as in [[Template:Navbox|navboxes]], which look like lists, but do not use HTML list mark-up.
**{{tl|flatlist}} — for a more accessible and semantically more correct way of marking up such lists.
* [[Wikipedia:Line break handling]] — Covers among other things how to properly handle the line wrapping in horizontal link lists.
* [[Wikipedia:Help desk]] — to ask questions about using lists in articles if you weren't able to find the information you need on this help page.
[[Category:Saintapedia editor help]]
[[Category:Help]]