Zenn
Open3

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

HTML
hirohiro

div とは

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

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

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

使用上の注意

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

親となる要素

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

子となる要素

フローコンテンツ

CSSプロパティ

display: block;

参考

hirohiro

spanとは

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

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

親となる要素

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

子となる要素

記述コンテンツ

CSSプロパティ

display: inline;

参考