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  lt p gt  and when should I use  lt span gt

User · Accepted Answer

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  lt div gt  instead of a  lt p gt     as both are block level elements   A  lt span gt  is inline  much like an anchor   lt a gt     lt strong gt   emphasis   lt em gt    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  lt div gt    Sometimes  when styling things     inline things     a  lt span gt  is great to give you something to  hook  the css to  but it is otherwise an empty tag devoid of semantic or stylistic meaning

User · Answer

When we are using normal text at that time we want  lt p gt  tag when we are using normal text with some effects at that time we want  lt span gt  tag

User · Answer

p       float  left      margin  0      No spacing will be around  it looks similar to span

User · Answer

Semantically  you use  lt p gt  tags to indicate paragraphs   lt span gt  is used to apply CSS style and or class es  to an arbitrary section of text and inline elements

User · Answer

tag is a block-level element but  tag is inline element Normally we use span tag to style inside block elements but you don t need to use span tag to inline style you have to do is  convert block element to inline element using  display  inline

User · Answer

The  lt p gt  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

User · Answer

A practical explanation  By default   lt p gt   lt  p gt  will add line breaks before and after the enclosed text  so it creates a paragraph    lt span gt  does not do this  that is why it is called inline

User · Answer

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

User · Answer

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

User · Answer

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  lt p gt Hi lt  p gt  lt p gt There lt  p gt  would appear on different lines when  lt span gt Hi lt  span gt  lt span gt There lt  span gt  winds up side by side

User · Answer

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

User · Answer

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

[html] When to use <span> instead <p>?

Examples related to html