In HTML, there are three main kinds of lists: ordered lists (usually numbered), unordered lists (i.e. bullet lists) and definition lists (like a dictionary of entry words and their explanations).

In this chapter, an assortment of lists alone and in combination with each other and with surrounding text.

Simple lists

Here are the opening paragraphs of Charles Dickens’s A Tale of Two Cities, as a list.

And the following paragraph as a numbered list:

  1. There were a king with a large jaw and a queen with a plain face, on the throne of England.
  2. There were a king with a large jaw and a queen with a fair face, on the throne of France.
  3. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.

Let’s ruin some more of that fine book to show nested lists:

  1. In England, there was scarcely an amount of order and protection to justify much national boasting.
    1. Daring burglaries by armed men, and highway robberies, took place in the capital itself every night;
    2. families were publicly cautioned not to go out of town without removing their furniture to upholsterers’ warehouses for security;

      (We might have a paragraph here, followed by a nested list.)

      1. the highwayman in the dark was a City tradesman in the light, and, being recognised and challenged by his fellow-tradesman whom he stopped in his character of “the Captain,” gallantly shot him through the head and rode away;
      2. the mail was waylaid by seven robbers, and the guard shot three dead, and then got shot dead himself by the other four, “in consequence of the failure of his ammunition:” after which the mail was robbed in peace;
      3. that magnificent potentate, the Lord Mayor of London, was made to stand and deliver on Turnham Green, by one highwayman, who despoiled the illustrious creature in sight of all his retinue;
    3. prisoners in London gaols fought battles with their turnkeys, and the majesty of the law fired blunderbusses in among them, loaded with rounds of shot and ball;
    4. thieves snipped off diamond crosses from the necks of noble lords at Court drawing-rooms;
    5. musketeers went into St. Giles’s, to search for contraband goods, and the mob fired on the musketeers, and the musketeers fired on the mob, and nobody thought any of these occurrences much out of the common way.
  2. In the midst of them, the hangman, ever busy and ever worse than useless, was in constant requisition; now, stringing up long rows of miscellaneous criminals; now, hanging a housebreaker on Saturday who had been taken on Tuesday; now, burning people in the hand at Newgate by the dozen, and now burning pamphlets at the door of Westminster Hall; to-day, taking the life of an atrocious murderer, and to-morrow of a wretched pilferer who had robbed a farmer’s boy of sixpence.

Chapter contents

In kramdown, you can get a list of all the headings in a file by adding the tag {:toc} after a single list item. They automatically get an id of markdown-toc. How does this theme handle those in-chapter tables of contents?

You can exclude a heading from that in-chapter TOC by giving it a no_toc class, which we’ve done to the first ‘Lists’ heading in this chapter.


In book-publishing convention, lists of references – known as bibliographies – usually have a particular layout. Most often, they have no marker (bullet or number) and a hanging indent, making it easy to scan their initial words, which are usually the surnames of the authors. We mark up bibliographies by giving a list the class bibliography. How does this theme handle a bibliography? Here are Maria Popova’s ten essential books on typography.

What about bibliographies with really long, complicated titles? Since we’re using Jekyll, here are some things others have written while working with things called Jekyll – MLA style.

Definitions and glossaries

In HTML definition lists are useful semantic structures, especially for things like glossaries. Here is a basic definition list, using definitions of new words from in 2014.

acquihire, n.
buying out a company primarily for the skills and expertise of its staff…
adorbs, adj.
(informal) arousing great delight; cute or adorable
air punch, n.
thrusting one’s clenched fist up into the air, typically as a gesture of triumph…
amazeballs, adj.
(informal) very impressive, enjoyable, or attractive
anti-vax, adj.
(US informal) opposed to vaccination
Bank of Mum and Dad, phr.
(Brit. informal) a person’s parents regarded as source of financial assistance
bare, adv.
(Brit. informal) very; really (used as an intensifier)
bedroom tax, n.
(in the UK) informal name for a measure introduced in the Welfare Reform Act 2012…
binge-watch, v.
(informal) watch multiple episodes of (a television programme) in rapid succession…
bro hug, n.
(US informal) friendly embrace between two men
clickbait, n.
(informal) (on the Internet) content…whose main purpose is to attract attention and draw visitors to a particular web page
cord cutting, n.
(informal) practice of cancelling a pay television subscription or landline phone connection in favour of an alternative Internet-based or wireless service
cotch, v.
(Brit. informal) spend time relaxing; stay or sleep somewhere on a temporary basis
cray, adj. (also cray cray)
(US informal) crazy