連載
» 2008年08月26日 00時00分 公開

まずはHTML。ハイパーなタグ付き言語デザイナーのためのWeb学習帳(1)(3/5 ページ)

[江原顕雄,@IT]

文章を構造化する「マークアップランゲージ」

 では、次に「Markup Language」(マークアップランゲージ)について見てみましょう。「Markup」は「印を付ける」、「Language」は、C言語やPerlといった「コンピュータ言語」のことを指します。「印を付けるコンピュータ言語」……。これでは理解するどころか、ますます混乱しそうです。

 印を付けるというのは、「タグ」という要素で印を付けて(マークアップして)文章構造(スタイル)や修飾情報を指定する言語です。文章構造というのは「タイトル」「見出し」「本文」、修飾情報は「文字のサイズ」「色」「配置」なのです。以下、分かりやすく日本語で表記したマークアップランゲージで記述した文章例を書いてみます。

<!-- マークアップ言語の例 -->
  <マークアップランゲージがここから開始>

      <ヘッダココから>
          <タイトルココから>
          タイトルが入ります。
          </タイトルココまで>

      </ヘッダココまで>
          <本文ココから>

           文章が入ります
          </本文ココまで>
  </マークアップランゲージがここで終了>

<!-- マークアップ言語の例ココまで -->

 このように<要素名>〜</要素名>が入った「開始タグ」と「終了タグ」を使ってデータを囲み、文章の構造を指定します。上記の文章をHTMLで記述すると次のようになります。

<!--HTMLはじまり -->
  <html>

      <head>
          <title>
          タイトルが入ります。
          </title>

      </head>
          <body>

           文章が入ります
          </body>
  </html>

<!--HTMLおわり -->

 これだけの記述したファイルをWebで確認すると、こういうサンプルWebページになります。HTML文章3つの基本的に次の3つのパートで構成されています。

画面6 サンプルWebページを表示 画面6 サンプルWebページを表示

 上記の例で見ると、<html>〜</html>で囲まれた「HTML」パート。<head>〜</head>に囲まれ、タイトルやメタデータを記述する「ヘッダ」パート。<body>〜</body>に囲まれ、文章テキスト、見出し、ハイパーリンクを記述する「本文」パートがあります。

 このようにしっかりと文章構造のルールが決まっているので、だれでもこのスタイルを使えば、Webページを作成できるのです。ツールもテキストが打てるエディタさえあればOKです。.

 GoogleやYahoo!といった検索エンジンのロボットがWebページのクロールをするときに、的確に情報を収集できるのです。画像やフラッシュデータだと、検索エンジンではその内容についてチェックできません。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。