IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

ホームページHTML<p>と<br>の違いは応用例から理解しよう

      2017/03/03  あとで読む   はてブする

HTMLの使い方。<br>と<p>を両方使った例

僕がホームページを作り始めたのが1998年、丁度「Windows 98 2nd edition」が発売された直後です。職場の公式サイトの中のある数ページを担当することになりました。

当時はホームページ(webサイト)というものの仕組みすらわからなかったので、上司に話して「ホームページビルダー」を購入し、勉強したり、実際に作ったりしたものです。確か「ホームページビルダー5」ぐらいだったと思います。

それが僕のWEBサイト作成のスタートでした。僕は中学時代からコンピュータの仕事に付きたいと思っていたので、その第一歩を踏み出したと言えます。ここから修行の道は続くのですが…

さて、前置きが長くなりましたが、当時のホームページビルダーで作ると、改行が全て<br>で表示されていました。ビルダーがそうだから、いいだろうと思い、連続で<br>を続けていたりしたものです

しかし、途中から<br>ではなく<p>というのが正しいのだということを知ります。当時色々なサイトを調べてみたのですが、<br>と<p>を理解することができないので、結局表示させるのに<br>を多用していましたね。

2005年ぐらいから無料でブログを作ったりするブームがやってきます。その時にやっと<br>と<p>の違いについて理解することができるようになりました。

やはりホームページ作成ソフトを多用しなくなった時に、こういうことは理解できるようです。

今回は長年かけてやっと理解した<br>と<p>の違いについてご紹介します。

スポンサーリンク

<p>と<br>の違い。間違い例と正解[基礎編]

テキスト文章サンプル

上のようなテキストを入力したい場合、<br>と<p>を理解していない時は以下のようにHTMLを入力していました。

HTMLの使い方(基礎)、間違い例

HTMLの<br>間違い例

特に何も書かず文章をスタートし、改行が来たら<br>。そして次の一行空欄にも<br>を入れていました。

HTMLを見ると結果的に<br>を2つ並べた形になります。2行空欄があれば、さらにもう一つ<br>を追加していたことになります。

これだとHTMLを見ると<br>だらけになってしまいますね。それでも<p>との違いを理解できていない当時は結構多用していました。

 

HTMLの使い方(基礎)、正解

<p>と<br>の違いを理解すると、上のサンプル文章は以下のように書くことが出来ます。

<p>と<br>の違い。HTMLの正解例、<p>を使用

<p>を最初と最後の段落で挟みます。最後には終了タグの</p>を使い閉じタグとします。

<p>を使った後には、一行空欄が出来るので、先ほどのように空欄に<br>を入れる必要がありません。

空欄の高さはスタイルシート(CSS)で調節する形となります。

ただ、これだとよく見る例なんですよね。当時僕もこれを見かけました。しかし、他の使い方ではよくわからない。応用がきかなかったので、理解に苦しんだ経験があります。

 

スポンサーリンク

<br>と<p>を理解できた応用例

テキスト文章サンプル。<p>と<br>との応用

上のような文章を書きたいときに、よくわからなくなり、応用が利かなくなりました。

 

HTMLの使い方(応用)、間違い例

HTML<br>間違い例

結局この文章になるとよくわからなくなり、また以前と同じ<br>を多用せざるを得なかったのです。

しかし、この応用文の例から<br>と<p>出来るようになりました。

 

HTMLの使い方(応用)、正解

HTMLの使い方。<br>と<p>を両方使った例

上のようにただ改行だけで1行開かない場合と、段落が変わって一行開く場合の例を組み合わせることで<br>と<p>を理解できるようになりました。

  • 一行空欄が開くまでを一つの段落」と考え、それを挟むように<p>と</p>とする
  • その文章の中で下に一行空欄を必要としない場合は改行」と考え、<br>とする

以上の2つのこと、段落と改行を理解するだけで、<p>と<br>の違いがわかるようになりました。

なので<p>から</p>の中には、複数の<br>改行が入る仕組みになっています。

 

まとめ

HTMLタグの<br>と<p>の違いについて、基礎と応用からご紹介しました。特に応用を見るとわかるようになっています。

2005年当時、何を見て違いを理解したのかについては記憶にありませんが、やはり自分でHTMLタグを入力するようになり、スタイルシートを理解し始めた時期だったからかもしれません。

1998年に初めてホームページを始めた時とは違い、少しずつではありますがレベルが上がってきていたのかもしれませんね。

僕と同様に<br>と<p>について、よくわからないという方には少しは参考になるかと思い書いてみました。

【関連】蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

【関連】[WordPress]テキストリンクの色を変更→クリックされやすくなるらしい

【関連】[WordPress]functions.phpの編集時に、サイト画面を真っ白にしてしまった場合の直し方

スポンサーリンク

 - WordPress

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

  関連記事

WordPress
「All in one SEO pack」でTwitterカードを簡単に設定する方法

WordPress(ワードプレス)のプラグイン「All in one SEO p …

アフィリエイト表示が切れている
【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

「SiteOrigin Editor」で分割表示させた画面
WP[Page Builder by SiteOrigin]固定ページで画像を横に並列表示、TOPページを簡単カスタマイズ

WordPressのTOPページに固定ページを使って、画像を横に2列や3列に横に …

WPプラグイン「VA Social Buzz」を表示した様子
バイラルメディア風のSNSボタンはWPプラグイン「VA Social Buzz」で簡単設定

バイラルメディア風のSNSボタンというのがあります。上の写真がそれで、個別記事の …

Google XML Sitemaps 4の調子が悪いので3にダウングレードしました

Google XML Sitemaps 4以上(現在4.0.4)は、サイトマップ …

GTmetrix
GTmetrixのSpecify image dimensions改善方法

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。こ …

WPプラグイン「Limit Login Attempts Reloaded」インストール画面
Widget logic teamから通知!WPプラグインLimit Login Attempts Reloadedの設定

先日、僕のWordpressのログイン後の画面にメッセージがやってきました。上が …

ブログがインデックスされない時は「All in One SEO」の設定「カテゴリーをnoindexにする」をチェック!

サーチコンソールで見たときに送信数の割りにインデックスに登録済の数が少ないことが …

WordPress「アップロードしたファイルをwp-content/uploads…に移動できませんでした」というメッセージ
WordPressで画像ファイルがアップロードエラーする場合の2つの解決法

最近Wordpressの「メディアを追加」で画像を選択するとエラーが出ることがあ …

失敗し泣き崩れる様子
[WordPress]functions.phpの編集時に、サイト画面を真っ白にしてしまった場合の直し方

WordPressでfunctions.phpを編集時に、画面を真っ白にしたこと …