前回記事(h1~h6タグの意味を考慮した使い方)のでは「見出し（h1〜h6タグ）」の意味と使い方を解説しました。見出しで骨組みを作ったら、次はその中身となる「文章構造」を正しく作っていきましょう。

• 段落や改行を含む文章を表示する

　今までは"Hello"のような単語レベルのテキストを表示する方法を解説しましたが、

今回は段落構造をもった文章を表示する方法を解説します。

段落とはこのような文章の塊のことを指します。

「段落や改行を含む～文章の塊のことを指します。」の部分をHTMLをでマークアップします。

※以下のコードは、HTMLファイル内のbodyとその配下タグの中身を抜粋したものです。bodyタグは一つのhtmlに1つのみです。以降のコード例も同様の記載を行います。

　今回はWebページの章の一つという前提のため、h2タグを使用しています。Webページのタイトルという前提でマークアップする際はh1タグを使用してください。

　「　今までは～」のところのように日本語の冒頭空白をあける場合は全角スペースを一つあけるか、本記事では扱いませんが、CSSで余白調整する方法があります。

　「解説しましたが、」のところでbrタグを使用しましたが、これは改行を行うためのタグです。

HTMLではEnterキーで改行してもWebページ上では改行とはみなされません。そのため、brタグを使用します。

brタグはほかのタグと異なり終了タグが存在せず単独で使用します。このようなものを空要素といいます。

• pタグとbrタグの使い分け

　brタグが存在するのであればbrタグを多用して段落を表現すればいいと考えるかもしれません。人間から見た見た目上は段落に見えるかもしれませんがセマンティックHTMLとしてはNGな使い方です。

brタグを多用する場合は見た目上は段落に見えたとしてもブラウザや検索エンジンにとってはただの文章の羅列で段落としてはみなされません。　

　今回はWebページの章の一つという前提のため、h2タグを使用しています。Webページのタイトルという前提でマークアップする際はh1タグを使用してください。

　「　今までは～」のところのように日本語の冒頭空白をあける場合は全角スペースを一つあけるか、本記事では扱いませんが、CSSで余白調整する方法があります。

　「解説しましたが、」のところでbrタグを使用しましたが、これは改行を行うためのタグです。HTMLではEnterキーで改行してもWebページ上では改行とはみなされません。そのため、brタグを使用します。brタグはほかのタグと異なり終了タグが存在せず単独で使用します。

　brタグが存在するのであればbrタグを多用して段落を表現すればいいと考えるかもしれません。人間から見た見た目上は段落に見えるかもしれませんがセマンティックHTMLとしてはNGな使い方です。brタグを多用する場合は見た目上は段落に見えたとしてもブラウザや検索エンジンにとっては意味の区切れがない巨大な一文と解釈されてしまいます。brタグの多用は読み上げソフト(アクセシビリティ)への影響、スマホ表示時の表示崩れ、SEO対策の3つの観点から避けるべきです。

　アクセシビリティへの影響はpタグで段落として区切られることで読み上げられたときに間をおいて読み上げられます。brタグの場合は間を上げずに読み上げられる場合があるため、マシンガントークのように読み上げられる場合があります。

　画面幅が狭くなると、ブラウザが自動で行う「折り返し」が発生します。ここにbrタグが混ざると一文字だけ改行されるといったことが起きます。

　SEO対策としては前述のとおりbrタグだけで段落を作ろうとすると意味のない一つの文章の塊として見られてしまうので評価が下がってしまいます。適切にpタグを使用すれば、このWebページには重要な段落があると解釈させることができます。

　一方、何でもかんでもpタグを使用すればいいというわけでもありません。例えば住所を書く際に以下のように書いてはいけません。このように書いてしまうと「都道府県：東京都」と「市区町村：千代田区永田町」などが別々の段落として解釈されてしまうため住所としての意味を持たせるため、brタグを使用するべきです。brタグを使って改行して住所の大枠をpタグで囲むことで「都道府県：東京都」と「市区町村：千代田区永田町」などが一つの塊として認識されるようになります。

• 段落同士を区切る(hrタグ)

　段落をマークアップする方法としてpタグを使用しました。Webページの中で段落の中でも段落同士を区切りたい場合があります。そのようなときは段落の間にbrタグを入れるのではなくhrタグを使用します。そうすることでWebページ上では線が引かれているように見えますが、段落よりも大きな情報の区切りを表現することができます。段落についての説明をしている塊と住所についての塊では意味が大きく異なるため、hrタグで情報の区切りをつけることが適切です。

<関連記事>

• 前回の記事　h1~h6タグの意味を考慮した使い方
• 次回の記事　情報を整理するリスト系タグの使い方