文章構造の基本は見出しとパラグラフ--人気ホームページが作れる簡単作成講座

文章構造の基本は見出しとパラグラフ　（<h1>～<h6>,<p>）

テキストは見出しとなる部分と、その見出しの内容を書いた本文とに分かれます。
XHTML/HTMLでの文章構造を示す上で、最も基本的な部分ですのでしっかりマスターしてください。

見出しには<h1>～<h6>を使う

見出しを示すのがhタグで、<h1>～<h6>まで６段階に分かれます。<h1>～<h6>で囲まれた見出しは文字の大きさや、太さが変化します。また、タグに囲まれた文字の前後には余白が入りますが、余白が不要な場合<margin>で指定することが可能です。

<h1>や<h2>は極端に大きな文字サイズなので、一般的にCSS（スタイルシート）の
font-sizeによって文字サイズを指定して使われることが多いです。

重要度と使用順序

hタグはそれぞれ重要度に違いがあり、最も重要な見出しには<h1>を使い、番号が上がるにつれ重要度も下がります。そのため、文章構造を組み立てるためには<h1>～<h6>を正しい順序で使用し、文章構造を全体で組み立ててください。また、<h1>は最も重要な見出しであるため、同じWebページ内には１度しか使うことはできません。

<h1>はホームページ名（企業名、ショップ名）に使われることが多いですが、ホームページ名が重要でない場合、ページタイトルに<h1>を使うこともあります。

○
<h1> </h1>
<h2> </h2>
<h2> </h2>
<h3> </h3>
<h3> </h3>
<h4> </h4>
<h4> </h4>

○
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h3> </h3>
<h2> </h2>
<h3> </h3>
<h4> </h4>

×
<h1> </h1>
<h3> </h3>
<h3> </h3>
<h4> </h4>
<h2> </h2>
<h3> </h3>
<h4> </h4>

×
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>

hタグは見た目を変えるために使うべきではない

XHTML/HTMLは文章の構造を指定するものです。<h1>～<h6>を使うと、自動的に文字の大きさが変更されますが、<h1>～<h6>を視覚効果（見た目、デザイン）のために使用するべきではありません。

デザインの指定はCSS（スタイルシート）を使います。
文字のサイズを変えるのであれば、font-size
文字を太字にするのであれば、font-weidht
を使います。

本文には<p>を使う　（パラグラフ・段落）

見出しとともに使われることが多いのが<p>（パラグラフ・段落）です。見出しの下へ、見出しが示す内容を<p>を使って記載します。<h>同様、文字の大きさが変化し、前後に余白が含まれます。

とても使用頻度が高く、ホームページ作成ソフトでは自動的に挿入されることもありますが、<p>もパラグラフ、段落という意味を持ち、コンテンツの重要なテキストに使われます。特に重要でないテキストは、<div>タグで囲むのが一般的。

<h2>ホームページ【home page】</h2>
<p>Webサイト、もしくはそのトップページ。サイトのトップではないWebページをホームページと呼ぶこともある。また、Webブラウザを起動したとき最初に表示されるページ。</p>
<h3>当初は・・</h3>
<p>ブラウザ起動時に最初に表示されるページのだったが、転じてWebサイトのトップページのことを意味するようになり、さらに、Webサイト・Webページの同義語として用いられるようになった。</p>
<h3>現在では・・</h3>
<p>ブラウザ起動表示ページは「スタートページ」と呼ぶのが一般的で、「ホームページ」をこの意味で用いられることはほとんどなくなった。初期のなごりとして、Webブラウザのメニューや設定に「ホーム」「ホームページ」という項目が残っている。</p>