Lists

 

Lists are a great way of laying out information in web pages, as they are simple to read and look good. There are two types of lists: unordered and ordered.

 

 

Unordered (un-numbered) List


The <ul> tag creates an unordered list and does three things; it creates a bullet list, atutomatically indentes the items and creates line break for each line. Each itme should be identified by a <li> tag.

 

HTML Example:

<ul>
<li>List item A</li>
<li>List item B</li>
<li>List item C</li>
</ul>

 

Result:

  • List item A
  • List item B
  • List item C

 

 

Ordered (numbered) List


The <ol> tag creates an ordered list and does three things: creates a numbered list, atutomatically indentes the items and creates line break for each line.

NOTE: The only difference between an ordered list and an unordered list is that the ordered list items are numbered in the order of appearance (e.g. 1, 2, 3…) while unordered list items are not numbered and have bullets instead.

 

 

HTML Example:

 

<ol>
<li>List item A</li>
   <li>List item B</li>
   <li>List item C</li>
</ol>

 

 

Result:

 

  1. List item A
  2. List item B
  3. List item C

 

 

Lists Attributes

 

You can use type=” ” attribute to change the ordering character.

 

Example:

 

<ol type=”a”>

 

Result:

 

  1. List item A
  2. List item B
  3. List item C

 

 

 

Example:

 

<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

 

Result:

 

  1. List item 1
  2. List item 2
  3. List item 3

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>