How to Create Lists on a Blog

You can create three types of lists for a blog: unordered lists, ordered lists, and definition lists. Creating lists on your blog organizes information and makes information easier to read.

All lists, no matter the type, are created using a series of HTML tags. This makes them more complicated to implement, so pay close attention to those closing tags — they’re easy to forget.

Create an unordered list

An unordered list is a series of bulleted items and is used for lists that don’t require numbering. For example, if you want to create a list of chocolates, you don’t need to list them in any particular order. Unordered lists use the <ul> and <li> tags.


The <ul> tag stands for unordered list and is turned on at the beginning of the list and turned off following the last item in the list. The <li> tag stands for list item; it gets turned on at the beginning of each new item and turned off at the end of that item.


Create an ordered list

An ordered list contains items that must be listed in a particular order, such as a list of ranks or preferences. It may also indicate a list of steps for the reader to follow. Format an ordered list just the way you format an unordered list, substituting the <ol> tag for the <ul> tag:

<li>Get a graham cracker.</li>
<li>Lay on a piece of chocolate.</li>
<li>Add a toasted marshmallow.</li>
<li>Add a second graham cracker on top, squish marshmallow, and eat.</li>

Create a definition list

The third type of HTML list is the definition list. This type of list gives a term and then its definition and has built-in spacing to lay those elements out properly.

  • Each list starts with a <dl> tag and closes with the </dl> tag.

  • Each term starts with a <dt> tag closes with the </dt> tag.

  • Each definition starts with a <dd> tag closes with the </dd> tag.

<dt>Milk chocolate.</dt>
<dd>Makes a standard smore; a workmanlike choice.</dd>
<dt>Dark chocolate.</dt>
<dd>Makes a designer smore; clearly the superior choice.</dd>
<dt>White chocolate.</dt>
<dd>Pretends to be chocolate, but isn’t; a poor choice.</dd>
blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.