HTMLの構造化 - リストタグ編

「HTMLの構造化 - 見出しタグを消す」では、HTMLの構造化でもっとも基本となる「見出しタグ」についてご紹介しました。

今回は、HTMLの構造化の第2弾として、「リストタグ」を使用した構造化についてご紹介します。
※リストタグの詳細については、「W3C勧告文」などをご覧ください。
※勧告文は、「HTML 4.01」と「XHTML™ 1.0」がありますので、使用するバージョンに合わせてご利用ください。

「HTMLの構造化」において、「リストタグ」をどこで使用するかというと、リストで表現するコンテンツはもちろんですが、ここで取り上げるのは、どのWEBサイトでも必ず付いている、各コンテンツへのメニューについてです。

各コンテンツへのメニューを「リストタグ」で作成することにより、各コンテンツの順序や、序列を表現することができます。
例えばあるサイトのメニューの場合以下の様に表現することができます。

<ul>
　　<li>HOME
　　<li>製品情報
　　<ol>
　　 　　<li>製品A
　　 　　<li>製品B
　　</ol>
　　<li>お問い合わせ
</ul>

ここで表現されている内容は、大項目として「HOME」、「製品情報」、「お問い合わせ」があり、「製品情報」の中項目として「製品A」、「製品B」があるという様になります。

実際の表示はこちらです。

• HOME
• 製品情報
  1. 製品A
  2. 製品B
• お問い合わせ

どうでしょうか、これではメニューとしては使えないと思われた方が多いと思います。
確かにこのままでは、コンテンツの一部として記載することはできますが、メニューとしてはデザイン的に使えなさそうです。

次回はこのリストをメニューとして使える様に、「CSS(Cascading Style Sheet)」を使ってデザインする方法をご紹介します。

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選