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

Webページを構成する技術を超初心者向けに説明。まずは基本の基本である「HTML」について。ハイパーなタグ付きテキストを一緒に解読しましょう

[江原顕雄，＠IT]

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

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

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

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

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

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

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

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

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

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

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