HTML の div と span の比較_PowerNode Java Academy

1. <div></div> と <span></span>

1. <div></div> タグ

<div></div> タグはドキュメント内の区分またはセクションを定義し、それによってドキュメントを独立した異なる部分に分割することができます。 <div></div> タグは、関連する書式設定なしで厳密な整理ツールとして使用でき、HTML マークアップをプレゼンテーション スタイルから分離するという考え方を具体化します。実際の作業では、タグの効果を高めるために、<div></div> タグに id 属性または class 属性を指定するのが一般的です。 <div></div> はブロックレベル要素なので、そのコンテンツは自動的に新しい行で始まります。実際、改行は <div> に固有の唯一の書式設定動作です。

次の HTML はニュース Web サイトの構造をシミュレートします。 <div></div> タグの各ペアは、各ニュース項目のタイトルと概要をグループ化します。つまり、<div></div> はドキュメントに追加の構造を追加します。同時に、これらの <div></div> は同じタイプの要素に属しているため、class="news" 属性を使用してこれらの <div></div> タグを識別できます。これにより、<div></div> に適切なセマンティクスが追加されるだけでなく、スタイルを使用して <div></div> をさらにフォーマットすることも容易になります。

     <div class="ニュース">
         <h2>
             ニュース見出し1</h2>
         <p>
             いくつかのテキスト。いくつかのテキスト。いくつかのテキスト...</p>
         ...
     </div>
     <div class="ニュース">
        <h2>
             ニュース見出し2</h2>
         <p>
             いくつかのテキスト。いくつかのテキスト。いくつかのテキスト...</p>
        ...
     </div>

2. <span></span> タグ

<span> タグは、ドキュメント内のインライン要素をグループ化するために使用されます。

  <span style="color: Red">注意:</span>

2. ブロックレベル要素とインライン要素

ブロック要素とインライン要素は CSS の概念です。<div></div> や <h1></h1> などの要素は、ブロック要素と呼ばれることがよくあります。これは、これらの要素が 1 つのコンテンツ ブロック、つまり「ブロック ボックス」として表示されるためです。対照的に、<span></span> や <strong></strong> などの要素は、そのコンテンツが 1 行、つまり「インライン ボックス」に表示されるため、「インライン要素」と呼ばれます。

ブロックレベル要素とインライン要素の概念は固定されたものではなく、相対的なものです。要素の display プロパティを使用して、生成されるボックスのタイプを変更できます。つまり、display プロパティを block に設定することで、インライン要素 (<a> 要素など) をブロックレベル要素のように動作させることができます。また、display を inline に設定することで、結果の要素をインライン要素にすることもできます。display プロパティを none に設定して、要素にボックスがまったくないようにすることもできます。この場合、ボックスとそのすべてのコンテンツは表示されなくなり、ドキュメント内でスペースを占有しなくなります。

     <div id="dv1" スタイル="display: block">
         私はブロックレベル要素です。
     </div>
     <div id="dv2" スタイル="display: inline">
         私はインライン要素です。
     </div>
     <div id="div3" スタイル="表示: なし">
         私は目に見えない</div>

3. <div></div> と <span></span> の比較

1. 類似点: <div></div> タグと <span></span> タグはどちらもセクションを分割するために使用されますが、実際の意味はありません。どちらも主にスタイルシートを適用するために使用されます。

2. 相違点: <div></div> タグはブロックレベル要素であり、ブラウザは自動的にその前後に改行タグを追加します。<span></span> タグはインライン要素であり、その前後に改行タグは自動的に追加されません。

Web ページ レイアウトで 2 つのコンテンツを同じ行に表示する場合、最も簡単な方法は、それらを <span></span> タグで囲むことです。たとえば、ページに 2 つの隣接する要素があり、1 つは <div></div>、もう 1 つは <span></span> です。同じ行に表示するには、この <div></div> を <span></span> に変更できます。もちろん、CSS を通じて <div></div> などのタグの display 属性をインラインに設定することでも実現できます。