HTMLの段落及び箇条書き(リスト)に関して

html文章のうち、「段落」を表すのがpタグです。
pタグで括られた文章は、段落であるとブラウザに認識させる事が出来ます。
また、「箇条書き(リスト)」を表す為には、ulタグとliタグを併用して表します。

HTMLで段落を表す

文章を、<p>と</p>で括ります。

ここが段落

上記の様に記述する事で、ブラウザに段落であると認識させる事が出来ます。また、多くのブラウザでは、段落の前後にスペース(マージン)が生まれます。

スクリーンショット 2015-04-21 10.58.38

pタグを使うときの注意点

pタグは、複数のタグで入れ子にする事が出来ません。

これは

NG

 

上記の様に、pタグの中にpタグを書いてしまうと文法的にNGになってしまうので、注意が必要です。

HTMLで箇条書き(リスト)を表す

リストは、ulタグとliタグを併用して表します。まず、リスト全体をulタグで括り、その中のリストの項目をliタグで1つ筒括っていきます。

  • 項目その1
  • 項目その2
  • 項目その3
  • 項目その4

上記の様に記述する事で、ブラウザに箇条書き(リスト)であると認識させる事が出来ます。多くのブラウザで、箇条書きの頭に「・」が付きます。

スクリーンショット 2015-04-21 12.26.55

ulタグ、及びliタグを使うときの注意点

ulタグの直下には、必ずliタグが無くては行けません。

これはNG

  • これはOK
  • これもOK

上記の場合、ulの直下にpタグが来てしまっています。これは文法的にNGです。liの中にpタグが有る場合は問題有りません。

また、liタグは独立して使う事が出来ません。必ず、ulタグかolタグ(別記事で紹介)と組み合わせて使います。

  • 独立しては使えない
  • これはOK

まとめ

今回は、段落(pタグ)と箇条書き(ulタグ)の使い方の説明でした。どちらも非常に良く使うので、使いこなせる様にしましょう。