<p>の代わりに<span>を使用する場合


94

質問が示すように、HTMLに追加したいテキストがある場合<p>、いつ使用する必要があり、いつ使用する必要があります<span>か?

回答:


91

HTMLは、HTMLに含まれるコンテンツを説明することを目的としていることに注意してください。

したがって、段落を伝えたい場合は、そうしてください。

しかし、あなたの比較は正確には正しくありません。より直接的な比較は

?の<div>代わりに使用する場合<p>

どちらもブロックレベルの要素であるため。

A<span>はインラインであり、アンカー(<a><strong>、、強調(<em>)などによく似ています。したがって、htmlとネイチャーライティングの両方でのデフォルトの性質により、段落は、<div>

場合によっては、物事(インライン物)をスタイリングするときに<span>、cssを「フック」するための何かを提供するのに最適ですが、それ以外の場合は、セマンティックまたはスタイルの意味がない空のタグです。


7
インライン要素とブロック要素を比較するときは、視覚的な側面を説明しないように注意してください。HTML5仕様は言い、p必ずしも周囲の改行でスタイリングされない場合があり、例えば、それは、インラインで続くことができる段落記号のシンボル。「インライン」および「ブロック」という用語も、目の不自由なユーザーには何の意味もありません。むしろ、フローコンテンツフレージングコンテンツを区別してください(このリンクを参照)。
chharvey 2012年

3
また、padding-leftは、での動作とは異なる動作をpspanます。段落では、パディングはすべての行(テキストのブロック)に影響しますが、スパンでは最初の行にのみ影響します。
diynevala 2015

95

意味的には、<p>タグを使用して段落を示します。<span>CSSスタイルやクラスをテキストやインライン要素の任意のセクションに適用するために使用されます。


13

<p>タグはparagraph、そのようなものとして、それは、ブロック(例えば、ある、等の元素h1div)一方、spanインライン要素である(例えば、として、ba

デフォルトでは、ブロック要素はその上下に空白を作成し、float属性を設定しない限り、ブロック要素の横に何も配置できません。

インライン要素は、段落内のテキストのスパンを処理します。通常、マージンはありません。そのため、たとえば、にマージンを設定することはできませんwidth


はい、スパンにはマージンがないため、テーブルセル(td)としてhtmlマークアップを使用できるのは良いことです
Igor Fomenko

6

スパンは完全に非セマンティックです。それは意味がなく、単に美容効果の要素として機能します。

段落には意味的な意味があります。つまり、カプセル化するコンテンツがテキストのブロックであり、本のテキストの段落と同じ意味を持つことをマシン(ブラウザやスクリーンリーダーなど)に伝えます。


5

意味的に言えば、apは段落タグであり、テキストの段落をフォーマットするために使用する必要があります。スパンは、意味的に処理されないインラインフォーマット変更です。



4

実用的な説明:デフォルトで<p> </p>は、囲まれたテキストの前後に改行が追加されます(したがって、段落が作成されます)。<span>これを行わないため、インラインと呼ばれます


3

pタグは、段落要素を示します。マージン/パディングが適用されています。スパンは、スタイルが設定されていないインラインタグです。重要な違いは、スパンがインラインの場合、pはブロック要素であるということです。つまり<p>Hi</p><p>There</p><span>Hi</span><span>There</span>並べて巻き上げると、異なるラインに表示されます。


3

その時に通常のテキストを使用している場合はタグが<p>必要です。その時点でいくつかの効果がある通常のテキストを使用している場合は<span>タグが必要です。


2

<span>はインラインタグ、<p>はブロックタグで、段落に使用されます。ブラウザは段落の下に空白行をレンダリングしますが、<span>は同じ行にレンダリングします。


0

tagはブロックレベルの要素ですが、tagはインライン要素です。通常、ブロック要素内のスタイルを設定するためにスパンタグを使用します。ただし、スタイルをインライン化するためにスパンタグを使用する必要はありません。「display:inline」を使用してブロック要素をインライン要素に変換します


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