Wikipedia>W.andrea: /* Usage */ show markup

2026-10-09T19:50:55Z

Usage: show markup

New page

<noinclude>{{Protection padlock|small=yes}}</noinclude>
{{Documentation subpage}}
{{Template redirect|Flt|Startflatlist}}
{{used in system}}
{{Uses TemplateStyles|Template:Hlist/styles.css}}
{{Cascade-protected template}}
This template provides a [[Web Content Accessibility Guidelines|WCAG]]/ISO standards-compliant accessible alternative to comma-, dash- or other single character-delimited lists, per [[Wikipedia:Manual of Style/Lists#Horizontal lists|Manual of Style/Lists § Horizontal lists]] and [[Wikipedia:Manual of Style/Accessibility#Horizontal lists|Manual of Style:Accessibility § Horizontal lists]].

Lists output by {{Template link general|Flat list}} and {{Template link general|Horizontal list}} are semantically and visually identical, differing only in the underlying wiki-markup they expect as input to create the lists.

{{TOC limit|3}}

== Usage ==
{{Template link general|Flat list}} starts a horizontal list, such as:

{{demo|<nowiki>{{Flat list|
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}</nowiki>|reverse=yes}}

If this template is used with no parameters, {{Template link general|End flat list}} is required. For navigation boxes using {{Template link general|Navbox}}, one can set {{Para|listclass|hlist}} and achieve the same styling without using this template. For image captions, list (i.e. leading asterisk) markup does not work, so consider using {{Template link general|Horizontal list}} instead.

== Parameters ==
{{#switch:{{NAMESPACE}}:{{ROOTPAGENAME}}
| #default = {{Format TemplateData|1=<templatedata>{
"description": {
"en": "Used to create horizontal bulleted lists."
},
"format": "block",
"paramOrder": [
"class",
"style",
"indent",
"1"
],
"params": {
"1": {
"label": {
"en": "Content"
},
"description": {
"en": "The list to wrap."
},
"suggested": true,
"type": "content"
},
"class": {
"label": {
"en": "Extra Classes"
},
"description": {
"en": "Adds extra CSS classes to the containing div."
},
"type": "string"
},
"style": {
"label": {
"en": "CSS Style"
},
"description": {
"en": "Adds extra CSS properties to the containing div. Complex styles should not be used in articles (per [[MOS:DEVIATIONS]]) but may be acceptable on user, project and talk pages."
},
"example": "\n border: solid 1px silver;\n background: lightyellow;\n color: black;\n",
"type": "string"
},
"indent": {
"label": {
"en": "Indent"
},
"description": {
"en": "Indents the list by a number of standard indents (one indent being 1.6[[em (typography)|em]]). (Useful in an indented discussion thread.)"
},
"example": "2",
"type": "number"
}
}
}</templatedata>}}
| Template:End flat list = {{Format TemplateData|1=<templatedata>{
"description": "Ends a flat list created by {{[[Template:Flat list|Flat list]]}}.",
"format": "inline",
"params": {}
}</templatedata>}}
}}

