HTML の基本要素

箇条書きを使おう!

見やすさ、わかりやすさの追求

WEBページに限らず、 聞き手、読み手にわかりやすいよう心がけることは重 要である。伝えたい情報が簡潔に項目毎に整理されてい れば、読み手、聞き手が理解しやすいのは当然である。

HTML言語では箇条書きのための要素として

の三種類が用意されている。

順不同リスト要素<ul>〜</ul>

順不同リストとは、名前の通り順序をつける必要のない項目 を書く場合に用いる。使い方を見てみよう。

実際の表示

HTMLソース

 <ul>
  <li>鳥海山</li>
  <li>月山</li>
  <li>湯殿山</li>
 </ul>

<ul>〜</ul>でここから〜ここまで順不同リストとする。

liはリストの項目を書くための要素である

序列リスト要素<ol>〜</ol>

順番が重要である項目はol要素を使う。

具体的には料理のレシピや、仕事の手順など、順番を強調したリストを書き たい場合に使うことになるだろう。以下は使い方と結果である。

実際の表示

  1. そんきょ
  2. はじめっ
  3. メンーッ
  4. 勝負あり
  5. そんきょ

HTMLソース

  <ol>
   <li>礼</li>
   <li>そんきょ</li>
   <li>はじめっ</li>
   <li>メンーッ</li>
   <li>勝負あり</li>
   <li>そんきょ</li>
   <li>礼</li>
  </ol>

定義リスト要素<dl>〜</dl>

定義を説明したい場合。<語句や単語を詳しく説明した い場合に用いると効果が ある>。定義リストだけは、他のリストと異な る形式を用いる。

実際の表示

公益学
公益学とは、非常に難しい奥の深い学問である。一概に定義できるもので はない。

HTMLソース

<dl> <dt>公益学</dt> <dd>公益学とは、非常に難しい奥の深い学問である。 一概に定義できるものではない。 </dd> </dl>

定義リストの<dl>〜</dl>だけは、前出の順不同リスト <ul>〜</ul>、序列リスト<ol>〜</ol>と使い方が違う 事に注意したい。

dt要素に、定義や語句を書く。

dd要素に、その定義や語句の説明を書く。

おおよそのリストの使い方は理解して頂けたろうか。リストは、使い方が簡 単でありながら、有効に使えば、効果が期待される要素の1つである。

sample.htmlは以下のようなっただろうか。

sample.html

 <html>
   <head>
   <title>
   初めてのHTML
   </title>
   </head>

   <body>

   <h1> ようこそ
       </h1>

   <p> 今日はようこそ UNIX講習会へおいで下さいました。HTML言語を修
   得し、  世界に向けて情報を発信してみましょう。</p>
   <p> と堅苦しい事は言わずに、趣味に仕事に活用して下さい。</p>

   <ul>
     <li>鳥海山</li>
     <li>月山</li>
     <li>湯殿山</li>
   </ul>

   <ol>
     <li>礼</li>
     <li>そんきょ</li>
     <li>はじめっ</li>
     <li>メンーッ</li>
     <li>勝負あり</li>
     <li>そんきょ</li>
     <li>礼</li>
   </ol>

   <dl>
     <dt>公益学</dt>
     <dd>公益学とは、非常に難しい奥の深い学問である。一概に定
     義できるものではない。</dd>
   </dl>

   </body>
 </html>

箇条書き以外の基本的な要素

写真を貼り付けてみよう

表を作成してみよう


目次


(C)2004 OKOMA Lab. koeki-u.ac.jp