これが「h1要素」です。
<ここまで見出し>
<ここから段落>
「p要素」で段落を入れることができます。
<ここまで段落>
<ここから段落>
こうすると、２段落目を書くことができます。
<ここまで段落>
見出し「h1要素」～「h6要素」
本や新聞などにはには見出しというタイトルがついています。
HTMLで見出しをつけるには、「h1要素」「h2要素」「h3要素」「h4要素」「h5要素」「h6要素」を使って表します。
<h1>と</h1>や<h6>と</h6>で囲んだ範囲のテキストが見出しになります。
「h1要素」～「h6要素」まで６つの要素がありますが、この数字は見出しのランクです。
ほとんどのブラウザでは「h1要素」が一番大きな文字になり、「h6要素」が一番小さな文字になります。
なお、「h1要素」～「h6要素」は見出しを意味する要素ですので、ただ単に文字を大きくするだけにこの要素を使ってはいけません。
ちなみに、「h1要素」の「h1」はheading level 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>これは「h１要素」の見出しです</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>
表示結果
これは「h１要素」の見出しです
ここに「h1要素」の見出しの内容などを書いていきます。
これは「h2要素」の見出しです
ここに「h2要素」の見出しの内容などを書いていきます。
これは「h3要素」の見出しです
ここに「h3要素」の見出しの内容などを書いていきます。
これは「h4要素」の見出しです
ここに「h4要素」の見出しの内容などを書いていきます。
これは「h5要素」の見出しです
ここに「h5要素」の見出しの内容などを書いていきます。
これは「h6要素」の見出しです
ここに「h6要素」の見出しの内容などを書いていきます。
「h1要素」～「h6要素」と「p要素」のまとめと次回記事について
今回説明した「h1要素」～「h6要素」と「p要素」はいかがでしたでしょうか。
見出しと段落は、文章を作る上ではとても重要です。
それはHTMLでも同じですのでこの要素は覚えておいてください。
次回は、リスト表示をする「ol要素」「ul要素」「li要素」の説明をします。
以上、当サイト管理人のAsterismでした。