How to properly embed unordered lists in ordered lists (HTML)
So, I have an ordered list that has an unordered list, for example:
<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>↑ and ↓</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, this outputs this:
I have inlined an additional li
one as it would otherwise fail W3C validation. The validator complained that the elements would otherwise <ul>
stick inside the elements <ol>
.
How do I fix this to make the list symbols before the elements disappear?
source to share
Just don't create a new one li
to embed your nested ul
s, but add them to the existing one 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>↑ and ↓</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 is not even the need to create additional div
or insert line breaks.
source to share
Is this what you want? You put nested lists inside 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>↑ and ↓</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>
source to share