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

» 2008年08月26日 00時00分 公開
[江原顕雄，＠IT]
前のページへ 1|2|3|4|5 次のページへ

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

　では、次に「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ページのクロールをするときに、的確に情報を収集できるのです。画像やフラッシュデータだと、検索エンジンではその内容についてチェックできません。

前のページへ 1|2|3|4|5 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

＠IT

@ITについて

RSSについて

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

メールマガジン登録

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