Nested number and bullet point markup


(Mike Harris) #1

Hi Everyone,

I’m creating an article a week for a discourse forum, and I have noticed some odd behavior with nested bullet points when combined with number lists.

Specifically, I’ve been using html tags instead of Markdown or BBcode, becuase I find both to be fairly non-intuitive for larger posts, and have been nesting bullet point tags (ul) within numbered tags (ol). Even after closing the tags appropriately for the ordered list the unordered bullet points continue to the next level of text.

  1. This is level one
  2. Numbered Item 2 with bullets:
  • line item 1
  • line item 2
  • This is numbered item 3
  • Underlying code:

    <ol><li>This is level one</li>
    <li>Numbered Item 2 with bullets:</li>
        <ul><li>line item 1</li>
        <li>line item 2</li></ul>
    <li>This is numbered item 3</li></ol>
    

    As you can see, the third numbered item shows up as a bullet instead of a number. In the preview pane these come up looking great, but it doesn’t seem to translate over to the post itself. I’m not sure if this is a bug or not. Thanks for any thoughts on the matter!


    (John Muhl) #2

    You’re not supposed to directly nest list like this:

    <ol><ul>…
    

    Instead you should wrap them inside an li element:

    <ol><li><ul>…
    

    See the content model sections of:
    https://html.spec.whatwg.org/multipage/semantics.html#the-ol-element
    https://html.spec.whatwg.org/multipage/semantics.html#the-li-element


    (Jeff Atwood) #3
    1. This is level one

    2. Numbered Item 2 with bullets:

      • line item 1

      • line item 2

    3. Numbered item 3

    in markup:

    1. This is level one
    
    2. Numbered Item 2 with bullets:
    
       - line item 1
       
       - line item 2
    
    3. Numbered item 3
    

    Just pay attention to your indentation and do not mix loose (spaced) and tight (unspaced) lists. I know that mixing of loose and tight lists has tripped @sam up in the past.


    (Mike Harris) #4

    Jeff, thank you for your quick response. I tested your suggestion and it worked well. It seems the spacing before the “-” makes all the difference with markdown. I really appreciate your help!