HTMLタグ「ol,li」のリスト番号を逆から ＆ 指定した数字を表示せる方法

HTLMの順序付きリスト「<ol><li>」は番号を順に表示してくれるタグですが、これを逆に数字の大きい順から表示されてくれる方法と、開始の数字を指定する方法。
そして、例えば5番目のリストの数字を10に変更するなど、指定した数字に変更する方法をご紹介します。

逆に表示させる（大きい順に並べる）

「reversed」を使って逆に表示させます。

コードはこちら。

<ol reversed>
	<li>モスバーガー</li>
	<li>マクドナルド</li>
	<li>ファーストキッチン</li>
</ol>

表示はこうなります。

1. モスバーガー
2. マクドナルド
3. ファーストキッチン

HTML・HTML5の場合は「<ol reversed>」ですが、XHTMLの場合は「<ol reversed="reversed">」となります。

最近のブラウザのバージョンだとほぼ対応していていますが、確実にしたい場合は下で紹介している「指定した数字を表示させる」方法で1つ1つ指定した方がいいかもしれません。

指定した数字を表示させる

「value」を使ってそれぞれのliに任意の数字をつけます。

コードはこちら。

<ol>
	<li value="5">グーグル</li>
	<li value="7">ヤフー</li>
	<li value="1">MSM</li>
</ol>

表示はこうなります。

5. グーグル
7. ヤフー
1. MSM

HTML4.01では非推奨のため、DOCTYPE宣言を「Strict」にしている場合は使えません。

開始の数字を指定する

「start」を使って開始の番号を指定します。

コードはこちら。

<ol start="21">
	<li>チワワ</li>
	<li>柴犬</li>
	<li>フレンチブルドッグ</li>
</ol>

表示はこうなります。

21. チワワ
22. 柴犬
23. フレンチブルドッグ

valueと同じくHTML4.01では非推奨のためDOCTYPE宣言を「Strict」にしている場合は反映されません。
HTML5では非推奨ではありません。

組み合わせて使う

組み合わせて使用する事で色々な表示が可能です。

コードはこちら。

<ol start="18" reversed>
<li>コカコーラ</li>
	<li>ペプシ</li>
	<li>ドクターペッパー</li>
	<li>いろはす</li>
<li value="3">グラソービタミンウォーター</li>
</ol>

表示はこうなります。

18. コカコーラ
19. ペプシ
20. ドクターペッパー
21. いろはす
3. グラソービタミンウォーター

これらの詳細はこちら「The ol element (W3C)」で解説されています。

おまけ情報ですが、リストの説明をつけたいときはHTML5での新要素「figure」「figcaption」がおすすめです。
figureでグループ化し、figcaptionでリストの説明を書きます（キャプション）。

<cite>は書籍や映画、その他作品の名前に付ける要素です。

コードはこちら。

<figure>
	<figcaption>ブラッドピットが出演している好きな映画</figcaption>
	<ol>
		<li><cite>リバー・ランズ・スルー・イット</cite> 1992年</li>
		<li><cite>インタビュー・ウィズ・ヴァンパイア</cite> 1994年</li>
	<li><cite>セブン</cite> 1995年</li>
	</ol>
</figure>

表示はこうなります。

SEOにどう影響するかはわかりませんが、検索エンジンにそのリストについての内容を簡潔に伝えることができますので、関係ないワードを埋め込むなどのスパムでない限りいい印象にはなるかと思われます。