<span>タグと<div>タグの違いは何ですか?


15

興味がありますが、spanタグはdivと同じように機能するようです。

回答:


22

主な違いは、<span>タグがインライン要素であるのに対して、<div>タグはブロックレベルの要素であることです。

2つのブロックレベル要素(div)が垂直方向に次々に表示され、2つのインライン要素(スパン)が次々に水平方向に表示されます。

視覚用語の違いを理解するには、<span>要素を単語<div>として、要素を段落として考えると役立つ場合があります。通常、divはコンテンツのブロックをレイアウトするために使用されます。スパンは通常、そのコンテンツ内の単語のグループを強調表示するために使用されます。


11

ニックとトビーの両方があなたの質問にうまく答えましたが、それをさらに1レベル上げます。

デフォルトでは、<div>sはブロック要素であり、<span>sはインライン要素です。これらは、ブロックまたはインラインコンテナを単純に提供する汎用タグです。実際には、CSSを介してこれらをツイストして、ディスプレイのcss属性を「block」、「inline」、または「inline-block」(特に)に設定することで、ある程度互換性を持たせることができます。

ただし、それらを曲げて互いに振る舞うことは推奨されません。また、HTMLには他の要素(主に<a>タグのようなインライン要素)内でブロックレベルの要素を使用することを実際に禁止するルールがあります。そのため、適切なタグを使用し、絶対に必要な。

それらをセマンティック要素と考えてみてください。使用<span>テキストのブロックの内部を使用するタグの内容にしたいとき、例えば、および使用するため<div>、ページ自体に余分な構造を追加する必要がある場合「S。

とはいえ、HTML5には、これらの汎用タグのいずれかを使用する必要性を大幅に削減する必要のあるセマンティック要素が多数あります。大量のdivとspanを追加するよりも、セマンティックタグを使用することを強くお勧めします。

幸運を!


5

主な違いは、divsブロック要素とspansインライン要素であるということです。

どちらも、CSSを使用してスタイル設定できますが、必要に応じて機能しますが、通常spansは小さなインライン分割とdivs大きなブロックに使用します。

インライン要素とブロック要素に異なる影響を与えるものもあります。たとえば、span要素に高さを設定することはできません。


ブロック要素とインライン要素とはどういう意味ですか?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.