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">©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">©</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!â.