HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎8. p要素、br要素-段落と改行を設定する

      2017/07/11   hatano

この章について

下記のbase-html01.zipをダウンロードして、実際に記述してみましょう。
base-html01.zip

p要素

初期値はブロックレベル要素です。文字、文章の集まりを「段落(paragraph)」といいます。
段落を使用する場合、どこで区切らなといけないという決まりはありません。区切る文字の目安は「。」で区切ると良いでしょう。
入れ子にできるのは、テキストまたはインライン要素(a, img, spanなど)、改行(br)のみです。

正しい段落

間違った段落

初期値では、p要素で区切ると下に余白ができますが余白を空けたい時に使用してはいけません。余白はCSSのmargin, paddingで設定できます。
また改行目的で使用してもいけません。改行目的で使用してしまうと、それぞれを別の文章(段落)として検索サイトが解釈してしまいます。改行は、brタグを使用します。

br要素

文章を改行(line break)させる要素です。この要素に意味付けはありません。
開始タグのみで終了タグはありません。
ブラウザで表示した時に文章が改行されて表示されます。p要素と違い、br要素を使用しても検索サイトは別の文章とは解釈しません。注意点としては、br要素は要素内のテキストまたはインライン要素に使用するもので、要素間の余白のために使用してはいけません。

正しいbrタグの使い方

間違ったbrタグの使い方

まとめ

  • p要素は段落に使用する
  • pタグを改行や余白を空けるために使用してはいけない
  • br要素はテキストが改行される
  • brタグを他の要素の区切りに使用してはいけない。

広告

 - HTML・CSS