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:
    Sep 11, 2003

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

  2. Anon says:
    Sep 11, 2003

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

  3. Raena says:
    Sep 11, 2003

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

  4. Raena says:
    Sep 11, 2003

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

  5. Ben says:
    Sep 11, 2003

    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:
    Sep 11, 2003

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

  7. Dan says:
    Sep 11, 2003

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

  8. ceejayoz says:
    Sep 11, 2003

    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. Charles Crabtree says:
    Sep 11, 2003

    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:
    Dec 18, 2003

    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:
    Dec 19, 2003

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

  12. Scott Cropper says:
    Mar 3, 2005

    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.