 | This help page is ahow-to guide. It explains concepts or processes used by the Wikipedia community. It is not one ofWikipedia's policies or guidelines, and may reflect varying levels ofconsensus. |
This help page explains how to create and format lists on the English Wikipedia.
There are three types of lists:unordered lists,ordered lists, anddescription lists (a.k.a.definition lists orassociation lists). In the following sections, various list types are used for different examples, but other list types will generally give corresponding results. Ordered (numbered) lists should usually be used only for list items that should be in a specific order, such as steps in a cookingrecipe.
| Markup | Renders as |
|---|---|
|
|
|
marks the end of the list. Of course
|
| Markup | Renders as |
|---|---|
|
|
| Markup | Renders as |
|---|---|
| Description (definition, association) lists:
or
Can be used for more than terms and definitionsper se.or
|
| Markup | Renders as |
|---|---|
|
|
|
like this.
|
|
|
There must be no blank lines between list items. Blank lines terminate a list, splitting it into twoseparate lists. This is most easily illustrated using an ordered list:
| Markup | Renders as |
|---|---|
|
|
|
|
In the second example above, the numbering resets after the blank line. This problem is less noticeable with other list types, but it still affects the underlying HTML code and may have disruptive effects for some readers; seeWP:LISTGAP for details.
In order tobe a list, each line must begin the same way. This holds true for mixed lists.
| Markup | Renders as |
|---|---|
|
|
|
|
This mistake can also be less noticeable in some circumstances, but it creates single-item lists of different types; besides being semantically wrong, this may cause disruptive side effects for some readers.
Do not use a semicolon simply to give a list a title. Semicolons and colons makeone kind of list; asterisks make another.
| Markup | Renders as |
|---|---|
;Never do*this |
|
All of the techniques described in this section can be used with each other and with any type of list, at any list level.
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 usingscreen readers and is discouraged bythe guideline on accessibility for people with disabilities, and is also problematic for machine analysis of the article, and for reuse of Wikipedia content more generally.
Paragraphs can be created inside list items by using the HTML<p>...</p> (paragraph) element around the second and subsequent paragraphs,with no line breaks in the wikimarkup:
| Markup | Renders as |
|---|---|
|
|
Do not use<br> as a substitute for<p>...</p>; they have differentsemantics 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,<!-- ... -->, that begin on one line against the end of that line's code and end on another line, against the beginning ofthat line's code:
| Markup | Renders as |
|---|---|
|
|
This technique can be used with the other examples below.
Use a single<br /> 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 | Renders as |
|---|---|
|
|
Thismust be done with coded<br /> line breaks; an actual wikitext linebreak (i.e. pressingenter/return while writing the source code) will bring the list to an end.
Similar HTML usage can provide for block quotations within list items:
| Markup | Renders as |
|---|---|
|
|
Another case like this is small nested code blocks:
| Markup | Renders as |
|---|---|
| The
|
Here, linebreaks still cannot occur inside the list item, even if they are inside<pre>, and the HTML comment trick does not work inside<pre>, which is why this technique is only suitable forshort code examples. For longer ones, seethe<syntaxhighlight> MediaWiki tag.
The HTML comment trick does workbetween elements inside the same list item:
| Markup | Renders as |
|---|---|
|
|
Unlike in HTML, in wikimarkup, unfortunately, sublists follow the same rules as sections of a page. In other words a list item cannot continue on again after sublist has started. Instead, a new item (or new list) must start.
This makes the following type of example impossible using only wikimarkup (whether using numbered or bulleted lists, or a combination):
|
For single lists with multiple subitems / indentation levels, one can either use HTML tags directly, or the{{ordered list}} and/or{{bulleted list}} templates. The HTML tag for an unordered (bulleted) list is<ul> and for an ordered (numbered) list is<ol>, both enumerate each new list item using the<li> tag. For complex lists, use of the templates is usually recommended.
Attempting to produce a single multilayered list using wikimarkup will instead result in the software attempting to create multiple, nested lists, which generally results in visually confusing formatting and/or breaking list numbering, as well as breaking functionality for users of screen readers for the visually impaired.
For a bulleted list, this limitation can be somewhat worked around by splitting every item into a new list; and using indented text where necessary. However this is still not recommended. With numbered lists this approach will break the numbering.
| Markup | Renders as |
|---|---|
|
|
|
|
|
|
The last of these is visually confusing and results in invalid markup. It caused the creation of an embedded but improperly formed description list (the<dl> HTML element): it has a definition, indicated by: (in HTML that's<dd>), but no term (the missing; element, which corresponds to HTML<dt>).Similar problems occur with bulleted and mixed bulleted/numbered lists:
| Markup | Renders as |
|---|---|
|
|
|
|
|
|
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 | Renders as |
|---|---|
|
|
|
|
|
|
Again, the third example is not desirable, as it produces broken markup and is visually confusing anyway.
See alsometa:Template:List demo.
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 itemsin the wikicode may be necessary to avoid editor confusion. This is done with a commented-out line:
# First item<!-- --># Second item
This doesn't produce unwanted visible spacing or bad list code in the rendered page like adding a plain blank line would:
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<!-- --># Second item
Wrong:
# First item<!---->#Second item
If therendered 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<br/><br/># Item 2<br/><br/>
gives
Compare the version without the spacing:
The list type (which type of marker appears before the list item) can be changed in CSS by setting thelist-style-type property. This can be done using the{{Ordered list}} template:
| Markup | Renders as |
|---|---|
{{ordered list|type=lower-roman | About the author | Foreword to the first edition | Foreword to the second edition}} |
|
Or, using HTML:
| Markup | Renders as |
|---|---|
|
|
In a numbered list in a large font, some browsers do not show more than two digits (2 spaces width) of indentation, 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<li> list items, use an explicit CSS margin spacing of 4em to double the default 2em spacing. Though not the simplest, this isthecleanest and most versatile method, as it does not rely on any peculiarities of the parser, nor on abusing anysemantic markup for purely visual purposes. It allows starting with a number other than 1 (see below). It isthe recommended method for complex lists.
| Markup | Renders as |
|---|---|
|
|
{{ordered list|style=margin-left: 2em | abc | def | ghi}} |
|
The parser translates an ordered list,<ol>, without any list items,<li> (in this case, it contains just another<ol>) into a<div> with astyle="margin-left: 2em;", causing indentation of the contents. This isa versatile but potentially confusing method, as it allows starting with a number other than 1 (see below). It iskludgey, unnecessarily complex, and looks like invalid HTML. While the parser corrects it on-the-fly, only MediaWiki experts know this, with the result that other editors are likely to try to "correct" it by removing what looks like redundant<ol> code.
| Markup | Renders as |
|---|---|
|
|
Just put an explicit HTML<ol>...</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 isthe simplest method, and recommended when starting a simple list with number 1.
| Markup | Renders as |
|---|---|
|
|
A list of one or more lines starting with a colon creates an HTML5description list (formerlydefinition list in HTML4 andassociation list in draft HTML5), without terms to be defined/described/associated, but with the items as descriptions/definitions/associations, hence indented. However, if the colons are in front of the codes "*" or "#" of an unordered or ordered list, the list is treated as one description/definition, so the whole list is indented.
Deprecated method: The technique below produces poorly formed (though technicallyDTD-validating) markup and abuses thesemantic HTML purpose of description lists for a purely visual effect, and is thus a usability and accessibility problem. It will work in a hurry, butshould be replaced with cleaner code; seeWP:Manual of Style/Glossaries for several approaches.
| Markup | Renders as |
|---|---|
:# abc:# def:# ghi |
|
Specifying a starting value is possible with the{{ordered list}} template by using thestart andvalue attributes.
| Markup | Renders as |
|---|---|
{{ordered list|start=9| Amsterdam| Rotterdam| The Hague}} |
|
Or:
| Markup | Renders as |
|---|---|
{{ordered list| item1_value=9 | 1 = Amsterdam| item2_value=8 | 2 = Rotterdam| item3_value=7 | 3 = The Hague}} |
|
Alternatively, only the list item whose value is being set needs to be written in HTML, the rest of the list may use wiki syntax:
| Markup | Renders as |
|---|---|
|
|
This does not work inside<ol>...</ol>.
Apart from providing automatic numbering, the numbered list also aligns the contents of the items, comparable with using table syntax:
{||-|style="text-align: right"| 9.|| Amsterdam|-|style="text-align: right"| 10.|| Rotterdam|-|style="text-align: right"| 11.|| The Hague|}
gives
| 9. | Amsterdam |
| 10. | Rotterdam |
| 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.
Wrap a list in{{Columns-list}} to add columns.
{{columns-list|colwidth=10em|* 1* 2* 3* 4* 5}} |
|
This setup also works with numbered lists.
{{columns-list|colwidth=10em|# a# b# c# d # e}} |
|
{{columns-list}} isthe general solution. You can combine it with any other type of list formatting, including but not limited to every type of list syntax mentioned on this page. It works with content that are not lists as well.
It is also possible to present short lists using very basic formatting, such as:
''Title of list:'' 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.
See alsoWP:HLIST.
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 alsoHelp:Table.
List bullets and numbers can sometimes overlap left-floating images, and indented lines may not appear correctly when next to left-floating images. For example:
| Markup | Renders as |
|---|---|
| 
|
| First line
|
The{{flowlist}} template enables lists to stay clear of these left-floating objects:
[[File:Westminstpalace.jpg|left|thumb|100px]]{{flowlist}}<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>{{endflowlist}}{{flowlist}}First line*Second line**Third line***Fourth line{{endflowlist}}
Renders as:
First line
This method will not work inside of a table, and if your list is longer than the floated element, then the list will not flow around the image like normal, but instead be one block, leaving white space below the floated element.
Virtually anything about how lists are displayed can be customized at the user end withCSS. Some of the more useful tweaks are outlined below. Of course, you enter the code in Text Editor mode — if you enter it in WYSIWYG mode, it is entered using escape characters. Also, if you enter HTML in the Text Editor and switch to WYSIWYG mode, the HTML is lost and re-converted to markdown without styles.
As noted above, in a numbered list in a large font, some browsers do not show more than two digits of indentation width, unless extra indentation is applied (if there are multiple columns; then indentation 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;}
With the followinguser style CSS,ul{list-style:decimal;}, unordered lists are changed to ordered ones for sighted users (but not users who must use assistive technology). This applies (as far as the CSS selector does not restrict this) to all ul-lists in the HTML source code:
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, seeHelp:User contributions#User styles andHelp:What links here#User styles.
However, it does not seem possible to make all page history lists ordered (unless one makesall lists ordered), because the class name is based on the page for which the history is viewed.
The easiest way to find relevant articles for a new list or missing entries in an existing one is by finding the most relevantcategory and checking its entries. Sometimes lists are about things that areintersections of categories for which thePetScan tool can be used.
More relevant articles may also be found linked in the list's topic's article and the articles already featured in the list − most often in their"See also" sections (if existent) and the automatically suggested "RELATED ARTICLES" below them.
Other ways to find relevant articles includesearching Wikipedia for the lists' topic and searching the Web for the topic in quotes" (with synonyms also in quotes and appended after anOR) and appending the wordwiki orWikipedia orsite:Wikipedia.org to them.
Lastly the "What links here"-tool can be used on the list's topic's article to find relevant articles.
For lists that do not require the entries to have a Wikipedia article there are additional ways of finding relevant entries such as lists on external websites (e.g.Goodreads for books) − typically involving Web searches.
