When to use span instead p?
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.
What is the difference between p, div and span in HTML&XHTML?
p
and div
elements are block level elements where span
is an inline element and hence margin on span wont work. Alternatively you can make your span
a block level element by using CSS display: block;
or for span
I would prefer display: inline-block;
Apart from that, these elements have specific semantic meaning, div
is better referred for a block of content having different nested elements, p
which is used for paragraphs, and span
is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div
element will be less semantic than wrapping it inside a p
Should I use p or span element for a single line of text?
The HTML5 spec defines that the p
element "represents a paragraph", and a paragraph is defined as:
A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.
No-one can generally answer if you should use p
or not, this depends on each particular case, and also your understanding of the content.
Now, if you think p
may not be appropriate, why do you want to go with span
when you are looking for a block element? Just use div
instead.
should I use span tags or p tags?
I would use DL
list for each such block and UL
list to group them together semantically:
<ul>
<li><dl>
<dt>Körlektion</dt>
<dd>360kr</dd>
<dd>40 min</dd>
</dl></li>
<li><dl>
<dt>Halkan</dt>
<dd>1700kr</dd>
<dd>Riskutbildnig 2</dd>
</dl></li>
<li><dl>
<dt>Riskettan</dt>
<dd>500kr</dd>
<dd>Riskutbildning 1</dd>
</dl></li>
</ul>
Displaying an element similar to p inside a span?
p
has a meaning.
If your content matches p
’s definition, you should use p
. Then you should use a div
instead of a span
(unless there is no other suitable candidate):
<div>
<p>…</p>
</div>
If your content doesn’t match p
’s definition, you shouldn’t use p
. Then you could use span
instead of p
(if there is no other suitable candidate):
<span>
<span>…</span>
</span>
span
and div
don’t have meanings. So you only have to consider where they are placed syntactically (block vs. inline). You can swap them without losing/changing any semantics:
<div>
<span>…</span>
</div>
<div>
<div>…</div>
</div>
Note that all this doesn’t have anything to do with how these elements are styled. You can style a block-level element with CSS so that it appears as inline and vice-versa: display:inline;
resp. display:block;
.
What is the difference between HTML div and span elements?
div
is a block elementspan
is an inline element.
This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.
For example:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
Note that it is illegal to place a block-level element within an inline element, so:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
...is illegal.
EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference here for a pretty clear listing. The above is still illegal, as <span>
only accepts phrasing content, and <div>
is flow content.
You asked for some concrete examples, so is one taken from my bowling website, BowlSK:
<div id="header"> <div id="userbar"> Hi there, <span class="username">Chris Marasti-Georg</span> | <a href="/edit-profile.html">Profile</a> | <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a> </div> <h1><a href="/">Bowl<span class="sk">SK</span></a></h1></div>
OK to have text in div without paragraph tag?
Yes, it is ok to use a <div>
element without <p>
.
A <p>
would tell that the text within a <div>
element is split into paragraphs, thus if you have text split into paragraphs, you should use <p>
; on the other hand, a <p>
cannot contain elements other than so-called phrasing content; thus you cannot have a <div>
inside a <p>
.
Prevent newline break with span and p tag
You could try using the adjacent sibling selector (+
) like shown below. It is supported in IE >= 7.
HTML:
<span class="source">—</span>
<p>Source author, text goes here etc. etc.</p>
<p>Source author, text goes here etc. etc.</p>
CSS:
.source + p{display: inline;}
/* applies inline style to only the <p> tag directly following a tag with class=source */
Fiddle Demo | Browser Support
Related Topics
What Happens If The Action Field in a <Form> Has Parameters
Flex Elements Ignore Percent Padding in Firefox
CSS Position Absolute and Full Width Problem
Draw Triangle in Corner of Div
How to Customize a Select Element Through CSS to Achieve This Dark Style
HTML5 Canvas Slows Down with Each Stroke and Clear
How to Force Fully Download Txt File on Link
Why Is The First Element Always Blank in My Rails Multi-Select, Using an Embedded Array
Ajax HTML Vs Xml/JSON Responses - Performance or Other Reasons
CSS Grid Row Height Safari Bug
How to Make Bootstrap Carousel Image Responsive
What Happens When Localstorage Is Full
What's The Point of Having Hidden Input in HTML? What Are Common Uses for This
CSS - Make Div's Inherit a Height
What Does The Question Mark at Then End of a CSS Include Url Do