<p>: 段落要素

<p>
  ヤモリは通常小型で夜行性のトカゲの一群である。南極大陸を除くすべての大陸に生息している。
</p>
<p>
  ある種は、人工的な光に誘われて集まる昆虫を捕食するために、家屋に生息している。
</p>

p {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #999999;
}

p {
  margin-bottom: 2em; /* 段落の後の空白を増加させる */
}

<p>
  これはテキストの最初の段落です。これはテキストの最初の段落です。これはテキストの最初の段落です。これはテキストの最初の段落です。
</p>
<p>
  これはテキストの二番目の段落です。これはテキストの二番目の段落です。これはテキストの二番目の段落です。これはテキストの二番目の段落です。
</p>

<p>
  段落を空白行で区切るのが読者が目を通すのに最も簡単ですが、最初の行を字下げして区切ることもできます。これは印刷時の用紙節約など、スペースを節約するためによく用いられます。
</p>
<p>
  編集を前提とした文章（学校のレポートや下書きなど）では、区切りとして空白行とインデントの両方が用いられます。完成した作品において両方を併用することは、冗長で素人っぽいとみなされます。
</p>
<p>
  非常に古い文書では、段落は特別な記号である ¶、いわゆるピルクロウで区切られていました。現在では、これは圧迫感があり読みにくいと考えられています。
</p>
<p>
  どれだけ読みにくくなるのでしょうか？やってみましょう。
  <button data-toggle-text="こりゃダメだ、戻して！">
    段落にピルクロウを使う
  </button>
</p>

p {
  margin: 0;
  text-indent: 3ch;
}
p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}

document.querySelector("button").addEventListener("click", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });
  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});