§02-07…見出しの作成＜h＞ – オンライン無料パソコン教室

(01) ページ内の先頭に、見出し「自己紹介」を作成します。「re01.htm」を以下のように変更してください。

<body>
<p>自己紹介</p>
<p>はじめまして</p>
<p>こんにちは</p><p>よろしくおねがいします</p>
<p>徳川 家康</p>
</body>

(02) 上書き保存してブラウジングします。見ればわかりますが、見出しにしたつもりでも通常の文章と同じように表示されます。

(03) 特定の段落を「見出し」とするにはその段落のタグを<p>ではなく、<h1>に変更します。「re01.htm」のソースを以下のように修正してください。

<body>
<h1>自己紹介</h1>
<p>はじめまして</p>
<p>こんにちは</p><p>よろしくおねがいします</p>
<p>徳川 家康</p>
</body>

(04) 上書き保存してブラウジングしましょう。明らかに「見出し」とわかる見栄えになります。なお、見出しは<h1>～<h6>まで使用可能です。文章の重要度に合わせて使ってください。

(05) 以下のように「re01.htm」を修正してください。

<body>
<h1>自己紹介</h1>
<h2>ご挨拶</h2>
<p>はじめまして</p>
<p>こんにちは</p><p>よろしくおねがいします</p>
<p>徳川 家康</p>
<h2>プロフィール</h2>
<p>173cm</p>
<p>63kg</p>
</body>

(06) 上書き保存してブラウジングしましょう。このように通常の段落には<p>タグを、見出しとなる段落には<h○>タグを用いて階層構造のあるツリー型の文章・ページにする必要があります。このような文章を作成するには慣れが必要ですので日ごろから心がけてください。なお、<h1>タグの使用はページ内に1回のみとしましょう。また<h1>タグの直下に<h3>タグを使うような、階層性を無視した見出しの利用方法は推奨されていません。また見出し内のキーワードは重要キーワードとしてみなされます。見出しの適切な利用をするようにしましょう。