【HTML】UL/OLで子要素を含んだリストの書き方知ってますか？

isloop

11年前

リストを表示させる上で欠かすことの出来ないHTMLタグがULとOLですね。

strongタグや、H1タグなみによく使われていると思うのですが、UL、OLに子要素を表示させる書き方って知ってますか？

「子要素？なにそれ？」

って方もいらっしゃると思いますが、こんなリストを作る書き方です。

水樹奈々の代表曲の下にさらにリストがありますよね。これを子要素のリストというのですが、この書き方以外に知られてないと思いますので今日ご紹介したいと思います。

UL/OLで子要素を含んだリストの書き方

上のリストはこのようなHTMLで構成されています。

<ul>
<li>水樹奈々の代表曲
<ul>
<li>BRIGHT STREAM</li>
<li>深愛</li>
<li>ETERNAL BLAZE</li>
</ul>
</li>
<li>水樹奈々の生年月日</li>
<li>水樹奈々の出身</li>
</ul>

そう。つまり子要素をいれたい部分の<li>と</li>の間に、<ul><li></li></ul>を入れてしまうわけです。

また、子要素の表題は<ul>の上に書いておけばキチンと表示されます。

一見書くのが難しそうに見えますが、<li>の中にもっかい<ul>のリストを作ると覚えておけばたやすく、子要素を含んだリストが書けてしまいます。

また、上ではULの例を書きましたがOLでもまったく同じです。

UL、OLを制すものブログのテンプレートを制す。

と言いたいぐらいUL/OLは大事なタグだと思うので、ぜひ使い方を覚えておきましょう。

ちなみに和洋風KAIでは、右上のメニュー、右のサイドバーの関連記事のリスト、下の関連記事のリストはUL、OLを使って作ってます。

この場所はリストですとキチンと検索エンジンに示すことができるので、UL/OLは、使い勝手はもちろん、SEO的にも優れた、非常に有用なタグだと思います。