When to use <span> instead <p>?

Question

As the question indicates, if I have some text that I want to add in the HTML then when should I use <p> and when should I use <span>?

Answer 1

Semantically, you use <p> tags to indicate paragraphs. <span> is used to apply CSS style and/or class(es) to an arbitrary section of text and inline elements.

Answer 2

Semantically speaking, a p is a paragraph tag and should be used to format a paragraph of text. A span is an inline formatting change that isn't handled semantically.

Answer 3

Span is completely non-semantic. It has no meaning, and serves merely as an element for cosmetic effects.

Paragraphs have semantic meaning - they tell a machine (like a browser or a screen reader) that the content they encapsulate is a block of text, and has the same meaning as a paragraph of text in a book.

Answer 4

A practical explanation: By default, <p> </p> will add line breaks before and after the enclosed text (so it creates a paragraph). <span> does not do this, that is why it is called inline.

Answer 5

A span is an inline formatting element that does NOT have a line feed above or below.

A p is a block element that HAS an implied line feed above and below.

http://w3schools.com/tags/default.asp

Answer 6

The <p> tag is a paragraph, and as such, it is a block element (as is, for instance, h1 and div), whereas span is an inline element (as, for instance, b and a)

Block elements by default create some whitespace above and below themselves, and nothing can be aligned next to them, unless you set a float attribute to them.

Inline elements deal with spans of text inside a paragraph. They typically have no margins, and as such, you cannot, for instance, set a width to it.

Answer 7

you should keep in mind that HTML is intended to DESCRIBE the content it contains.

so if you wish to convey a paragraph, then do so.

your comparison isn't exactly right though. the more direct comparison would be "when to use a div instead of a p?" as both are block level elements.

a span is inline, much like an anchor, strong, emphasis, etc, so bear in mind that by it's default nature in both html and in natural writing, that a paragraph will cause a break before and after itself, like a div.

sometimes when styling things - inline things - a span is great to give you something to "hook" the css to, but it is otherwise an empty tag devoid of semantic or stylistic meaning.

Answer 8

The p tag denotes a paragraph element. It has margins/padding applied to it. A span is an unstyled inline tag. An important difference is that p is a block element when span is inline, meaning that <p>Hi</p><p>There</p> would appear on different lines when <span>Hi</span><span>There</span> winds up side by side.

Answer 9

<span> is an inline tag, a <p> is a block tag, used for paragraphs. Browsers will render a blank line below a paragraph, whereas <span>s will render on the same line.