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 p
aragraph, 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.