We use lists to organize information and make it easier to scan. Lists can:
- Communicate information in a concise way.
- Represent a series of steps.
- Group similar items under a heading.
Ingredients for Oreo-stuffed brownies
- 225g butter, melted and cooled slightly
- 1 cup caster sugar
- 1½ cups packed brown sugar
- 2 tsp vanilla extract
- 4 eggs
- 1 tsp salt
- 1 cup cocoa powder, sifted
- 1½ cups plain flour
- 1 cup chocolate chips
- 1 (154g) packet of Oreos
- Use bulleted lists unless items are in a sequence (in that case, use a numbered list).
- Include a descriptive header or lead-in text to provide context.
- Avoid showing too many items. Our brains usually can’t process more than 5-9 pieces of information at once.
- Organize in a logical way using location, alphabet, time, category, or hierarchy.
<ul class="bulleted-list"> <li>225g butter, melted and cooled slightly</li> <li>1 cup caster sugar</li> <li>1½ cups packed brown sugar</li> <li>2 tsp vanilla extract</li> <li>4 eggs</li> <li>1 tsp salt</li> <li>1 cup cocoa powder, sifted</li> <li>1½ cups plain flour</li> <li>1 cup chocolate chips</li> <li>1 (154g) packet of Oreos</li> </ul>
- Preheat oven to 350°F
- In a large bowl, combine wet ingredients
- Stir in flour, a little at a time
- Pour mixture into pan
- Bake for 35-40 minutes
- Use a numbered list when the sequence of items is important (for example, step-by-step instructions).
- Don’t nest lists within lists—limit to one level.
<ol class="numbered-list"> <li>Preheat oven to 350°F</li> <li>In a large bowl, combine wet ingredients</li> <li>Stir in flour, a little at a time</li> <li>Pour mixture into pan</li> <li>Bake for 35-40 minutes</li> </ol>
- Don’t use bulleted or numbered lists for links.
<ul class="link-list"> <li><a href="">Oreo-stuffed brownie recipe</a></li> <li><a href="">Oreo-stuffed chocolate chip cookie recipe</a></li> <li><a href="">Fitbit.com</a></li> </ul>