Topic 7 · 7 of 43

Lists

All in one: every list and list attribute, side by side

What this example compares

The three lists: <ul> vs <ol> vs <dl> (with <li>, <dt>, <dd>)
Number symbols: type="1", "a", "A", "i", "I"
Where counting starts: start vs reversed vs <li value>
Nesting: the sub-list inside its parent <li>, never beside it
A menu: <nav> + <ul> of links

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see five panels. Panel 1 shows bullets, numbers and a term with its description. Panel 2 shows the same three fruits counted five different ways. Panel 3 starts at 5, counts down 3, 2, 1, and jumps to 10. Panel 4 shows HTML and CSS indented under Web, and panel 5 shows the menu as a bulleted list of links.

Quick check: in panel 3, which attribute would you use to make only the third step show the number 7?

value="7" on that <li>. start moves the whole list, and reversed only changes the direction of counting.