說明:列表

如同Wikipedia:如何編輯頁面#版式所述,列表寫法的標記具有許多種寫法存在。但是其中有乍看之下為正常表示,但有些實際上在看不到的地方裏呈現並不理想的狀態,成為各式問題的原因。

您使用維基百科的標記所編輯的文章,在被閱覽時會透過名為MediaWiki的軟件,轉換成網頁瀏覽器能夠辨識的形式XHTML。此依標記的方式可能無法產生理想的XHTML格式。本條目頁面在此舉出被推薦的範例和非推薦的範例,來加以解說列表寫法的標記方式。

推薦範例

定義的列表寫法

如果打算要做的是,具有簡短詞彙(用語或人名之類)與相對說明組合而成的列表的話,全部依照定義的列表寫法編輯最為合理。尤其是「登場人物與其解說」等情況,是用定義的列表寫法來記述的理想典範。

表示結果 輸入內容 XHTML 形象
用語1
用語1的說明
用語2
用語2的說明
; 用語1 : 用語1的說明
; 用語2 : 用語2的說明
<dl>
  <dt>用語1</dt>
  <dd>用語1的說明</dd>
  <dt>用語2</dt>
  <dd>用語2的說明</dd>
</dl>
dl
dt 用語1
dd 用語1的說明
dt 用語2
dd 用語2的說明

用定義的列表寫法所編輯的一個區塊(<dl>~</dl>)之中,用語(<dt>~</dt>)和其定義(<dd>~</dd>)將成對出現。這個是被推薦的寫法。

列表寫法

若是單純並不需要說明的列表,使用普通的列表寫法是比較理想的。而如果其順序是有意義的,使用帶有數字的列表寫法會更合適。

表示結果 輸入內容 XHTML 形象
  • foo
    • bar
  • hoge
    • fuga
    • piyo
* foo
** bar
* hoge
** fuga
** piyo
<ul>
  <li>foo
    <ul>
      <li>bar</li>
    </ul>
  </li>
  <li>hoge
    <ul>
      <li>fuga</li>
      <li>piyo</li>
    </ul>
  </li>
</ul>
ul
li foo
ul
li bar
li hoge
ul
li fuga
li piyo
  1. foo
    1. bar
  2. hoge
    1. fuga
    2. piyo
# foo
## bar
# hoge
## fuga
## piyo
<ol>
  <li>foo
    <ol>
      <li>bar</li>
    </ol>
  </li>
  <li>hoge
    <ol>
      <li>fuga</li>
      <li>piyo</li>
    </ol>
  </li>
</ol>
ol
li foo
ol
li bar
li hoge
ol
li fuga
li piyo

常見不良範例

例1

表示結果 輸入內容 XHTML 形象
  • 用語1
用語1的說明
  • 用語2
用語2的說明
* 用語1
: 用語1的說明
* 用語2
: 用語2的說明
<ul>
  <li>用語1</li>
</ul>
<dl>
  <dd>用語1的說明</dd>
</dl>
<ul>
  <li>用語2</li>
</ul>
<dl>
  <dd>用語2的說明</dd>
</dl>
ul
li 用語1
dl
dd 用語1的說明
ul
li 用語2
dl
dd 用語2的說明

像這個樣子用列表寫法所製作出的區塊(<ul>~</ul>)和定義的列表寫法所製作出的區塊(<dl>~</dl>)交互出現,造成區塊被切斷了。

例2

比上面好一點的例子。

表示結果 輸入內容 XHTML 形象
  • 用語1
    用語1的說明
  • 用語2
    用語2的說明
* 用語1
*: 用語1的說明
* 用語2
*: 用語2的說明
<ul>
  <li>用語1
    <dl>
      <dd>用語1的說明</dd>
    </dl>
  </li>
  <li>用語2
    <dl>
      <dd>用語2的說明</dd>
    </dl>
  </li>
</ul>
ul
li 用語1
dl
dd 用語1的說明
li 用語2
dl
dd 用語2的說明

