SimpleQuiz › When to P › Conclusion

This past question has brought up some rather interesting points. Many readers chimed in on the fact that option B was better (wrapping the content in a p tag) due to nice formatting for un-styled viewers. Others saw it unnecessary, and more saw it fit to strip away that redundant div and style a p directly.

Notable Comments

talon:

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.

Michael Z.:

… 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.

Now that’s forward thinking.

zlog:

What about <address>?

I hadn’t thought of it, but it’s a nice reminder.

jkottke:

… the responses in this thread are a good illustration of why “lorum ipsum” text should be used in such instances.

Heck yeah, and Ed Sharrer offers us the The Lorem Ipsum Generator.

Billy was the first to get at a major point I was attempting to make with this question:

Put the line of text in a p, set it’s id to “footer”, and get rid of the div.

Ah ha. Exactly. If this is just one line of text, why not add the id directly to the p tag itself? p is a block-level element as well, and div is just a generic one. A good way to trim down that code: Look at what lies directly beneath your div tags. If it’s another block-level element, look into styling that next level — directly.

For instance, if you have a form that is wrapped in a div, it may be possible to get rid of the div and let the form be the block-level element.

Oh, and extra credit goes to Doug Bowman:

I’d say the Charles DeMar he’s referencing has to do with these three words: Better Off Dead.

Right on the money.

Summary

One line of text within a div could be marked up with a paragraph, without one, or tossed out in place of styling the p directly.

Some considerations:

  • Think about the future. Will this one paragraph likely turn into two or three? Maybe it’s best to use a div.
  • If it’s always going to be one, why not bag the div and add the id to the p tag itself?
  • Look into using address for … well, addresses.
  • If you choose not to wrap a single line in paragraph tags, will this be ok for un-styled viewers?

See all past quiz questions and wrap-ups in chronological order.

12 Comments

  1. alex says:

    Excellent wrap-up, I’m really enjoying these. :)

  2. Anon says:

    Looks like you’re missing a </code> after the div in the summary.

  3. Raena says:

    must… close… code…
    Ah, better. ;)
    These conversations rock. :)

  4. Raena says:

    Ack! It stripped my </code>?! Phooey, I thought I was doing someone a favour.

  5. Ben says:

    There I was, all satisfied that my site looked good, loaded quick and validated proper. Semantics? Seems I’ve still got some work to do…
    Thanks, keep ‘em coming!

  6. Fred Smith says:

    Does “unstyled viewer” refer to the straight guy on Queer Eye?

  7. Dan says:

    Thanks for the missing </code>. Should be better now.
    Stayed tuned for another quiz.
    Fred – Heh heh. Good one.

  8. ceejayoz says:

    Dan – just a note – with the newly colored sidebars, the text “SimpleBits is a place for Dan Cederholm to collect everything he does on the web.” on the front page is difficult to read…
    Also, the sidebar coloring doesn’t show up in the comment preview window, making the Misc. block difficult to read as well.

  9. Quick note about the newly colored sidebars – the orange is nice, but I am really enjoying the blue and purple. Great work.

  10. Jonathan Porter says:

    Good piece, but address is not for an address per se. The W3C states, “The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.” So address information is a bit shortsided.

  11. Jules says:

    Well, there are (X)HTML validation and CSS validation – I think Dan needs SPELLING validation too. It is spelt arbitrary, not arbitratry.

  12. After reading Dan’s conclusion then the best answer is ‘B’. Using the div and the p tag together gives the best results. If a paragraph gets added, nothing breaks and existing code does not need to be modified. The div allows easy styling in a regular browser and the p gives the needed result in the case of un-styled browsers. Using only one will require more changes when the time comes…and it usually does.
    That brings up another thought. When a redesign occurs, how much change really happens? I would think that some of the content tags often get modified and not just the CSS which is the goal. The CSS Zen Garden shows its possible, but how often do we end up changing more than just the CSS to get results? If the original document is semantically correct then the original would only need to be changed in the case of missing or additional information and not too modify existing tags to help change presentation.