Lists and Nested Lists

Lists can be very useful in our lives, be it for instructions or shopping lists. HTML5 allows you to easily create lists in any text editor, I use notepad as it is pre-installed on all Windows machines, and quickly customise them using simply attributes.

There are two varieties of lists in HTML5, order lists and unordered lists. Ordered lists contain numbers or letters and are generally used for instructions or step-by-step guides. Unordered lists contain simple bullet points to show multiple details of a topic, such as a shopping list or locations for fishing.

They each have there own tags to signify the type you want to use. <ol> </ol> represents Ordered Lists and <ul> </ul> represents and Unordered List.

However, if you were to enter this into your text editor;

<ul>
Fish
Eggs
Milk
</ul>
It will not work, you have to signify each line with the <li> </li> tags.

<ul>
<li>Fish</li>
<li>Eggs</li>
<li>Milk</li>
</ul>

This time you should be able to see the unordered list in your web browser like so;

For an ordered list you simply change the <ul> tags to <ol> tags and then the bullet points will be replaced by numbers, however these are only defaults and can be customised later.

Nested Lists are exactly what they sound like, they are a list within a list. A good example of where this comes in handy is if you are listing places you will visit and their order, you could add an unordered list to show options for things to do at that location.

This is very simply to implement, in my coding I use indents to create a clearer structure for viewing (and debugging!) but there is no specific rule for indentation.#

Firstly, create an ordered list, using the <ol> and <li> tags and then where you want to have the nested list create another tag like this, <ul><li> below that item, this will start the ordered list from that item. This sounds fairly complex, but below is the HTML5 coding for a shopping list with a particular order that the fish must be acquired.

<ul>

       <li>Fish</li>

      <ol>
             <li>Salmon</li>
             <li>Cod</li>
      </ol>

 <li>Eggs</li>
 <li>Milk</li>

</ul>


It is a fairly simply tag nest to implement and still present quite a nice visual nested list on screen as can be seen with the image below, again featuring both the notepad HTML5 code and the visual output in Internet Explorer;

 

Next to look at is creating entities, especially useful for copyright or using ampersands(&) in text.