In a previous post, we talked about constructing headings in HTML and Markdown. This time we’ll take a look at lists.
There are two main kinds of lists in HTML: ordered and unordered. Ordered lists are typically presented with numbers, while unordered lists are typically presented with bullets. Like so:
- Peel and slice apples
- Toss with sugar, cinnamon, nutmeg, and lemon juice
- Fill pie crust
- Apples
- Oranges
- Pears
That said, as with all things on the web, the presentation isn’t tied to the content itself. The difference between an ordered list and an unordered list is the nature of the content, not how it’s displayed. Ordered lists must proceed in a certain order, while the items in unordered lists can safely be shuffled around.
The HTML to make a list has two parts: the list itself (whether ordered or unordered) and the list items it contains. E.g., the above ordered list would look like so in HTML:
<ol>
<li>Peel and slice apples</li>
<li>Toss with sugar, cinnamon, nutmeg, and lemon juice</li>
<li>Fill pie crust</li>
</ol>Notice that the numbers themselves don’t appear in the HTML: rather, they are generated by the browser. An unordered list is nearly identical, save that it uses <ul> rather than <ol>:
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Pears</li>
</ul>In Markdown, lists are considerably easier to type. Ordered lists use — no surprise here — numbers, while unordered lists can be made with either asterisks or hyphens:
1. Peel and slice apples
2. Toss with sugar, cinnamon, nutmeg, and lemon juice
3. Fill pie crust
- Apples
- Oranges
- PearsList patterns in Markdown lean heavily on familiar ways of writing in email programs and elsewhere. This design philosophy is often referred to as “paving the cowpaths” — that is, looking at how people are already making something work, and adopting it. Paving the cowpaths also happens to be one of the principles underlying the continuing development of HTML, so it’s natural for it to extend here as well.
Have questions about writing on the web with HTML and Markdown? Send a short note to askaneditor@editorially.com and we’ll try our best to answer your question in subsequent posts.
