<p> vs <span>

It seems that I stand alone in the notion that non-sentences should be marked up with <span>. Why should I use the <p> element to mark up something that is not a paragraph?

You shouldn’t use a <p> tag to mark up something that is not a paragraph. If a tag that properly identifies what the content is doesn’t exist then mark it up with <div class=“”> specifying a class that identifies what it is.

Span - Inline Element
P - Block Element

You should avoid block level elements sitting adjacent to inline elements.

A paragraph consists of one or more sentences, which you probably already know.

A short sentence can consist of only three to four words.

*Note - If your content is lacking html’s vocabulary and is sitting adjacent to a block element then a division with a semantic class design pattern should be used for the job.

1 Like

Felgall, I’m gald you at least somewhat agree with me. I think you really know what you’re talking about. However, I don’t know if I completely understood your comment.

For example, one thing that I cannot stand is:


<p id="copyright">&copy;2009</p>

Clearly, that is not a paragraph, but in nearly every resource I encounter these types of text are marked up as paragraphs.

You made me think about span and div being somewhat different in that they are used for block and inline elements. I always felt like span should be used for a span of text and div should be used like the html 5 element section. But, I think I may be wrong on this one.

In these fairly rare circumstances I’m referring to, I felt like span should always be used. Do you think you should use div to display block level non-sentences?

The rule of thumb I follow is fragments and sentences are generally marked up with a paragraph tag. However, a few words or perhaps a number that needs to be isolated would be marked up using a span. Spans are a necessary evil for isolating inline content. A simple example would be to isolate the copyright symbol to change its color. Something that wouldn’t be possible without using a span.


<p id="copyright"><span class="symbol">&copy;</span>2009</p>

Although a strong, abbr or emphasis tag “could” be used it would seem like a abuse to do so in this instance.

Another example is listing the number of items for each item in a nav or menu.


<ul>
     <li>Donuts <span class="total">20</span></li>
     <li>Cakes <span class="total">90</span></li>
     <li>Pies <span class="total">19</span></li>
</ul>

Something to that effect. Although a definition list could actually be used here a span seems like the most straight forward and easy to read way to isolate the number for possible styling separate from the item.

In regards to your question though I would not use a div for a sentence or set of words. Unless it was being used to host user content such as a blog listing or something. In that case semantics are almost uncontrollable.


<div class="blog-entry-snippet">
<?php echo $snippet; ?>
</div>

It wouldn’t be right to place that type of user generated content into a paragraph tag because the entry/snippet could contain one or several paragraphs or breaks. So using a div to host that type of dynamic content seems most appropriate over anything else.

The rule of thumb I follow is fragments and sentences are generally marked up with a paragraph tag.

I have a huge problem with that. A fragment is not a sentence and is, therefore, not a paragraph. How can you justify this rule of thumb?

A paragraph can be defined by a distinct section of a piece of writing.

Therefore, even though a fragment such as a copyright line may not make a sentence it is a distinct section of a piece of writing.

However, if HTML supplied a fragment element I would gladly use that instead. Gotta work with what you have.

oddz has the nut of it. The paragraph, as taught in middle school English, is a grammatical construct, usually made up of sentences. The thing is, html is a structural markup language, not grammatical. As a structural element, it is “a brief composition complete in one typographical section.” So, <p>© 2009</p> is indeed a paragraph, as is “a section or subdivision of a writing or chapter which relates to a particular point, whether consisting of one or many sentences.” [cite]Webster[/cite]

cheers,

gary

‘© 2009’ is definitely something I would consider as a paragraph, albeit with a strong flavour of ellipsis. It’s really just a severely pruned version of this,

‘The copyright of this document belongs to the entity which is elsewhere, implicitly or explicitly, associated with the document or web site, from the year 2009 and onwards.’

And that’s a paragraph, so the abbreviated form is also a paragraph.

But there are often sentence fragments on a web page which cannot be considered paragraphs. Those should probably be marked up with a <div>. An inline <span> cannot be an alternative to a block-level <p>. That’s like wondering whether you should use a T-shirt or a wardrobe.

‘© 2009’ is definitely something I would consider as a paragraph, albeit with a strong flavour of ellipsis. It’s really just a severely pruned version of this,

‘The copyright of this document belongs to the entity which is elsewhere, implicitly or explicitly, associated with the document or web site, from the year 2009 and onwards.’

I feel like that is somewhat irrational. There is virtually no fragment that has no meaning and cannot be turned into a sentence in some form. “'© 2009” is not a sentence. It doesn’t matter if you equate it to one.

An inline <span> cannot be an alternative to a block-level <p>. That’s like wondering whether you should use a T-shirt or a wardrobe.

Furthermore, I completely understand this. I brought this thread up because, from w3schools’ definition of the span element, I felt like this was the second use for span other than the obvious use that oddz brought to attention.

