説明つきの箇条書きにする
苗栗縣の情報を、説明付きの箇条書きにしてみよう。
説明つきの箇条書きには〈dl要素〉を用いる。〈dl要素〉では〈dt要素〉definition termが見出しの項目となり、〈dd要素〉definition descriptionが項目の説明となる。
ここでは、苗栗縣の位置・地形・人々に関する情報を箇条書きで示すことにする。以下のように記述すれば、「位置」「地形」「人々」の項目にそれぞれの説明がついた箇条書きにすることができる。「index.html」ファイルに〈dl要素〉を追加し、ファイルを保存save(儲存檔案)する。
なお、ここで示した例では、行の先頭に1つまたは2つのタブtabを挿入している。これは、しばしば行なわれるもので、HTMLを書いているときに文字列を見やすくするための工夫である。ブラウザで表示される時には、これらのタブは無視される。タブは、キーボードの[tab]キーを押すことで入力することができる。
...都市化はあまり進んでいません。</p> <h2>土地と人間</h2> <dl> <dt>位置</dt> <dd>台湾の中北部にある。東は山だが、西は海に面している。</dd> <dt>地形</dt> <dd>平地はごく少ない。面積の8割以上が山である。</dd> <dt>人々</dt> <dd>素朴で親切な人が多いと言われている。</dd> </dl>
順序ありの箇条書きにする
苗栗縣の観光名所を順序ありの箇条書きにしてみよう。
項目の順序に意味のある場合は〈ol要素〉を用いる。ここでは、苗栗縣の観光名所を箇条書きにして示すことにする。各自でおすすめの観光名所を3つ考え、次の例のように記述する(※人名、地名は中国語で入力してよい)。「index.html」ファイルに〈dl要素〉の後ろに〈ol要素〉を追加し、ファイルを保存save(儲存檔案)する。
...言われている。</dd> </dl> <h2>苗栗縣の観光名所ベスト3</h2> <ol> <li>観光名所 No.1</li> <li>観光名所 No.2</li> <li>観光名所 No.3</li> </ol>
順序なしの箇条書きにする
苗栗縣の名産品を順序なしの箇条書きにしてみよう。
項目に順序のない箇条書きには〈ul要素〉を用いる。ここでは、苗栗縣の名産品を箇条書きにして示すことにする。次の例のように記述する(※項目の内容を変えても良い)。「index.html」ファイルの〈ol要素〉の後ろに〈ul要素〉を追加し、ファイルを保存save(儲存檔案)する。
...</ol> <h2>苗栗縣の名産品</h2> <ul> <li>イチゴ</li> <li>チョコレート牛乳</li> <li>文旦</li> </ul>
箇条書きをブラウザで表示する
箇条書きがどのように表示されるのか、ブラウザで確認してみよう。
保存したファイルをブラウザで開いてみる。ブラウザで開く操作は、ファイルをブラウザで開くを参照せよ。
ファイルを開くと、次のように表示されるだろう(Macintosh; Firefoxの場合)。