SimpleQuiz › Part X › Multi-Paragraph List Items

This quiz question comes courtesy of Matt Haughey and it’s certainly one that I (and maybe you) have wondered about.

The scenario is familiar — marking up multiple paragraphs within the same list item. There are visual consequences with any of these to take into account, and I’ll refrain from mentioning anything until after the comments have started. I’d love to hear what everyone’s thoughts are.

Q: When marking up multiple paragraphs within one list item, which method makes the most sense?

  1. <ul>
      <li>Paragraph 1<br /><br />
      Paragraph 2</li>
    </ul>
  2. <ul>
      <li>Paragraph 1
      <p>Paragraph 2</p></li>
    </ul>
  3. <ul>
      <li>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </li>
    </ul>

61 Comments

  1. mini-d says:

    Without any doubt, C is the answer.
    But… i would suggest to use, dl, dt, dd if you want to make paragraph and unorderer lists.

  2. I’d agree with mini-d – C but think of using dl’s if appropiate for the context (they won’t always).
    IIRC B is not valid (could be wrong).

  3. Matt Haughey says:

    If you go with C, how do you deal with vertical margins introduced by the paragraph tags (imagine the list contains three other list items that don’t have additional paragraphs in them).
    That’s essentially what prompted the question, the br’s give you a consistent visual layout with other li items, but the C option seems like a better choice, though text layouts get weird with introduced margins.

  4. David H says:

    Well, C is the only one “marking up multiple paragraphs within the same list item”.

  5. C is the way to go, and the additional margins added by the paragraph tags are handled with CSS. Use a descendant selector to modify your margins for just those paragraphs that occur within a list item, e.g.
    li p {margin-top: 0.5em;}

  6. simon says:

    Option C, without doubt. If you want to style paragraphs with CSS, it’s the only way to go, no matter if you want different styles on paragraphs within and without the lists.
    Option B would mean a more complex CSS file, and would introduce other problems as well; it would certainly be structurally less appealing.
    Option A might mean that you couldn’t even do normal paragraphs (without a double linebreak) and style them well with CSS.
    The bottom line is, if the list contains text you’d put in a paragraph, even if it’s just one paragraph, it should be in a paragraph.

  7. chrisp says:

    Definitely C. Use li p { margin-top: 0; margin-bottom: 0; } to control paragraph margins. Funny, I never considered <li> as being a container tag, like <div> and <blockquote>.

  8. Matt Haughey says:

    Mark’s keeps margins around the text, though they are slightly smaller at the top. You can see how the other list elements have no margins between items. The margin top and bottom of zero gives you no separation at all. What I want is a visual break only between the paragraphs, which I’m guessing would need child selector support for putting a zero top margin on the first paragraph and a zero bottom margin on the last paragraph.
    I asked this question because I’m marking up a lot of outlines and legal documents in CSS, and I frequently hear “why are the margins screwed up on some points” when lists are marked up with margins already on the li, and occasional paragraphs throw that off (I’ll try not to moderate this discussion any further).

  9. Would it be reasonable/helpful to include a p in each li?

  10. ACJ says:

    C is the most semantically correct if je the list item indeed includes multiple paragraphs. One could think of scenarios where A or B are more appropriate.
    By the way, don’t forget about dl.

  11. Roman says:


    li p:first-child { margin-top:0px; }
    li p:last-child { margin-bottom:0px; }

    works for me

  12. joel says:

    Matt, I think you’re right; what you describe would need child selector support. A way around that would be to assign a class to your first and last paragraphs in a list, so that noncompliant browsers can use those as hooks. Assuming your CMS can generate those. Otherwise, some javascript could be written to add class attributes to those paragraphs after the fact, but that seems like a less than ideal solution.
    I vote for C, since it gives the most flexibility. I have used A before, and don’t feel too bad about it.

  13. A would be used if you needed to insert a line break, say for example if you had a list of addresses and wanted to split up the street name and city, state.
    B is just silly.
    C is the only answer if you plan on marking up two real paragraphs.

  14. ste says:

    In my pre-semantic days, I would have gone for A with no qualms. These days, I really am trying to stick to straight semantics, and if it’s two paragraphs, then it’ll be marked up as two paragraphs. I would probably apply a class to either the end or beginning paragraph, though so that the margins between list items weren’t disparate. Something like
    Content

    Content

    Content

    Content
    where the CSS would be
    p { margin: 3em 0 0 0; }
    p.first { margin: 0; }
    But then I generally define my paragraphs so there is either only a top or bottom margin (and not both) and usually have a class specifically for removing any margins (generally for the first paragraph in a container when I don’t want a top margin). If that makes sense. Of course, if IE supported child selectors, I wouldn’t have to go to all that trouble …

  15. Jaime says:

    C would be the semantically correct answer, but it would require a good bit of CSS and javascript wrangling to get it to look the way you want it. You could use the :first-child pseudo-class for browsers that support it and maybe some javascript for browsers that don’t. For example
    li p { margin-top: 0.5em; margin-bottom: 0 }
    li p:first-child { margin-top: 0 }
    Javascript function to add to body onload:
    function setParagraphMargins() {
    for (var i = 0; i here.

  16. ste says:

    Dang, forgot to unencode my HTML, it should be:
    <ul>
    <li>Content</li>
    <li>
    <p>Content</p>
    <p>Content</p>
    </li>
    <li>Content</li>
    </ul>

  17. David House says:

    C. It’s semantically correct, and margin collapse should get rid of the big margins top and bottom, unless you have a border or padding on the li, in which case I’d use the first-child and last-child selectors or apply classes to the paragraphs if you want IE compliance.

  18. Will says:

    A is the simplest solution for rendering the text without varying margins, but it is semantically incorrect. It does not properly identify the text blocks under the list item as separate paragraph entities.
    B is just a mess. There’s no justification for identifying the two blocks of text differently.
    C is the best answer. It’s semantically correct and allows you to adjust the margins with CSS selectors. It should also degrade gracefully.
    Let me also add that I don’t like some of the solutions mentioned here because of how the bullet points line up. For the sake of usability, I believe that it’s a much more powerful visual cue that you are beginning a new point when the bullet lines up next to the first line of content under a list item.

  19. vlad says:

    interesting, i’ve never come across a situation where a multi-paragraph list item was needed. i can understand why though–there are times when a definition list (as mentioned by others) isn’t as appropriate as an ordered or bulleted list.
    of the available choices, c is the best. it’s more semantically appropriate markup, just requires a bit more css. however, long list items that extend over multiple paragraphs should be avoided, imo. instead, normal paragraphs and headings should be used. after all, there is a variety of headings (h1, h2, h3…) suited for this purpose. think of a recipe with detailed steps. which is the better way?
    instructions

    blah blah blah blah

    blah blah blah blah

    blah blah blah blah

    blah blah blah blah

    …or…
    instructions
    step 1

    blah blah blah blah

    blah blah blah blah

    step 2

    blah blah blah blah

    blah blah blah blah

    one may point out that it’s still a list and should be marked up as such, but there is a limit to how far on could go with lists. one could go to such extremes that /everything/ is a list: an essay is a list of paragraphs, for example. but is it more logical to use

    or ?

  20. vlad says:

    sorry, the last line should read “<p> or <ol>?”

  21. Jeff Croft says:

    C is the only answer. That said…
    Ryan mntioned it above, but I think you have to think about marking up each li’s content as a paragraph (if in fact, it is a paragraph). You can’t only use the p tags when you have more than one — they should be there anytime you have a paragraph, whether it’s one or 50.
    Jeff

  22. sie yin says:

    C is the only semantically correct answer. And the only one that should be used.
    Use CSS for margin handling, as mentioned before.

  23. If you go with C, how do you deal with vertical margins introduced by the paragraph tags (imagine the list contains three other list items that don’t have additional paragraphs in them).

    The low-tech solution here is to wrap all list items in <p> tags if any of the items have multiple paragraphs.

    There’s nothing semantically wrong with wrapping a single paragraph in <p>.
    <ul>
      <li>
        <p>Paragraph 1</p>
      </li>
      <li>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </li>
    </ul>

  24. Josh says:

    I would vote C… it’s the best option presented.

  25. Joshua says:

    C gives you the most flexibility. It allows you to control margins and padding between the 2 paragraphs themselves where as the other 2 options do not. Not to mention if you use classes or id’s you have complete control over each paragraph and the freedom to create different styles of paragraphs to give each paragraph it’s own meaning.
    Example: “Frequently Asked Questions”
    <ul>
      <li>
        <p class=”question”>Paragraph 1</p>
        <p class=”answer”>Paragraph 2</p>
      </li>
    </ul>

  26. syn says:

    I was personally wondering, shouldn’t you always include <p> tags in <li>s? Or any other block container? If you simply use <li>Blah</li>, does that mean anything or do you need to use <li><p>Blah</p><li>. Just wondering.

  27. TOOLman says:

    C + CSS.

  28. Conspi says:

    definitively C

  29. Keith Bell says:

    I agree with the majority, that C is the semantically correct option, and I use this method frequently.
    As to Matt’s question on vertical margins, I typically use a method employing simple CSS descendant selectors (no nested P on every LI, no child selectors, no special classes on either the LI or P elements) – just a case of choosing your margins carefully for P, OL and LI. See example with CSS.

  30. Karim Akilal says:

    Hi all,
    IMHO, ain’t no reason to ask such question. A list is entended to give a list of more than one item. I admit, that “syntax-lly” spoken it’s true to talk about one-item list but “semantic-ally” it’s a non-sense (sorry).
    Sure, it will be more correct to put a paragraph between <p> </p>. But WHY would man put that in a one-item list ?
    So i would’nt choose any of the given choises.

  31. Anonymous says:

    Joshua, to struct a FAQ, a definition list is typically the solution
    The Faq
    question 1 :….
    response 1…
    question 2 :….
    response 2…

  32. laurentj says:

    arg… why xhtml tags are interpreted !
    so here is again my response :
    <dl>
    <dt>question 1</dt>
    <dd>response1</dd>
    <dt>question 2</dt>
    <dd>response 2</dd>

    </dl>

  33. Jason Pearce says:

    I agree with Wayne Burkett. C is the correct answer. And if you are going to wrap some content with paragraph tags, you might as well wrap all content within each li with paragraph tags.

  34. Joshua says:

    laurentj,
    You’re correct, the FAQ would be better suited in a definition list. My point was simply that there is more flexibility in answer C than in A or B.

  35. Benjamin says:

    I believe C would be the correct answer

  36. For Multiple Paragraphs within one list item, the answer has to be C.

  37. Joe Clark says:

    Oh, I write stuff like this all the time. ul li blockquote p (example). A need for this kind of nesting is easy to come by. And I have my CSS almost up to the task.

  38. GaryF says:

    The only semantic answer here is C.

  39. Tom Clancy says:

    Is the vertical margin thing still an issue here? I typically add a declaration of p {margin-top: 0;} near the start of my base stylesheet to avoid these issues. That way the first paragraph inside an element never causes these problems. You can apply any margin-top you need to the li and then set a larger margin bottom on li p to get the separation between paragraphs you would normally have.

  40. Robert of W says:

    C with the appropriate margin set to 0 in the CSS.

  41. Doug says:

    Wayne got it right above. When writing a list, all elements in the list should have a similar form. This isn’t an HTML rule, it’s a writing style rule, the principle of parallel construction. If one list item contains a paragraph, it is to be expected that all list items will contain paragraphs. CSS will therefore ensure that all list items are appropriately styled.

  42. chris says:

    C!

  43. Keith Bell says:

    I’m not sure that I agree with Doug; I think maybe he pushes the intent of the principle of parallel construction somewhat. But if you do want to look at it that way, don’t all elements in a list (order or unordered) already have a similar form, courtesy of the LI element and the bullet or number given to it by the UL or OL element? If a list item is simple enough to need no further subdivision, then enclosing it in an additional P element is redundant, even if other items in the list are subdivided into paragraphs. LI is already a block-level element, and things in a list are list items first and foremost, not paragraphs.
    As for the visual form, like I said earlier, it’s a trivial matter to construct the CSS to make it look right, without Ps in every LI, or exotic CSS rules.

  44. Roger says:

    C. And then add some CSS to take care of the margins.

  45. Michael says:

    Apropos the definition list for the FAQ, I’d have thought better like so:

    <dl>
    <dt>Question</dt>
    <dd>content of question</dd>
    <dt>Answer</dt>
    <dd>content of answer</dd>

    </dl>

    That seems to me to use the “title” and “description” elements of the definition list more appropriately

  46. Micah says:

    I go with Doug’s answer (Ps in every LI) and kudos to him for the Bartleby reference. Very classy. I would also propose that redundant but semantically meaninful markup is not a crime.

  47. Keith Bell says:

    I never suggested that redundant markup is a crime, Micah, merely that it is (as Merriam-Webster defines “redundant”) “exceeding what is necessary or normal; superfluous”. And a single-paragraph list item is still semantically meaningful without a nested P element.
    The great thing about these little brain-teasers of Dan’s is the range of opinions they bring to light. My own preferred solution to this one reflects my growing tendency to seek the method with the tersest, valid, semantically correct HTML and simplest CSS. But I wouldn’t suggest locking anyone up for putting Ps in every LI if that’s their preference! :o)

  48. Bruce says:

    The answer should be C. You can handle additional margins added by the paragraph tags with CSS.

  49. Micah says:

    Hehe, I didn’t mean to come across so harshly. I see where you are headed, and I agree that our styles are different. Whereas you value terse, “just enough to get the job done” markup, I’ve grown towards a “(semantic) markup = meaning, so include as much as you like within the limit of validation” style of marking up content. It’s great that XHTML, despite being a very *long* specification, still allows enough flexibility for people to express their individual styles.

  50. mark says:

    err W3C states that P is a block level element, as a result a list item is not intended to be used as an area for paragraphs of content. so it is without a doubt A
    mark

  51. Keith Bell says:

    Maybe I misunderstand, mark, but I can’t follow your argument. If I read you correctly, you seem to be saying that because P is a block-level element, list items cannot contain paragraphs. But all that being a block-level element means is that such an element (see the HTML 4.01 specification, clause 7.5.3) “may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create ‘larger’ structures than inline elements.”
    Exactly which types of content an element may contain is specified in the Document Type Definition. The content model given by the HTML 4 DTD for LI is %flow, indicating that it can contain inline or block-level elements, including P — that would be perfectly valid HTML.
    By contrast, the content model for the P element is %inline. Although a block-level element itself, it (see clause 9.3.1 of the HTML 4.01 specification) “cannot contain block-level elements (including P itself)”.

  52. Bob Baxley says:

    The use of a DL list has been mentioned already but nobody seems to have taken up the idea. I’ve been using a DL for quote/attribution pairs as well as title/description pairs. Is there a reason for NOT using a DL in such cases?

  53. Michael Pierce says:

    For what it’s worth, my answer would be C. Given the example of legal documents, I would bring together the solutions presented by syn and ste. Again, in the context suggested, a list of paragraphs, all <li> items should contain <p> tags. And, since we don’t have support for the :first-child pseudo class, a .first class would be included. To me, a definition list doesn’t fit the scenario of the question. List would look something like:
    <ul>
      <li>
        <p class=”first”>Paragraph text</p>
      </li>
      <li>
        <p class=”first”>Paragraph text</p>
        <p>Paragraph text</p>
      </li>
    &lt/ul>
    ul li p.first { margin-top: 0; }
    ul li p {margin-top: 1em; }
    Some extra markup to include the .first class, but the best we can do until we get :first-child support. I think that’s the best semantic solution, IMHO.

  54. mark says:

    that told me! – having looked at the problem further i believe that the dl,dt,dd solution is the best for this type of application.
    mark

  55. Alex says:

    The answer is definitely C. C is the only choice which actually defines paragraphs for paragraph-content. Why not use a CSS rule like this to fix the margins. You don’t have to worry about classes or anything:
    li p { margin: 1em 0 0 0; }
    li p:first-child { margin-top: 0; }
    Also, even if the browser doesn’t support :first-child, I don’t think it’s that big of a problem. Will viewers be appalled and run away screaming when the margins appear irregular?

  56. Ohmish says:

    just.showing.you.how.this.loooooooooooooooooong.text.makes.the.design.go.whack…delete.my.post.if.you.like.:)

  57. Ohmish says:

    darn..it.was.not.long.enough..well.here.we.go.again.then.. just.showing.you.how.this.loooooooooooooooooong.text.makes.the.design.go.whack…delete.my.post.if.you.like.:)

  58. Zethyr says:

    C is the best of the choices listed in the article, but dl&dt&dd is probably the samantically correct way of displaying the pragraphs