2.例文をマークアップしてみよう（基礎編）

見出し、段落など文書を構成している要素を、タグとよばれる一対の記号で挟み込んで明示することです。言わば、コンピュータに 『ここからここまでが見出しですよ』 というようなことを理解させるための作業を行うわけです。

• シンプル ウェブ

この「シンプルウェブ」という文字列が、その文書の中で最重要見出しの役割を果たしていたなら、次のようにマークアップします。

• <h1>シンプル ウェブ</h1>

実際には、この文字列がどういった役割を果たしているかは、文書全体を見なければ分かりません。それゆえ、完成された文書が無ければ、適切なマークアップをすることは出来ません。この重要事項は、慣れてくると大抵忘れてしまうので十分注意して下さい。

マークアップを完了した文書は、HTML文書とすることができ、WWWで多くの方に閲覧してもらうのに適した形式となります。

タグは開始タグと終了タグから成り立っています。

開始タグ

<要素名>

（例：<h1>, <p>等）

終了タグ

</要素名>

（例：</h1>, </p>等）

例えば、最重要見出しを明示するために存在する<h1></h1>は、h1タグと呼ばれます。

<h1>
シンプルウェブ
</h1>


シンプルウェブにようこそ。

まだほとんど何もありませんが、これから私の作った
詞やコラムなどをどんどん公開していく予定です。



<h2>
メインコンテンツ
</h2>


詞
コラム
読後感
映画レポ



<h2>
コミュニケーション
</h2>


掲示板
チャット
自己紹介


AYUKAWA Hiroko xxx@yyy.co.jp

この例文でもそうですが、普通の文章なら、複数の見出しのうち最も重要なものが一番最初に出現するはずです。このような要素を、h1要素と呼び、<h1></h1>で括ります。

「メインコンテンツ」と「コミュニケーション」は同レベルの見出しで、h1要素より一つレベルが低くなっています。これらをh2要素と呼び、h2タグで括ります。

最も重要な見出しは、理想を言えば、唯一つであるべきですが、これは文書作法の問題であって、HTMLの文法としては、複数出現しても良いことになっています。しかし、どういった場合に最上位見出しが複数必要になるのか、私には分かりません。文書の意図を明瞭にするためにも、最上位見出しは一つにしましょう。

「文章が長くなったから、適当な位置で（見やすくなるように）改行を入れた」……こういった改行は、例外です。

余計なお世話ですが、普通、ワープロではそういった改行は行いません。適度な幅で自動的に折り返しさせるのが常識です。ただ、ここでは高機能でない（自動折り返し機能の無い）テキストエディタを用いることを前提としていますから、例文では「適当な位置で改行」しました。

p要素のpは、paragraphの略ですが、これを日本語の「段落」と訳すとおかしな矛盾が次々生じてきます。「節」と訳しましょう。但し、「章」「節」の「節（せつ）」ではなく、「節（ふし）」、文書を構成している「節（ふし）」です。

<h1>シンプルウェブ</h1>

<p>
シンプルウェブにようこそ。
</p>


<p>
まだほとんど何もありませんが、これから私の作った
詞やコラムなどをどんどん公開していく予定です。
</p>

<h2>メインコンテンツ</h2>

<p>
詞
</p>


<p>
コラム
</p>


<p>
読後感
</p>


<p>
映画レポ
</p>

<h2>コミュニケーション</h2>

<p>
掲示板
</p>


<p>
チャット
</p>


<p>
自己紹介
</p>


<p>
AYUKAWA Hiroko xxx@yyy.co.jp
</p>

ここで、マークアップされていない要素は存在しません。これは重要なので注意して下さい。「マークアップを完了させる」必要条件です。これを満たしていないと、HTMLとして不適合となります。

随分乱暴にマークアップしましたが、これが基本的な考え方だと思って下さい。「文書構成節」には実に様々な種類が存在します。それらを包括的に捉えたものが、paragraphです。あるいは、そう考えなければ、HTMLでは定義されていない要素を明示することが出来なくなります。自分で、勝手に要素を定義することになってしまうのです。

自分で勝手に要素を作ろうとすると、div要素という匿名のブロックを頻繁に用いる「癖」が付きます。これは、HTMLの汎用性を否定する第一歩になりかねませんので、私はp要素を大らかに解釈する立場を取ります。

ここでは、この文書の名前を「シンプルウェブ - HOME PAGE -」としました。

HOME PAGEの意味はもうお分かりですね。ウェブサイトの顔となるウェブページのことです。

シンプルウェブ - HOME PAGE -
<h1>シンプルウェブ</h1>
<p>シンプルウェブにようこそ。</p>
<p>まだほとんど何もありませんが、これから私の作った
詞やコラムなどをどんどん公開していく予定です。</p>
<h2>メインコンテンツ</h2>
<p>詞</p>
<p>コラム</p>
<p>読後感</p>
<p>映画レポ</p>
<h2>コミュニケーション</h2>
<p>掲示板</p>
<p>チャット</p>
<p>自己紹介</p>
<p>AYUKAWA Hiroko xxx@yyy.co.jp</p>

記入した「文書名」を、titleタグ（<title></title>）で括ります。

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

<h1>シンプルウェブ</h1>
<p>シンプルウェブにようこそ。</p>
<p>まだほとんど何もありませんが、これから私の作った
詞やコラムなどをどんどん公開していく予定です。</p>
<h2>メインコンテンツ</h2>
<p>詞</p>
<p>コラム</p>
<p>読後感</p>
<p>映画レポ</p>
<h2>コミュニケーション</h2>
<p>掲示板</p>
<p>チャット</p>
<p>自己紹介</p>
<p>AYUKAWA Hiroko xxx@yyy.co.jp</p>

h1要素（最上位見出し）とtitle要素（文書の名前）の違いをはっきりと意識しておきましょう。

人にとっては、この二つはそれぞれ次のような意味があります。

h1要素（最上位見出し）

h1要素は、その文書を既に入手した人が利用するもの

title要素（文書の名前）

title要素は、その文書をこれから入手する人が利用するもの

例えば他の文書から紹介される場合を考えてください。紹介する側は、紹介したい文書の名前を記述するはずです。閲覧者はまだその文書の内容を知りませんが、名前を見て、閲覧するかしないかを判断できるでしょう。