css - セクション区切りに br または div を使用する

Question

私はいくつかの場所で働いており、HTML でセクションまたは改行を行う 2 つの異なる方法を見てきました。

私が見た 1 つの方法は次のようなものです。

<div class="placeholder-100pct">&nbsp;</div>

もう1つは、単純な古いものを使用してい<br />ます。

どちらか一方に利点がありますか、それとも単にスタイルの問題でしょうか?

Answer 1

<br/>次のように、段落に改行が必要な場合に使用します。

<p>Hi Josh, <br/> How are you?</p>

これは、住所を書くときに役立ちます。

<p>John Dough<br/>
1155 Saint. St. #33<br/>
Orlando, FL 32765
</p>

div を使用すると自動的に新しい行が作成されますが、2 つの要素の間にスペースが必要な場合は、div にマージンを使用できます。

<br/>2 つの div の間にスペースを空けるために使用しないでください。

<!-- This is not preferred -->
<div>Hello</div>
<br/>
<div>Something else here</div>

お役に立てれば

Answer 2

div は汎用コンテナーです。br は改行です。どちらも、セクション区切りを表現するのには特に適していません。

HTML 5 ではセクションが導入されています。区切りではなく、各セクションをマークアップします。

<section>
  <!-- This is a section -->
</section>
<section>
  <!-- This is another section -->
</section>

Answer 3

意味的に意味がある場合は <br /> を使用してください。改行だけが必要な場合は、それが目的です。さまざまな種類のコンテンツのセクションを分割しようとしている場合は、各セクションを独自のコンテナーにする必要があります。たとえば、住所の各行が別々の行に表示される住所がある場合、次のようにするのが理にかなっています。

<address>
123 Main Street<br />
Anywhere, USA 12345
</address>

Answer 4

明らかな違いの 1 つは、<br>インライン要素であり、そうで<div>はないことです。

したがって、この：

<span>Some text broken into <br /> lines</span>

... は有効な HTML コードですが、これは次のとおりです。

<span>Some text broken into <div>&nbsp;</div> lines</span>

...インライン要素内にブロック要素を配置できないため、そうではありません。

Answer 5

<br>セクション間のギャップのサイズを、それが存在する行に適用または継承される行の高さに制限するという欠点があり<span>ます。

つまり、<br>の場合、改行のサイズは正確に 1 行のテキストの高さにしかなりません。

間隔を制御したい場合は、必ず各「セクション」を独自のタグでラップし、余白を使用して間隔を制御します。違いは、マークアップのセマンティクスだけではありません。