見出しや段落の意味や書き方を詳しくお話していきます。
見出しの意味
見出しとは文章の章立てを表します。
HTML文章では、全部で6種類（<h1>…<h6>）の見出しが存在しています。
頭文字の「h」は、headding（日本語で見出しの意味）の略称となります。
使用する目的は、単にユーザーが見やすいという理由もありますが、Googleなどの検索エンジンに正しく「これは章の始まりで、中身は…」と構成を伝える役割もあります。
見出しは6種類
見出しの種類は全部で6種類です。
<h1> 一番大きいサイズ
<h2>
<h3>
<h4>
<h5>
<h6> 一番小さいサイズ
<h1>が一番文字のサイズが大きく、<h6>が一番小さい文字のサイズとなります。
使用する順番は<h1>…<h6>と決まりがあります。
見出しの順番ルール
HTML文章上で見出しを使用する場合、1つだけ<h1>を記述してあげます。
<h1>は他の見出し（h2以降）と異なり、基本的には1回しか使用しないルールです。※ 厳密には違いますが、推奨としては1回です
次に<h2>以降を記述していきます。（<h3>→<h4>→<h5>→<h6>）
「h3やh6の見出しの方が見た目がいいな！こっちから使おう」というルールを無視した記述方法が基本的にはNG行為となります。
「h2も1回しか使えないの？」と疑問が出てきそうですが、
・<h2>の見出しの後に<h3>の見出し。その後、別章の説明で<h2>を使用
このように、しっかりと見出しの順番が１つのグループごとにまとまって使うのであれば問題ありません。
【例】
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>子見出し</h3>
<h2>中見出し</h2>
<h3>子見出し</h3>
段落の意味
段落とは本文テキスト塊で表します。
HTML文章では、<p>を使います。
頭文字の「p」は、paragraph（日本語で段落の意味）の略称となります。
使用する目的は、文章を1つの段落ごとに表示させる為です。
<p>を2行記述して文章を入力すると、WEB上では2行に分かれて表示されます。
段落の注意点①
<p>の中には、インライン要素を入れ子として含めることが出来ますが、ブロック要素は入れていけないルールがあります。
理解を深める為に、まずは「インライン要素」と「ブロック要素」を解説していきます。
インライン要素とは
ブロック要素内で文章の一部として扱われる要素のことです。
囲んだ文章を太文字にする<strong>などがあります。
【例】
<p>ここはブロック要素です。<strong>ここが太文字。インライン要素です。</strong></p>
ブロック要素とは
ひとまとりのブロックで前後に自動改行が入る要素のことです。
段落を記述する<p>もブロック要素です。
【例】
<p>ここはブロック要素です。</p>
ではなぜ<p>にブロック要素を入れてはいけないのか？
ブロック要素の例で説明すると、<p>の中にさらに<p>を入れることになってしまうからです。
基本的に、ブロック要素の中にブロック要素を入れることは出来ません。
もし、このルールを破ってしまった場合どうなるのか？
WEB上で表示された際、水と油のように強制的に分離して表示されてしまいます。
例えば、”これはひょーちゃんです” と1行で表示したい場合、
記述：<p>これは<p>ひょーちゃんです</p></p>
実際：これは
ひょーちゃんです
このようにブロック要素同士は分離して表示される為、2行に分かれて表示されます。
段落の注意点②
<p>で空の段落を作るのは避けましょう。
理由としては、スクリーンリーダー（視覚障害者向け読み上げソフト）が、「段落が始まった…けど何もない」と意味の無い情報を与えてしまうからです。
段落を作る場合は、
・<br>
・CSSで余白作成
こちらを活用しましょう。
コメント