文章の見出し「h1-h6要素」と段落「p要素」

<ここから見出し>

これが「h1要素」です。

<ここまで見出し>
<ここから段落>

「p要素」で段落を入れることができます。

<ここまで段落>
<ここから段落>

こうすると、2段落目を書くことができます。

<ここまで段落>

見出し「h1要素」~「h6要素」

 本や新聞などにはには見出しというタイトルがついています。
HTMLで見出しをつけるには、「h1要素」「h2要素」「h3要素」「h4要素」「h5要素」「h6要素」を使って表します。
<h1>と</h1>や<h6>と</h6>で囲んだ範囲のテキストが見出しになります。

 「h1要素」~「h6要素」まで6つの要素がありますが、この数字は見出しのランクです。
ほとんどのブラウザでは「h1要素」が一番大きな文字になり、「h6要素」が一番小さな文字になります。

 なお、「h1要素」~「h6要素」は見出しを意味する要素ですので、ただ単に文字を大きくするだけにこの要素を使ってはいけません。

 ちなみに、「h1要素」の「h1」はheading level 1の略で見出しや表題の水準1という意味です。
もちろん、「h6要素」の「h6」はheading level 6の略です。

段落を表す「p要素」

 見出しの次は、文章を書いていきますが、その文章の一つの区切りとなるのが段落です。
HTMLで段落を表すには、「p要素」を使います。
<p>と</p>で囲んだ範囲のテキストが段落ということになります。

 なお、この「p要素」ですが、</p>(終了タグ)を省略することができます。
次に「p要素」があれば、それが次の段落なのが明らかですし、「p要素」の次に「h1要素」等の見出しが来れば、その段落がそこで終了するのも明らかだからです。
ただし、段落の範囲を明確にするためにも</p>(終了タグ)は書いたほうがよいでしょう。

 ちなみに、「p要素」の「p」はparagrahpの頭文字で、段落という意味があります。

サンプル

 今回説明した、「h1要素」~「h6要素」、「p要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>~</body>)に書いてください。

サンプルソースコード

<h1>これは「h1要素」の見出しです</h1>
<p>
	ここに「h1要素」の見出しの内容などを書いていきます。
</p>
<h2>これは「h2要素」の見出しです</h2>
<p>
	ここに「h2要素」の見出しの内容などを書いていきます。	
</p>
<h3>これは「h3要素」の見出しです</h3>
<p>
	ここに「h3要素」の見出しの内容などを書いていきます。
</p>
<h4>これは「h4要素」の見出しです</h4>
<p>
	ここに「h4要素」の見出しの内容などを書いていきます。
</p>
<h5>これは「h5要素」の見出しです</h5>
<p>
	ここに「h5要素」の見出しの内容などを書いていきます。
</p>
<h6>これは「h6要素」の見出しです</h6>
<p>
	ここに「h6要素」の見出しの内容などを書いていきます。
</p>

表示結果

これは「h1要素」の見出しです

ここに「h1要素」の見出しの内容などを書いていきます。

これは「h2要素」の見出しです

ここに「h2要素」の見出しの内容などを書いていきます。

これは「h3要素」の見出しです

ここに「h3要素」の見出しの内容などを書いていきます。

これは「h4要素」の見出しです

ここに「h4要素」の見出しの内容などを書いていきます。

これは「h5要素」の見出しです

ここに「h5要素」の見出しの内容などを書いていきます。

これは「h6要素」の見出しです

ここに「h6要素」の見出しの内容などを書いていきます。

「h1要素」~「h6要素」と「p要素」のまとめと次回記事について

 今回説明した「h1要素」~「h6要素」と「p要素」はいかがでしたでしょうか。
見出しと段落は、文章を作る上ではとても重要です。
それはHTMLでも同じですのでこの要素は覚えておいてください。

 次回は、リスト表示をする「ol要素」「ul要素」「li要素」の説明をします。
以上、当サイト管理人のAsterismでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


上の画像に表示されている英数字を入力してください *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>