When to use <span> instead <p>?

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>?

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 (<a>), <strong>, emphasis (<em>), 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.

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.

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.

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.

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.

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.

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

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.

<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.

When we are using normal text at that time we want <p> tag.when we are using normal text with some effects at that time we want <span> tag

Explanation

p element is a block level, therefore, add padding and margin before and after the line/ text. But span is inline element and therefore does not add any padding and margin before and after the line. We actually use span element for styling purpose and it has not semantic meaning in HTML, however, the p element is block element and has semantic meaning in HTML.

p {
    float: left;
	margin: 0;
}

No spacing will be around, it looks similar to span.