How to properly embed unordered lists within ordered lists (HTML)

Question

So, I have an ordered list that has an unordered list within it, like so:

    <ol>
        <li>Choose which type of game you want to play</li>
        <li>Press the spacebar to start the game</li>
        <li>
            <ul>
                <li>Controls for single player mode:</li>
                <li>
                    <ul>
                        <li>W and S</li>
                        <li>&uarr; and &darr;</li>
                        <li>A and Z</li>
                        <li>' (apostrophe) and / (forward slash)</li>
                    </ul>
                </li>
                <li>Controls for double player mode:</li>
                <li>
                    <ul>
                        <li>The right player uses A and Z</li>
                        <li>The left player uses ' and /</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ol>

Unfortunately, it outputs this:

I embedded the additional lis as otherwise it failed W3C validation. The Validator complained about sticking <ul> elements inside of <ol> elements otherwise.

How do I fix this so that the list symbols in front of the items will go away?

You want like this? Related question stackoverflow.com/questions/8747992/…. — Harry
– Harry, Commented Aug 8, 2014 at 2:35

Robby Cornelissen · Accepted Answer · 2014-08-08 02:41:06Z

Just don't create a new li to embed your nested uls, but add them to the existing li. Like this:

<ol>
    <li>Choose which type of game you want to play</li>
    <li>Press the spacebar to start the game
        <ul>
            <li>Controls for single player mode:
                <ul>
                    <li>W and S</li>
                    <li>&uarr; and &darr;</li>
                    <li>A and Z</li>
                    <li>' (apostrophe) and / (forward slash)</li>
                </ul>
            </li>
            <li>Controls for double player mode:
                <ul>
                    <li>The right player uses A and Z</li>
                    <li>The left player uses ' and /</li>
                </ul>
            </li>
        </ul>
    </li>
</ol>

Since ordered and unordered lists are block-level elements in HTML, they will wrap to the next line by default, so there's even no need to create additional divs or insert line breaks.

Jason Winnebeck · Accepted Answer · 2014-08-08 02:34:59Z

2

Is this what you want? You put nested lists inside of the li:

<ol>
    <li>Choose which type of game you want to play</li>
    <li>Press the spacebar to start the game</li>
    <li>Controls for single player mode:
        <ul>
            <li>W and S</li>
            <li>&uarr; and &darr;</li>
            <li>A and Z</li>
            <li>' (apostrophe) and / (forward slash)</li>
        </ul>
    </li>
    <li>Controls for double player mode:
        <ul>
            <li>The right player uses A and Z</li>
            <li>The left player uses ' and /</li>
        </ul>
    </li>
</ol>

answered Aug 8, 2014 at 2:34

Jason Winnebeck

1,3041 gold badge11 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to properly embed unordered lists within ordered lists (HTML)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related