【HTML5学習】 Part.7 - list-

本日はリストについて。

箇条書き と 連番 リスト

<ul></ul> : (unorder list) 項目の順序があまり大きな意味を持たない、箇条書きのリストを表す。

<ol></ol> : 順序の決まったリスト、数字連番がついたリストを表す。

<li></li> : (list item) リスト項目を表す。ulやolのブロック要素の中に入れることでリストを作成していく。

ul : 箇条書きリスト

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Ruby</li>
    <li>PHP</li>
</ul>

ol : 連番付きリスト

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Ruby</li>
    <li>PHP</li>
</ol>

記述リスト

<dl></dl> :(description list) 名前と値のグループからなるリスト。

<dt></dt> : (description term) 名前。用語や文章を表す。dlの中に複数入れられる。

<dd></dd> : (description, definition) 用語や文章の説明をする。dlの中に複数入れられる。

<dl>
    <dt>5月12日（金）</dt>
    <dd>Qiita更新 1回目</dd>
    <dt>5月12日（金）</dt>
    <dd>Qiita更新 2回目</dd>
</dl>

定義を表す

HTML5以前では、dl,dt,ddが定義を表すものとして使われていましたが、上記のように「名前と値のグループからなるリスト」に変更。
HTML5ではdtは「定義語を示す」ではなくなったので、<dfn></dfn>を入れることで定義語を示すようになります。

<dfn></dfn> : 定義語を示す

<dl>
    <dt><dfn>ゴールデンウィーク</dfn></dt>
    <dd>４月末から5月初めにかけての大型連休</dd>
    <dt><dfn>シルバーウィーク</dfn></dt>
    <dd>秋の大型連休</dd>
</dl>

<abbr></abbr> : 略語を表す要素。dfnとセットで使うことが多い。
デフォルトで、下線が引かれたテキストになり、下線が引かれた部分にカーソルを合わせると略す前の言葉が現れる。

<dl>
    <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
    <dd>HTMLとは<dfn>HyperText Markup Language</dfn>の略で、ページの要素や構造を指定するための言語</dd>

</dl>

< abbr >, < dfn > は < dl > , < dt >と一緒に使う決まりはなく、< p >タグの中に入れたりしてもOKだそうです。

ulとかはよく使っていましたが、dlはほとんど使ったこと無かったですし、dfnは1回もなし・・・
dlたちは便利に使えそうだなと感じたので、これからどんどん活用していきます＾＾