== Examples ==
<syntaxhighlight lang="wikitext">{{Flat list|
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}</syntaxhighlight>
produces:
{{Flat list|
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}

=== Alternative syntax ===
<syntaxhighlight lang="wikitext">{{Start flat list}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{End flat list}}</syntaxhighlight>
produces:
{{Start flat list}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{End flat list}}

=== Syntax for ordered lists ===
<syntaxhighlight lang="wikitext">{{Flat list|
# [[first]]
# [[second]]
# [[3|third]]
# [[fourth]]
# [[fifth]]
# [[sixth]]
}}</syntaxhighlight>
produces:
{{Flat list|
# [[first]]
# [[second]]
# [[3|third]]
# [[fourth]]
# [[fifth]]
# [[sixth]]
}}

=== Using optional parameters ===
<syntaxhighlight lang="wikitext">{{Flat list|indent=2|class=nowraplinks|style=background-color: var(--background-color-notice-subtle, lightgray); border: thin solid silver; color: var(--color-base, black);|
* [[Alpine skiing at the 1936 Winter Olympics]]
* [[Alpine skiing at the 1948 Winter Olympics]]
* [[Alpine skiing at the 1952 Winter Olympics]]
* [[Alpine skiing at the 1956 Winter Olympics]]
* [[Alpine skiing at the 1960 Winter Olympics]]
* [[Alpine skiing at the 1964 Winter Olympics]]
}}</syntaxhighlight>
produces:
{{Flat list|indent=2|class=nowraplinks|style=background-color: var(--background-color-notice-subtle, lightgray); border: thin solid silver; color: var(--color-base, black);|
* [[Alpine skiing at the 1936 Winter Olympics]]
* [[Alpine skiing at the 1948 Winter Olympics]]
* [[Alpine skiing at the 1952 Winter Olympics]]
* [[Alpine skiing at the 1956 Winter Olympics]]
* [[Alpine skiing at the 1960 Winter Olympics]]
* [[Alpine skiing at the 1964 Winter Olympics]]
}}

=== Generating an inline list preceded by text ===
In some situations, it may be useful to present an inline list preceded by other text. Normally, this template is rendered as a block element that starts on a new line. In order to prevent that new line, use {{para|class|inline}} <em>and</em> wrap the preceding text and this template in {{tag|div}} tags (div tags are not necessary if the template is inside a table cell).

====Without div tags (normal usage; note that class=inline does not work)====
<syntaxhighlight lang="wikitext">
Here's a list: {{flat list
|class=inline
|1=
* foo
* bar
* baz
}}
</syntaxhighlight>
produces:
Here's a list: {{flat list
|class=inline
|1=
* foo
* bar
* baz
}}

====With div tags (class=inline works)====
<syntaxhighlight lang="wikitext">
<div>Here's a list: {{flat list
|class=inline
|1=
* foo
* bar
* baz
}}</div>
</syntaxhighlight>
produces:
<div>Here's a list: {{flat list
|class=inline
|1=
* foo
* bar
* baz
}}</div>

== Technical details ==
This template uses the {{Code|.hlist}} [[CSS]] class defined in [[Template:Hlist/styles.css]] to generate horizontal lists. It causes ordinary HTML list items to be displayed inline (horizontally), where normally they would be displayed as block elements (vertically). The class also generates the [[interpunct]]s between list items and parentheses around nested lists.

{| class="wikitable"
! Wikitext
! Expanded template
! HTML
|- style="vertical-align: top;"
| <syntaxhighlight lang="wikitext">{{Flat list|
* cat
* dog
* horse
* cow
* sheep
* pig
}}</syntaxhighlight>
| {{nowiki2|tag=pre|{{Flat list|
* cat
* dog
* horse
* cow
* sheep
* pig
}}}}
| <syntaxhighlight lang="html"><div class="hlist"><ul>
<li>cat</li>
<li>dog</li>
<li>horse</li>
<li>cow</li>
<li>sheep</li>
<li>pig</li>
</ul></div></syntaxhighlight>
|}

== Maintenance categories ==
* {{Category link with count|Pages using flat list with unknown parameters}}

== See also ==
* {{Template link general|End flat list}}
* {{Template link general|Horizontal list}}
* {{Template link general|Plain list}} and {{Template link general|Unbulleted list}}
* {{Template link general|Bulleted list}}
* {{Template link general|Ordered list}}
* {{Template link general|Nowrap}}
* {{Template link general|Page list}}
* [[Wikipedia:Manual of Style/Accessibility#Horizontal lists|Manual of Style:Accessibility § Horizontal lists]]
{{HTML lists}}
<includeonly>{{Sandbox other||
[[Category:List formatting and function templates|Flatlist]]
[[Category:Typing-aid templates|Flatlist]]
}}</includeonly>

Template:Flat list/doc - Revision history

Wikipedia>W.andrea: /* Usage */ show markup