STEP5: 箇条書きを入れてみよう!

箇条書きを入れてみます。箇条書きには、順番無し箇条書き (Unordered List)、順番月箇条書き (Ordered List)、説明付き箇条書き (Definition List)の三種類があります。

順番無しリスト; UL 要素 - Unordered List

  1. first.html をテキストエディタで開きましょう。
  2. <body> から </body> までの間に、次のように記述しましょう;
    <h1>はじめての HTML 文書</h1>
    ...省略...
    <h2>BODY 要素</h2>
    <h3>Headings 要素</h3>
    <ul>
      <li>H1 要素 ... Chapter 章</li>
      <li>H2 要素 ... Section 節</li>
      <li>H3 要素 ... SubSection 小節</li>
      <li>H4 要素 ... SubSubSection 小々節</li>
      <li>H5 要素 ... Paragraph 段落見だし</li>
      <li>H6 要素 ... SubParagraph 小段落見だし</li>
    </ul>
    
    記述できたら、「上書き保存」してください。
  3. first.html をブラウザで開いて下さい。先ほど開いたままになっている場合は、「更新」 (reload) すれば結構です。

ul 要素は子供要素に li 要素しか持ち得ません。li 要素は内容に任意のインライン要素とブロック要素を持ち得ます。

li 要素の終了タグは省略可能ですが、HTML の後継言語 XHTML ではタグの省略は許されませんので、 HTML 4 でも省略しないように癖をつけておく事を御奨めします。

順番付き箇条書き; OL 要素 - Ordered List

<h2>HTML 要素</h2>
<p>HTML 文書は要素から成っています。
その最大の要素は HTML 要素です。</p>
<p>HTML 要素は各文書当りに一つだけです。
その内容は HEAD 要素と BODY 要素だけです。</p>
<ol>
  <li>HEAD 要素</li>
  <li>BODY 要素
    <ul>
    <li>Headings 要素</li>
    <li>Parangraph 要素</li>
    <li>LIST 要素
      <ul>
      <li>UL 要素</li>
      <li>OL 要素</li>
      <li>DL 要素</li>
      </ul>
    </li>
    <li>TABLE 要素</li>
    </ul>
  </li>
</ol>

ここではLIST要素の入れ子が二段階入っています。次の様に表示されれば成功です;

UL 要素、 OL 要素は共にブロック要素であり、 LI 要素だけしか子要素に持てません。

LI 要素はその内容に、任意のインライン要素と任意のブロック要素を持ち得ます。

説明付きリスト要素; DL 要素 - Definition List

説明付きリストです。

<h3>LIST</h3>
<dl>
  <dt>UL 要素</dt>
    <dd>UnOrdered List. 順番無しリストです。</dd>
  <dt>OL 要素</dt>
    <dd>Ordered List. 順番付きリストです。</dd>
  <dt>DL 要素</dt>
    <dd>Definition List. 説明付きリストです。</dd>
</dl>

DL 要素はブロック要素であり、その子要素には、 DT 要素と DD 要素しか持てません。 項目を DT 要素で表し、説明を DD 要素で表します。

DT 要素の内容部には、インライン要素しか記述できません。

DD 要素は子孫要素に任意のインライン要素と任意のブロック要素を持ち得ます。

この STEP5 までで、次のような HTML 文書が書けているはずです; [sample]

では、次に表を挿入してみましょう。

FC2> モビット