雖然列表寫法的區塊(<ul>~</ul>)只有一個,但是列表寫法的各個構成(<li>~</li>)之中每次都產生一個定義的列表寫法的區塊(<dl>~</dl>)。另外一般在<dl>~</dl>之中,用語(<dt>~</dt>)和其定義(<dd>~</dd>)成對出現是最理想的,只出現<dd>~</dd><dl>~</dl>用法是不太好的。

例3

使用了定義的列表寫法結果卻失去了使用的意義。

表示結果 輸入內容 XHTML 形象
用語1
用語1的說明
用語2
用語2的說明
; 用語1 : 用語1的說明

; 用語2 : 用語2的說明

(用語1的行和用語2的行之間夾了一個空白行)

<dl>
  <dt>用語1</dt>
  <dd>用語1的說明</dd>
</dl>
<dl>
  <dt>用語2</dt>
  <dd>用語2的說明</dd>
</dl>
dl
dt 用語1
dd 用語1的說明
dl
dt 用語2
dd 用語2的說明

中間夾了空白行(只有換行沒寫任何東西)結果造成定義的列表寫法所產生的區塊被分隔為兩個。這樣子看似是為了方便編輯,遺憾的是得到了反效果。

表示結果 輸入內容 XHTML 形象
  • 用語1
  • 用語2
    • 用語3
* 用語1

* 用語2

** 用語3

(各行之間夾空白行)

<ul>
  <li>用語1</li>
</ul>
<ul>
  <li>用語2</li>
</ul>
<ul>
  <li>
    <ul>
      <li>用語3</li>
    </ul>
  </li>
</ul>
ul
li 用語1
ul
li 用語2
ul
li
ul
li 用語3
  1. 用語1
  1. 用語2
    1. 用語3
# 用語1

# 用語2

## 用語3

(各行之間夾了一個空白行)

<ol>
  <li>用語1</li>
</ol>
<ol>
  <li>用語2</li>
</ol>
<ol>
  <li>
    <ol>
      <li>用語3</li>
    </ol>
  </li>
</ol>
ol
li 用語1
ol
li 用語2
ol
li
ol
li 用語3

普通的列表寫法與帶有數字的列表寫法雖然可以說是相同的情形,但是問題更加嚴重。尤其是帶有數字的時候會造成數字不連續的悲慘狀況,和普通的列表寫法一樣會破壞版面的顯示。

為什麼不可以?

「說什麼XHTML,太過複雜讓人搞不懂,看起來漂亮不就好了?」的確這種想法是存在的。不過要注意那是偏重於明眼人(沒有視覺障礙的人)的思考方式。

具有視覺障礙的人使用聲音讀出瀏覽器來閱覽維基百科。這時若遇到上述的例2會怎麼讀出呢?

<以下是列表>
用語1、
<以下是定義列表>
<以下是剛剛的定義詞彙的說明>用語1的說明<說明結束>
<定義列表結束>
用語2、
<以下是定義列表>
<以下是剛剛的定義詞彙的說明>用語2的說明<說明結束>
<定義列表結束>
<列表結束>

如何?明明沒有讀出定義詞彙卻突然跑出個「剛剛的定義詞彙」,意思說不通。那麼在正確範例中又是如何呢?

<以下是定義列表>
<以下是定義詞彙>用語1、<定義詞彙結束>
<以下是剛剛的定義詞彙的說明>用語1的說明<說明結束>
<以下是定義詞彙>用語2、<定義詞彙結束>
<以下是剛剛的定義詞彙的說明>用語2的說明<說明結束>
<定義列表結束>

這樣就可以了。

另外還有傳輸資料量的問題。請將例1例2所產生的XHTML,和正確範例的情況做比較。變得更加簡潔了。只有一兩個雖然沒有太大差別在,當重複10次20次時就會出現明顯的差異。

各種變化

在用語後換行

定義的列表寫法也可以用下面的方式來寫。

表示結果 輸入內容 XHTML 形象
用語1
用語1的說明
用語2
用語2的說明
; 用語1
: 用語1的說明
; 用語2
: 用語2的說明
<dl>
  <dt>用語1</dt>
  <dd>用語1的說明</dd>
  <dt>用語2</dt>
  <dd>用語2的說明</dd>
