Open3

[HTML] divとspanの違いをまとめる

div とは

何か特定のセマンティクスを表すものではない、フローコンテンツの為の汎用コンテナです。CSS によるスタイリングの用途等で、要素のグループ化が必要な場合に用います。多くの場合、class属性かid属性、lang属性等と共に使われます。セマンティクス上で(<article><nav>)など他に適切な要素がある場合はそちらを使用して下さい。


HTML の コンテンツ分割要素 (<div>) は、フローコンテンツの汎用コンテナーです。 CSS を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。


<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。

使用上の注意

<div> 要素は、他に適切な意味的要素(<article><nav> など)がない場合に限り使用してください。

親となる要素

フローコンテンツを受け入れる要素

子となる要素

フローコンテンツ

CSSプロパティ

display: block;

参考

spanとは

特定のセマンティクスを表すものではなく、フレージング・コンテンツの為の汎用コンテナ。


HTML の <span> 要素は、記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。スタイル付けのため (class または id 属性を使用して)、または lang のような属性値を共有したりするために要素をグループ化する用途で使用することができます。他に適切な意味的要素がない時にのみ使用してください。 <span><div> 要素ととても似ていますが、 <div> がブロックレベル要素であるのに対し、 <span> はインライン要素です。

親となる要素

記述コンテンツ、フローコンテンツを受け入れる要素

子となる要素

記述コンテンツ

CSSプロパティ

display: inline;

参考

div と span との違い

div span
作成者以外のコメントは許可されていません