4.例文をマークアップしてみよう(応用編)

グループ化の基礎

最終更新
2003-01-11T12:23:03+09:00

グループ化とは、ある意味上の纏まりを一つの要素としてマークアップすることをいいます。この作業により、ブラウザ等のUser Agentによる解析を手助けをすることが出来ます。コンピュータが利用しやすい文書を作成する為にも、是非行っておきたいところです。

<ul>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

上は、リスト項目を「順不同型リスト」としてグループ化した例です。

リスト項目(li要素)については、ulタグ、あるいはolタグでしかグループ化させることが出来ないと同時に、グループ化させなければなりません。表現を変えれば、li要素はul要素、あるいはol要素として明示させなければなりません。

グループ化が必須の要素達

HTML文書を書く際、グループ化が必須の要素を以下に列挙します:

  • li要素達(ul要素, ol要素としてグループ化)
  • dt要素, dd要素達(dl要素としてグループ化)

グループ化が推奨される要素達

グループ化することが推奨される要素もあります。

本文を構成する全ての要素(body要素としてグループ化)

本文を構成する、見出しや段落、リスト等々、全ての要素はbody要素として明示(グループ化)することが推奨されます。

<title>シンプルウェブ - HOME PAGE -</title>

<body>
  <h1>シンプルウェブ</h1>
  <p>シンプルウェブにようこそ。</p>
  <p>まだほとんど何もありませんが、これから私の作った
詞やコラムなどをどんどん公開していく予定です。</p>

  <h2>メインコンテンツ</h2>
  <ul>
    <li>詞</li>
    <li>コラム</li>
    <li>読後感</li>
    <li>映画レポ</li>
  </ul>
</body>

因みにtitle要素は、文書の名前であり、本文ではないので注意が必要です。本で例えれば表紙のタイトルであって、中身ではないのです。

文書自身の情報に関する要素(head要素としてグループ化)

本文を構成せず、その文書自身についての情報を提供する要素、例えばtitle要素などは、head要素としてグループ化することが推奨されます。

<head>
  <title>シンプルウェブ - HOME PAGE -</title>
</head>

<body>
  <h1>シンプルウェブ</h1>
  <p>シンプルウェブにようこそ。</p>
  <p>まだほとんど何もありませんが、これから私の作った
詞やコラムなどをどんどん公開していく予定です。</p>

  <h2>メインコンテンツ</h2>
  <ul>
    <li>詞</li>
    <li>コラム</li>
    <li>読後感</li>
    <li>映画レポ</li>
  </ul>
</body>

要素が一つしかないのに「グループ化」という表現は違和感があるかもしれません。しかし、title要素以外にも、文書自身の情報を提供する要素があります。HTML文書として必須ではないものばかりですが、その文書をより豊かにする為にはなるべく沢山の情報を提供しておいた方が良いでしょう。

  • link要素
  • meta要素

主にこの二つが、文書自身の情報や他の文書との結びつきを提供する為の要素です。しかし、これらの要素は人間が読む為のものではない為、マークアップの本質から少し遠ざかります。「空要素」という奇妙な概念を例外として覚えなければなりません。勉強するのは後回しにしてください。さもなくばマークアップを誤解してしまう可能性があります。

body要素とhead要素(html要素としてグループ化)

本文を意味する要素「body」、文書自身の情報を意味する要素「head」、これら2つはhtml要素としてグループ化することが推奨されます。

<html>
  <head>
    <title>シンプルウェブ - HOME PAGE -</title>
  </head>

  <body>
    <h1>シンプルウェブ</h1>
    <p>シンプルウェブにようこそ。</p>
    <p>まだほとんど何もありませんが、これから私の作った
詞やコラムなどをどんどん公開していく予定です。</p>

    <h2>メインコンテンツ</h2>
    <ul>
      <li>詞</li>
      <li>コラム</li>
      <li>読後感</li>
      <li>映画レポ</li>
    </ul>
  </body>
</html>

グループ化の応用

最終更新
2003-01-11T13:51:50+09:00

未稿です。

つづく

最終更新
2003-01-11T12:53:00+09:00