</dl>
dl
dt 用語1
dd 用語1的說明
dt 用語2
dd 用語2的說明

像這樣在用語後面換列結果和被推薦的範例是完全一樣的。說明部分變長的時候用這種方式編輯應該會比較容易觀看原始檔。

比較長的說明

說明部分變長而想要分隔段落的時候,用以下的方法。

輸入內容

; 用語1
: 用語1的繁長說明用語1的繁長說明用語1的繁長說明用語1的繁長說明
: 用語1的繁長說明的下個段落用語1的繁長說明的下個段落用語1的繁長說明的下個段落
; 用語2
: 用語2的繁長說明用語2的繁長說明用語2的繁長說明
: 用語2的繁長說明的下個段落用語2的繁長說明的下個段落
表示結果 XHTML 形象
用語1
用語1的繁長說明用語1的繁長說明用語1的繁長說明用語1的繁長說明
用語1的繁長說明的下個段落用語1的繁長說明的下個段落用語1的繁長說明的下個段落
用語2
用語2的繁長說明用語2的繁長說明用語2的繁長說明
用語2的繁長說明的下個段落用語2的繁長說明的下個段落
<dl>
  <dt>用語1</dt>
  <dd>用語1的詳細說明...</dd>
  <dd>用語1的詳細說明的下個段落...</dd>
  <dt>用語2</dt>
  <dd>用語2的詳細說明...</dd>
  <dd>用語2詳細說明的下個段落...</dd>
</dl>
dl
dt 用語1
dd 用語1的詳細說明...
dd 用語1的詳細說明的下個段落...
dt 用語2
dd 用語2的詳細說明...
dd 用語2詳細說明的下個段落...

用語(<dt>~</dt>)和其定義(<dd>~</dd>)沒有1對1的成對,雖然不能說是最理想的狀態,不過只用維基百科的標記方式無法在<dd>~</dd>之中產生段落,為了方便起見而採用這個方式。

若是說明部分太長的話,也請檢討使用標題分出一個章節來寫。

嵌套

代碼:

# 内容1
#* 内容11
#* 内容12
# 内容2
## 内容21
## 内容22

效果:

  1. 內容1
    • 內容11
    • 內容12
  2. 內容2
    1. 內容21
    2. 內容22

其他

說明部分如果相當地短,慣例上常用以下的形式。

表示結果 輸入內容
  • 用語1 - 用語1的說明
  • 用語2 - 用語2的說明
* 用語1 - 用語1的說明
* 用語2 - 用語2的說明

別拘泥於門面

有時候會有,對標記方法理解不足、或是因為「這樣子比較好看」的理由,而使用不被推薦的標記方法。比方說在定義的列表寫法,有人會討厭把用語強制改成粗體字,也有人會討厭在列舉事項時前面多了個點。

但是請別忘了,每個人對好看的感覺不同,以及在您的使用環境下所看到的樣子不見得和其他人一樣。雖然多數人使用着標準的MonoBook面版,也可能有人使用cairn blue,或是使用獨創的用戶CSS。當改變使用環境,即使再怎麼調整版面的樣貌也是沒有意義的。

結果是使用被推薦的寫法來標記,會是符合最多人的閱覽方式(包含聲音瀏覽器)的最佳捷徑。

別拘泥於標記法

若是搞不懂、記不住在此所解說的內容的話,請先忽略它。與其煩惱怎麼標記,不如把心力花在記述優良的條目上。即使標記錯誤,以後也會有某個人幫忙修正(這是Wiki系統的一大優點)。看了其他人修改的方法,遲早也能學會更好的寫法吧。

發現有不被推薦的標記法時

當發現用被推薦的寫法改過的文章,被回復成不被推薦的寫法時,請教導出這個頁面的存在,說明修改的理由。因為做出回復的大多是新手,請不要強硬逼迫,親切地做出說明。也請參考Wikipedia:不要傷害新手

參見

維基百科特定幫助

  • Wikipedia:列表
  • {{·}} and {{•}} - Dots and bullets for horizontal link lists, such as in navboxes, which look like lists, but do not use HTML list mark-up.
    • {{flatlist}} - for a more semantically-correct and accessible 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.