Adding Ordered and Unordered Lists to Your Kindle eBook

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: Working with Tables

Lists are a way to represent related pieces of information in bulleted format. Ordered lists utilize a sequential numbering format, while unordered lists use bullets. In terms of presentation, lists are typically indented from the normal content, with the bullets or numbers appearing in a vertical line. Using this type of markup is particularly useful for non-fiction.

Examples of Ordered and Unordered Lists

Older e-ink Kindles have marginal support for lists; however, they typically work as long as the presentation properties aren't modified using CSS. The Kindle Fire has much better support for lists, and their presentation can be extensively altered using CSS.

HTML Markup for Lists

The entire contents of an ordered or unordered list are wrapped in the tags <ol>…</ol> or <ul>…</ul> respectively. Within these elements, text is added in between <li>…</li> tags to denote the content for one bullet. The HTML markup for the above screenshot would look as follows:

<p>Things to do today (in order)</p>
<ol>
<li>Fire agent</li>
<li>Learn how to design an eBook</li>
<li>Upload my eBook to the Kindle store</li>
</ol>
<p>Things to do today (in no particular order)</p>
<ul>
<li>Walk the dog</li>
<li>Write 1,000 words</li>
<li>Make alimony payments</li>
</ul>

Important Note: Do not wrap the contents of an entire ordered or unordered list within <p> tags (i.e. <p><ol><li> Item1 </li></ol></p>). This is improper coding and will result in failed HTML validation. Also, be sure to follow the rule that the first tag opened should be the last to be closed. <ol><li>…</li></ol> is correct, but <ol><li>…</ol></li> is incorrect.

When working with lists, it is comforting to know that if the content for one bullet is wrapped onto the next line, it will be indented the same distance from the bullet as the first line. Therefore, all the text inside a list will be flush. This is a nice typographical feature when you want to display specific information to your reader.

Lists Appear Flush from One Line to the Next

Nested Lists

Nesting lists allows you to display sub-bullets under one bullet. This is particularly useful when constructing the Table of Contents. While support for nested lists on the older e-ink Kindles is poor, it works well on the Kindle Fire. Care must be taken with the syntax and tag placement for nested list HTML markup, and use of an HTML Validator is almost essential. If you want to add a sub-level list to one bullet, add a separate ordered or unordered list in between the opening <li> and closing </li> tags of the root-level element. Some sample HTML is as follows (indented for convenience):

<p>Things to do today (in order)</p>
<ol>
  <li>Fire agent</li>
  <li>Learn how to design an eBook utilizing my awesome new HTML and CSS skills
  <ul>
    <li>Brush up on KindleGen compiling</li>
    <li>Debug my EPUB</li>
  </ul>
  </li>
<li>Upload my eBook to the Kindle store</li>
</ol>

Nested List Example in Google Chrome

Notice how the closing </li> for #2 on the ordered list comes after the </ul> for the sub-level list.

When designing eBooks for the Kindle, it is a good practice to be cautious in the use of nested lists due to their poor rendering on older e-ink Kindles when CSS is applied. However, if no CSS is defined for the list, they will have acceptable rendering.

Acceptable Rendering of Nested Lists on the Kindle

Next Post: Working with Hyperlinks

Adding Ordered and Unordered Lists to Your Kindle eBook