Inserting lists

How to organize items in lists with HyperCode

Often you may want to organize your text in lists. Ingredients of a recipe or steps to perform a certain task, for example.

Lists are very important elements in documents, websites, etc. HyperCode offers a simple way to handle them.

There are two types of lists supported by HyperCode. Ordered Lists and Unordered Lists.

Ordered Lists are those in which the items must follow a specific order. For example, the step-by-step to prepare a recipe or to obtain a document from a public agency. Ordered Lists have on each item a sequence identifier, which is normally a number, but can also be letters, for example.

Unordered Lists are those whose items do not need to follow a determined sequence. It could be a shopping list, the optional items of a car, the advantages of using a certain software system, etc. These lists typically use "bullets" to identify each item.

The fact that a list is "unordered" does not mean that it will appear to the reader of your post with items in random or jumbled order. They will appear exactly in the order you define. Only the presentation form is different, using "bullets" or something similar instead of numbers or letters.

If you are creating an Ordered List, HyperCode offers a very interesting functionality. Imagine you wrote an ordered list with 100 items, numbered from 1 to 100.

Suddenly you realize you need to insert a new item at position 20. And the item that was at position 20 moves to position 21, the one that was at position 21 goes to 22, and so on until item 100 goes to position 101.

If you didn't use the HyperCode Ordered List Tag, and had written the numbers for each item manually, one by one, you would have to change them all manually from 20 to 100.

Now imagine if the list had 1000 items.

Using the HyperCode Ordered List Tag, you do not need (AND SHOULD NOT) type the number for each item. That is done automatically. If you need to insert an item at position 20, all the others from there onward will already appear with new numbers.

The same applies if you decide to delete a line.

To create a list in HyperCode, you start with the respective tag, [ol] (for Ordered List) for an ordered list, and [ul] (for Unordered List) for an unordered list.

Then, each list item, regardless of its type, is listed with the tag [li] (for list item), the item's text content, and its respective closing [/li] or [/].

To end the list, you close with the closing tag corresponding to the type of list opened: lists opened with [ol] are closed with [/ol] and lists opened with [ul] are closed with [/ul]. Or [/] to close either one.

Tag [li]: List Item

Indicates the beginning of a list item. It works for both ordered and unordered lists.

After the [li] tag you insert the item text, and then close the item with [/li] or [/].

Tag [ul]: Unordered List

Indicates the beginning of a sequence of items in an Unordered List.

After that, the items will be listed using [li]content[/li]. At the end of the list, close the [ul] tag using [/ul] or simply [/] and the list will be ready.

Example:

which is displayed like this:

Buy:

• bread
• cheese
• milk
• pasta

Tag [ol]: Ordered List

Indicates the beginning of a sequence of items in an Ordered List.

After that, the items will be listed using [li]content[/li]. At the end of the list, close the [ol] tag using [/ol] or simply [/] and the list will be ready.

Example:

which is displayed like this:
How to prepare a hot sandwich:

1. Turn on the sandwich press
2. Take two slices of sliced bread
3. Set one aside
4. On top of the other, place a slice of ham
5. On top of the ham, place a slice of cheese
6. Cover with the slice of bread you set aside
7. Place on the sandwich press plate and close it
8. Wait for about 2 minutes
9. Carefully remove from the sandwich press
10. Serve hot

Like most HyperCode Tags, ol, ul, and li optionally accept the properties class, style, and id for additional customization of display and behavior. See Class, Style, id