Free tools Windows power users keep installed
One-click scans. No signup required.
Use a nested ordered list: put a second <ol> inside the parent <li>, then style the nested list with list-style-type: lower-alpha. That produces numbered main items with lettered sub-items such as a, b and c.
Write the nested list in HTML
Keep the parent list item open around its sub-list. This makes the sub-items part of the item they explain, rather than a separate list.
As an Amazon Associate I earn from qualifying purchases.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ol>
<li>Third-a</li>
<li>Third-b</li>
</ol>
</li>
<li>Fourth item
<ol>
<li>Fourth-a</li>
<li>Fourth-b</li>
<li>Fourth-c</li>
</ol>
</li>
<li>Fifth item</li>
</ol>Set the marker style with CSS
Use decimal markers for the outer list and lowercase letters for nested ordered lists:
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }The outer list displays 1, 2, 3; the nested lists display a, b, c. To use lowercase Roman numerals instead, set the nested list to lower-roman.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Why nesting is the right approach
Nested lists express the relationship between a main item and its sub-items in the HTML structure. CSS then controls how each level is marked. This is easier to maintain than typing marker characters directly into the list text, especially if items are added or reordered.
The original SitePoint Forums question dates to August 4, 2011, and a follow-up thanks was posted August 10, 2011. The practical answer remains straightforward: use nested lists and style the nested level. Read the SitePoint discussion.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
