以前の記事でtarget="_blank"の概要とその問題についてご紹介しました。

前回のマークアップの話題に続き、今回はよく使う<br>タグと<p>タグについて、その違いと正しい使い方をご紹介します。

今回の記事がマークアップの際の参考になると嬉しいです。

目次

---

1. <br>と<p>の使い方
   ①<br>とは
   ②<br>と<br/>の違い
   ③<br>の連打はNG!?

2. ワードプレスでは「スペーサー」の使用が便利
   ①スペーサーとは
   ②スペーサーの使用方法
   ③スペーサーの調整方法
3. コメントアウトの使い方
   ①コメントアウトとは
   ②HTMLのコメントアウト
   ③CSSのコメントアウト
4. まとめ
   

①<br>とは

W3C（Webで使用される各種技術の標準化を推進する団体）によるHTMLの仕様書には、" br 要素は改行（line break）を意味する。"と記載があります。

brタグは "break"の略で改行を挿入する働きをします。

②<br>と<br/>の違い

マークアップの際には<br>と<br/>という２種類の表記があります。

2つの違いは、対象のページがHTMLで記述されているか、XHTMLで記述されているかどうかです。XHTML上では開始タグの後には終了タグを必ず挿入するというルールがあるので、タグで始まればタグで終わる必要があります。

HTMLも原則は開始タグの後には終了タグを挿入するのが好ましいのですが、終了タグがなくてもエラーにならないのがポイントです。

また、XHTML上では、<br>には終了タグがないため、<br/>と表記するのが好ましいと言えます。同じ理由で<img>なども<img/>とします。

③<br>の連打はNG!?

HTMLマークアップの際に<br>を行間を大きく空けるために続けて使用することは文法上好ましくないとされています。

<br>ではなく<p>を段落分けのために適宜使用するのがオススメです。

<br>の連打をしてはいけない理由は以下の2つです。

理由①デバイスの機能によって扱いが異なる

VoiceOver(ボイスオーバー）という機能がアップルのmacOS、iOSなどに搭載されています。目の不自由な方などに向けた機能で、内蔵のスクリーンリーダーが音声で画面の情報を読み上げてくれます。

＜好ましくない例＞

この機能を下記のように<br>を多用してマークアップした文章で使用すると、VoiceOverは全文を一度に読み上げようとしてしまいます。

＜好ましい例＞

下記のように<p>タグを使ってグルーピングされた文章の場合、その文章ごとに読み上げがされます。「これはテスト～」の段落から「当記事～」の段落に進んだり、逆に戻ったりもできます。

このようにデバイスの機能ごとに扱いが異なり、その際に<br>のみでマークアップされていると、扱いにくい文章になってしまう可能性があるため、<br>の乱用はオススメできないのです。

理由②メンテナンスの際に煩雑になる

先程の例ですと、コンテンツの領域の横幅変わると、レイアウトが崩れるのでそれに合わせてまた<br>を調整するということになりかねません。

※下図は横幅の調整により、レイアウトが崩れてしまった例

このように、メンテナンスの面から見ても<br>を装飾として使うのは避けたほうが良いです。また、文字幅などはCSSで調整するのが好ましいです。※今回はCSSの詳細については割愛します。

①スペーサーとは

WordPressの投稿機能で記事を作成していて、段落や画像のブロックの間隔が狭くて読みづらい場合にレイアウトを崩すことなく空白を挿入でき、非常に便利です。さらに、これを使うことで先程の<br>の連打を回避することもできます。

②スペーサーの使用方法

投稿画面で、新規ブロック＞レイアウト要素＞スペーサーをクリックします。

③スペーサーの調整方法

右側のブロックタブでスペーサーの余白のサイズは任意の大きさに変更することできます。

①コメントアウトとは

HTMLやCSS、JSなどに、書かれた内容を処理させないようにする方法のことを言います。しかし、ちょっと覚え違いをしやすい見た目をしているので注意が必要です。

②HTMLのコメントアウト

①正しいコメントアウト　　<!-- ここにコメント内容 -->

②「－」のミス 　<!-- ここにコメント内容 ->

③「！」のミス　　<!-- ここにコメント内容 --!>

このように非常にミスに気づきにくいので注意が必要です。

③CSSのコメントアウト

①正しいコメントアウト　　/*ここにコメント内容 */

②「/」のミス 　 /* ここにコメント内容 *

③「*」のミス　　 /*ここにコメント内容 /

HTMLのコメントアウトと混同しやすいので、こちらも良く注意して使用すると良いです。

今回はマークアップでよく使用する、<br>と<p>、スペーサー、コメントアウトタグについて詳しく調べてみました。

まとめると、
<br>は余白を空ける際に連打せず、<p>を適切に使うことや、ワードプレスであれば、スペーサーを適宜使用することで、より綺麗なマークアップができます。

また、コメントアウトのタグは非常に間違えやすいので、この記事をブックマークしていただくなど、分からなくなった時のリファレンスとしてご活用いただけると嬉しいです。

ライター：井上

WWGではホームページ制作・リニューアルに関するさまざまな相談もサポートさせて頂いております。お気軽に下記までお問い合わせください。

愛知 県内から 名古屋 を中心にホームページ制作を行っている会社
株式会社WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F
TEL： 052-485-6846
※ ホームページ制作や活用サポートのお問い合わせはコチラから