IT便利帳

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

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

      2016/08/24  あとで読む   はてブする

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の編集時に、サイト画面を真っ白にしてしまった場合の直し方

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

Twitter でIT便利帳を

 - WordPress

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

WorePress
WordPressのビジュアルリッチエディタが表示されず入力や編集ができないときにする方法

cある日、WordPressを立ち上げいざ編集をしようとしたら、入力が全くできま …

Wordpressプラグイン
WorPressプラグイン「Broken Link Checker」の使い方

WordPressプラグインに「Broken Link Checker」というの …

WordPress
[WordPress]fluctやnendの広告が表示されない時は、JavaScriptプラグインをチェック!

別サイトで何ヶ月も前にスマホ広告のnend(ネンド)の申込をしました。すぐに許可 …

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

WorePress
WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

WordPressの投稿画面で「B」を押すと、<b>タグでは無く&l …

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

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

サーバ移転
ロリポップからシックスコア(sixcore)へサーバー移転に成功!どこに躓いたか

サーバをロリポップからシックスコアに移転しました。理由は別のサイトのPVが増えて …

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

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

Wordpressプラグイン
FacebookのOGPの設定はAll in one SEO Packが簡単!

今までOGPの設定をするとき、WordPressプラグイン「Open Graph …

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

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