Brought to you by molecularsciences.org.
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
This publication may not be redistributed without this notice.

Lists

Lists

HTML provides three different kind of lists. Bear in mind that there is no <list> tag.

Ordered Lists:

 

Sports Car:

<ol>

 <li> Porsche

 <li> Lambourgini

 <li> BMW

</ol> 		Sports Car:

  1. Porsche
  2. Lambourgini
  3. BMW

Ordered lists start with <ol> and end with </ol>. <li> marks each listing. By default, lists created with <ol> use arabic numerals starting with 1. That can be changed.

<ol type = A> Number list A, B, C, D

<ol type = a>  Number list a, b, c, d

<ol type = I> Number list I, II, III, IV

<ol type = i> Number list i, ii, iii, iv

<ol type = 10> Number list 10, 11, 12, 13

If you want to pick something out of hte blue, you can use the value attribute:

 

<ol start = 101>

 <li> html

 <li> javascript

 <li value=14> cgi

 <li> java

</ol>
  1. html 
  2. javascript 
  3. cgi 
  4. java 

Note that the value attribute placed a 14 in a pattern of 101, 102,.... Also take a look at the item after 14. What do you think happened?

Unordered Lists:

 

Cats:

<ul>

   <li> Lions

   <li> Tigers

   <li> Pumas

   <li> Leopards

</ul> 		Cats: 

  • Lions 
  • Tigers 
  • Pumas 
  • Leopards 

The only difference between ordered and unordered lists is that the unordered lists use bullets instead of alphanumeric characters. You do, however, have a few choices regarding the shape of the bullets.

 

<ul>

   <li type = disk> disk

   <li type = space> space

   <li type = circle> circle

</ul>

Note: newer browsers do not support some of these functionalities.
  • disk 
  • space 
  • circle 

Definition Lists:

Definition lists are useful for tasks like defining terms.

 

<h3> Glossary </h3>

<dl>

<dt> Alphanumeric:

<dd> Alpha is short for alphabet and numeric refers to numerals. So, alphanumeric characters simply mean letters and numbers.

<dt> Binary:

<dd> Binary is a base-2 numbering system. It means that it uses only two characters (0 and 1) to represent numbers.

<dt> Hexadecimal:

<dd> Hexadecimal is a base-16 numbering system. The characters are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

</dl>

Glossary 

Alphanumeric: 
Alpha is short for alphabet and numeric refers to numerals. So, alphanumeric characters simply mean letters and numbers. 
Binary: 
Binary is a base-2 numbering system. It means that it uses only two characters (0 and 1) to represent numbers. 
Hexadecimal: 
Hexadecimal is a base-16 numbering system. The characters are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 

Definitive lists (another name for definition lists) start with <dl> and end with </dl>. <dt> is the heading and <dd> is the detail.

Can you mix the three lists? Yes. You can also list tables and images but I haven't seen any website do this skillfully. If you manage to create a great effect by listing images/tables, please do email me the URL.