SimpleQuiz › Part IV: When to P

Looking back, we’ve covered a lot of ground with just three questions, haven’t we? I realize I could go on for a dozen more questions about lists — different combinations, ordered lists, etc. I could also ask questions that are either too obvious for most, or delve too far into details for others.

So instead, here’s another topic that could just be splitting hairs again. The set-up: You have a block of text that you’re wrapping in a div (or any block-level element) and it contains just one paragraph or string of text. Note: the text used in the example is arbitrary.

Q: Are each of the following acceptable, and why (or why not)?

  1. <div id="footer">
       Copyright 2003 Charles DeMar | This text is arbitratry.
    </div>
  2. <div id="footer">
       <p>Copyright 2003 Charles DeMar | This text is arbitratry.</p>
    </div>

Extra Credit: Who is Charles DeMar?

55 Comments

  1. Greg H. says:

    C. None of the above.
    I’d use the following:
    <meta name="DC.Rights" content="Copyright 2003 by Charles DeMar. No rights reserved." />

  2. Stephane says:

    I think that the answer B is the correct one even if the div has only one paragraph. I’m trying to build site as if there is no DIV involved so that it may look good in whatever situation, so not putting a Paragraph would be a mistake.

  3. Luke Redpath says:

    Whilst both are valid XHTML, I’d say that both were acceptable in this case and I’m opting for A. A paragraph is used to separate a block of text in to separate divisions when the subject, perspective or focus changes.
    For this reason you still use paragraph tags within the blockquote element because although a quote could just be one paragraph long, you are usually quoting a single paragraph from a collection of paragraphs.
    Therefore, as the footer in this case is not an organised flow of text, merely a string of information relating to the document/site, often without proper grammatical structure, I see no need to mark it up as paragraph.

  4. Dan says:

    Greg H. – I should’ve pointed out (and I’ve just corrected) that the text within the block-level element in the examples is arbitrary. It could be copyright info, or just a random line of text.

  5. Luke Redpath says:

    A follow up regarding Dan’s amendment – if it was a copyright in the case of the example, I stick by my last answer, but if the text is an actual paragraph (that is comprised of 1 or more gramatically structured sentences) then you should use a p tag, because it is still a paragraph.
    So I think the argument boils down to this – if its a paragraph, mark it up as such – but what defines a paragraph? What I said in my last post or something else?

  6. Greg H. says:

    Dan – Duely noted. ;)
    For what it’s worth, I would also put my vote in for option A. It seems a tad redundant to have a paragraph element nested inside a div element for a single line of text.

  7. Egor Kloos says:

    Well given these two choices I’d go with B. For both semantic and semiotic reasons. Option A wouldn’t be a crime mind you but there is no telling what’s inside the div. It could be anything, and that’s no good. Markup needs to be meaningful to become even more useful and effective.
    Semantically I’d want to acknowledge that there is paragraph of text in the footer, and maybe I’d also add an ID or class to the paragraph to show that it refers to a copyright notice. A div by itself doesn’t really mean anything and is purely structural in nature.
    The Semiotic reasoning would actually, in my view, require the P tag with an ID. The footer itself is a sign and would contain signs or symbols that lend their meaning from it’s parent. To have ‘unmarked’ content as in option A would render the footer sign useless. A footer could contain an image, a paragraph containing a reference to the author, a date etc. etc. This collection forms the footer sign and without marking these ‘symbols’ mapping will not be effective or even possible.

  8. talon says:

    In this case I would lean towards B. I consider <div> to be the “duct tape” of CSS – no semantic meaning, purely a wrapper for the grouping of block-level elements or for styling itself. divs may add logical meaning but that meaning cannot be inferred automatically by browsers.
    <div>s may be used to group elements (per the W3 spec), or merely to add extra styling without abusing strongly semantic elements. They say nothing about the content. The example would be far more divisive (pun not intended) if there was a third option, that being the same as A without the grouping <div>. For that reason, I believe it makes more sense to include paragraph markup around a string of text.
    Feel free to provide counterexamples.

  9. Billy says:

    If the line of text is the only thing in the DIV, then I might choose Z: Put the line of text in a P, set it’s ID to “footer”, and get rid of the DIV. While you could argue the DIV separates sections better, it doesn’t provide any real semantic meaning, and all the styling you want to do you can do to the P.

  10. alex says:

    I agree with Billy – no need for the extra div tag in this case. As for a general rule – I think it will depend on the content being placed in the tags. How is that for being decisive? :)

  11. dbowman says:

    … basically, what Billy said. Though I’ve found myself using both A and B, depending on what I wanted to accomplish. While A seems a little generic, B could be considered overkill (unless you need two elements as style hooks).
    btw, knowing Dan’s love for Bazooka gum, I’d say the Charles DeMar he’s referencing has to do with these three words: Better Off Dead.

  12. Anonymous says:

    I could argue for both cases, but in real life, I’d use A (actually, I’d probably use Billy’s example). There’s no reason to wrap a single line of text with two block-level elements. Adding the <p> tag inside of the <div> does not convey any additional meaning about the text, it does not make it easier to style with CSS, and it does not lighten page weight. Three strikes, and you know the rest.

  13. Paul G says:

    D’oh, left my name off the previous post. I’ll get it right one of these days.

  14. Like many have said before me, I think A is the right way to go here. I don’t see a need for a P inside the DIV.

  15. Michael Z. says:

    If you want to eliminate redundancy, then definitely lose the <div> and go with <p id=”footer”>? A <p> can do anything that a <div> can, and actually means something.
    On the other hand, if there’s a chance in a million that your boss will decide next month that there must be second paragraph of fluff in the footer, then go with B. A paragraph is the basic unit of text, and you might want to add a second unit. A footer is a higher-level unit of organization on the page — even if you’re not styling it as a block that contains paragraphs right now, you might decide to in the next redesign.

  16. I have used B on my site for a while, now I use C: <p if="footer">Created by me!</p>, thanks to Egor Kloos.

  17. zlog says:

    What about address?
    <address>Copyright 2003 Charles DeMar | This text is arbitratry.</address>
    Is that more semantically correct?

  18. Steveski says:

    I’d definitely go with B. Any old browser knows how to show some <p> text, and while you may only have one <p> in there at the moment, that may increase in the future.

  19. buyot says:

    Answer A would cost me an extra minute to scan thru my code and search for the tag. Answer B would make me confuse. Using only the P tag and give it some CSS id or class would make me a happier man! =)

  20. James says:

    Since the text is arbitrary, that means that the possibilities for it are endless. If this is the case, you would want to cater for all eventualities and thus wrap your footer in a <div> element as in B. This includes having more than one paragraph or adding an extra background or border, as Doug noted.
    To add to that, a site’s footer usually makes up the triumverate of page structure along with the header and the content section/main body. I use <div> to define the structure of my code so naturally I wouldn’t wish for my footer to lack definition.
    On the other hand, A is semantically correct, and would even pass the reasoning just made, but I wouldn’t say <div> marks up a line of text. The text is not the division, the structure is.

  21. James says:

    That last sentence should read:
    The text is not the division as it isn’t the structure, but merely contained within it.
    Yes, a pretty major typo.

  22. Simon Percivall says:

    I’d use B.
    The reason I’d use B isn’t necessarily because it’s more syntactically correct; it’s simply more practical. I use divs for grouping block elements, and paragraphs to contain text. When I write CSS, I apply rules that concern paragraphs to the P rule, and rules that concern divs to the DIV rule.
    For instance, I often use a margin on paragraphs that does not apply to all divs. It’s just plain easier to go with the B alternative, because it makes it easier to write rules for other block elements.

  23. Fastclemmy says:

    I would also go for

    Copyright 2003 Charles DeMar | This text is arbitratry.

    Using a is unnecessary here.

  24. Fastclemmy says:

    Copyright 2003 Charles DeMar | This text is arbitratry.

  25. Raena says:

    Why you shouldn’t forgo either option for the meta, as in comment 1 – because something like that also ought to be human-readable.
    Why it probably isn’t an address, as in comment 17: If the text said ‘Copyright Charles DeMar | 123 Main Street, Anytown USA’ then maybe that’d be right. But since it’s entirely arbitrary, it’s not okay to assume that’s an address.
    I’d be using A (but more likely an appropriately styled paragraph), but only if I knew for sure there wouldn’t ever be a need for an extra graf in the footer.

  26. I actually have no idea which one to choose for it to be semantically correct. I would probably go after B myself though.
    Might I point out that this page actually doesn’t validate as XHTML? :|

  27. cedartree says:

    Option B is preferable as Option A does not provide the document with any structure when viewed without CSS (ie when divs are ignored).

  28. Jakob S says:

    Add a second paragraph to the example and I think most will agree that p-tags should be used to encapsule each of the two paragraphs. I don’t see how removing that second paragraph makes the leftover paragraph any less of a paragraph, hence its p-tag should remain.
    I’d say B is more correct and both are acceptable. I would probably use A myself though – I’m lazy like that.

  29. Russ Weakley says:

    What about:
    <address>
    Copyright 2003 Charles DeMar | This text is arbitratry.
    </address>

  30. Anonymous says:

    Webster’s dictonary defines a paragraph as being
    a subdivision of a written composition that consists of one or more sentences, deals with one point or gives the words of one speaker, and begins on a new usually indented line
    I don’t feel that the informmation provided is a complete paragraph, but it there was a complete and coherent thought that needed to be expressed in the footer I am all for it.
    I personaly would choose A. I do however agree with Greg and a meta tag existing as well.

  31. web says:

    I forgot my name in the post above as well.
    Wasn’t Charles DeMar an character in a movie called “better off dead” starring John Cuzack?

  32. Dan says:

    btw, knowing Dan’s love for Bazooka gum, I’d say the Charles DeMar he’s referencing has to do with these three words: Better Off Dead.
    How right you are, Doug :-) Extra credit belongs to you for being the first to get it. For those that haven’t seen the movie Better Off Dead, and you’re looking for pure 80′s nostalgia — this one will do the trick.
    Also, good work to Billy on getting to one of the points the question was intended to make.

  33. Scott says:

    Good question.
    Looking at all the answers showed me a way to rid myself of redundant markup.
    I’m looking forward to the next question.

  34. Ed Sharrer says:

    I’ve faced this many times, and I always opt for B. Without the paragraph tag, there is no semantic meaning for alternate devices.
    My rule is this — remove the divs from your markup and look at what’s left. That’s how devices read the content in the absence of a stylesheet.
    Of course, skipping the div altogether and applying a class to the paragraph is the real way to go…

  35. Minz Meyer says:

    I always take B.
    Even if it is one line, it is a paragraph (in my taste).
    Styling issues.
    I always use the containing elements of a div block to apply margins and paddings and therefore avoid having to use a box model hack for the div element.

  36. Wilson says:

    I’d usually go with B. When you strip the styles out, the

    spaces the content out so as to be readable, while divs just kind of get mashed together.

  37. jkottke says:

    This is a bit off topic, but the responses in this thread are a good illustration of why “lorum ipsum” text should be used in such instances. No matter what you say, people will usually focus more on content than on structure.

  38. Clint says:

    Anne, what do you mean in comment 16 by the use of “if” in a ‘p’ tag?

  39. Typo, my fault. It should be id
    Jason Kottke,
    If you still follow this thread: Nottke.

  40. Dan says:

    No matter what you say, people will usually focus more on content than on structure.
    Heh heh — absolutely, Jason. I’m constantly amazed at what people will find or how they will interpret a seemingly simple question.
    I guess that’s what’s making this interesting — that it’s looked at from multiple viewpoints.

  41. Paul says:

    I agree with Ed — I’d use a p and apply any style to the tag itself.

  42. Jesse Wilson says:

    I think everything that can be said has. Personally I would choose option B simply because that’s what I’ve done in the past. I should point out that most of the footers I “authored” have been comprised of more than one line of text, much like the one in use here.
    Technically speaking though, both options are correct and neither appears to be any more acceptible than the other. Indeed, as mentioned previously, one could even have a third option comprised of just a ‘p’ with and an id specified.

  43. Ed Sharrer says:

    Following up on Mr. Kottke’s comment about using lorem ipsum…
    Lorem Ipsum Generator
    This may be old news to most of you, but I use it 2-3 times a week and thought it was worth passing along.

  44. SFT says:

    No way would I use B. B dilutes the meaning of other paragraphs on the page. It places that text on the same level as the paragraphs in your body text, which it most certainly isn’t (or, at least, doesn’t appear to be in this case).
    What I might actually do is reserve <h6> for footers. After all, a footer like this is really a sort of heading. It just comes after the stuff it heads. :P

  45. I think the content is just as important as the markup, as it gives the example a context. Using lorem ipsum would not be much help determining which answer is more semantically correct.
    I would have also used <address>, but Raena brings up a good point. I’d probably still use <address> because when you strip away styles, there’s an obvious difference between regular paragraphs and the footer.

  46. Again difficult :) I’d prefer B, it’s a paragraph and it should be treated like that. A div is imho only for structuring a page into different parts and should be used only for that. Okay, it’s a block-level element like the p but it has no semantic meaning afaik.
    But again, if these would be the only things we have to moan about we’d be veeeery happy :)

  47. Chris says:

    par

  48. Both are acceptable, but B is more semantically correct.
    My rule of thumb is if there are HTML elements which better describe the content than the elements immedately surrounding the content, use them.
    However, like Ed said, you should only use a p (and no div) if possible.
    On an unrelated note, you should P when you’ve got to go.

  49. Ali says:

    Comparing A and B (adding border to them), shows some margins (from the content) for the B -p tag margin w/o any other css rules-.
    Also, using just P tag (not using css) which has almost the same look of A, adds top/bottom margins to the content.
    Having said that, I prefer using P tag for texts(paragraphs), adding css for visual design and as far as accessibility, HomePageReader treats/reads them equally.

  50. Dan F says:

    B, for exactly the reasons that Chris pointed out in comment 48. Transforming ambiguous content is a nightmare.
    I usually try to make sure every bit of text that makes it to the screen has at least one sematic-ish tag around it, it just “feels” nicer that way.
    Putting an ID against the P would work, but it seems like a dirty shortcut just to save a <div>.

  51. Jai says:

    Wow. I haven’t read any comments yet, so I may be reiterating. Either is fine, but B is more meaningful. If says “I’m a paragraph” where A says nothing but the text. It’s just semantics…
    For style purposes, having the P tag in there offers more CSS possibilities. And what if you decide to add more text? maybe another paragraph in the Div? Then you’d have to use the P. I sway towards B, though in most circumstances A is just fine. Now to read the other comments…

  52. tommy says:

    why sometime is working and sometime it does not

  53. Dan says:

    Do I get extra credit for pointing out that arbitrary is not spelt arbitraTry?
    (see original question)

  54. thomas says:

    If i’m thinking of a paragraph, i’m thinking of headline, subhead and then paragraph(s) construction. Could paragraphs exist alone – could headlines exist without paragraphs? I don`t think so.
    Maybe it leads too far – if there would be a describing headline, then i could accept (you hear me laughing…) “describing it” with a p-element, else not.
    Hm, a div-element has no semantic meaning. Maybe i’d put it out of the #footer and place it at the end of the other paragraphs in one p-tag?
    Ok, normally I would stick it right away in one p-tag… ;-)
    thomas (sry, my english is not that good)
    p.s. wonderful here!