However, if HTML supplied a fragment element I would gladly use that instead. Gotta work with what you have.

I agree with you 100%. From w3schools’ definition of span, I came to the decision that it’s second usage was to mark up fragments. Apparently, that is not the case. However, I have a huge problem marking up a fragment as a paragraph. I’m going to have to side with Felgall that, for lack of a better element, a div with a class should be used.

That seems to be a matter of opinion. I think it is. Dictionary definitions differ. Random House Dictionary says it’s ‘a grammatical unit of one or more words’ whereas The American Heritage Dictionary says it must contain ‘a predicate that contains at least one finite verb’.

W3Schools is a very unreliable source of information, often inaccurate and out of date (despite the name’s allusion to W3C, with which they have no association whatsoever).

A span can mark up an inline sentence fragment if you need to do so, e.g., to apply CSS style rules to it or manipulate it with JavaScript. But since it’s an inline element it’s semantically wrong/questionable/odd (depening on whom you ask) to use it at the same structural level as block-level elements such as paragraphs. For that, you can use the neutral block-level element type, div instead.

Sometimes you can satisfy both if you control the content… for copyright, there are usually other fragments, together in a footer.

You can mark up the group of fragments in a p, and separate them inside with spans (again, only makes sense if you can control the content):
<footer>
<p>
<span>© 2009 Foo Corp</span>
<span>address, foostreet 5, foocity</span>
<span>contact: tel, fax, webmaster</span>
</p>
</footer>

Each span could be styled however, display: block or so. Like oddz, for lack of a better tool, I’ve usually been using <p>'s for fragments, but if I have a group of fragments I’ve so far been able to get away with grouping them.

Here’s another I did recently:


<p class="postmeta"><span>13-jan-09: 14.30</span> <span><a href="#">12 foto's</a></span> <span>0 reacties</span></p>

Three fragments who didn’t make sense to be three p’s.

I wouldn’t consider this to be a paragraph. It looks like contact information, for which there is a specific dedicated element type: <address>.
(You could still use <span> to mark up the internal fragments, though.)

I used to use <address> for real addresses but everyone everywhere told me NOT to use it for that but to use P’s with br’s because <address> was meant for the url/email of the webmaster or something… even though to me it did look like a use that went out of fashion in the early 1990’s.

So except on my old pages, I no longer use <address> for <postaladdress> even though I’d like to.

The <address> element is meant for contact information, for the person(s) or organisation that is responsible for the page or site. That contact information can be a postal address, an email address, a telephone number, instant messaging details or whatever. Or a combination of any number of these things.

It’s not correct to use <address> for any old postal address, but for a postal address that is (part of) the aforementioned type of contact information, it’s not only acceptable but even appropriate.

It’s not correct to use <address> for any old postal address, but for a postal address that is (part of) the aforementioned type of contact information, it’s not only acceptable but even appropriate.

I think you’re the first person (besides maybe I think Ed Seedhouse) to say that. I’d sure love to use <address> again… I believe that if it’s a company’s website, then they pretty much are the “author” and so their postal address could count as <address>…

++

That’s how I see it, too. And it’s what we do on our office web site: the footer on every page is an <address> element containing the postal address, switchboard phone number and main email address.

Yes, I agree that using <p> on non-paragraph seems wrong. However, for me I really don’t care because I don’t use <p>. For me everything is around <div> tag. The way I look at is that <p> is just like <div> w/ default style settings. I don’t want to give any style in my HTML page therefore, I give complete control of style/looks in my CSS. Of course, I can override p in my CSS but what’s the point in that? I know you guys will call me crazy but I don’t use <p><br> or whatever styling tag. I do understand in SEO world that using appropriate tag is important but I never had to write any SEO sensitive web application.

Everything could theoretically be a div. A heading could be a div. A list element could be a div. Tables could be divs. But that is terrible practice. Markup has meaning and it’s there for a reason.

Obviously, the P tag in html doesn’t strictly associate with what we understand as paragraphs in normal writing (as we can see from this thread), but it at least has a real, semantic meaning which should be used.

Hell, we could make web pages entirely out of jpegs (and I’ve seen some…), but that would be crappy too!

I already know many people disagree with me. It just comes down to how you belive HTML should be. If you say “it’s there for a reason” then why not embed all javascript, all css, inside the HTML? it’s all do-able in HTML so why have seperate javascript, seperate css? As we all know HTML/JavaScript/CSS have a gray area that simulates each other. Now the question is which one will you choose to accomplish your task. From this, I have decided HTML should only contain “content”, JavaScript should only contain “event” related, and “CSS” should 100% control the looks and feel. Again~ I’m not surprise many people disagree w/ this approach~ so far I’m loving it but I’m not overconfident to say “this is the best approach!”.