function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
corner Unordered, Ordered and Definition Lists: Tags <ul>, <li>, <dt>, <dl> corner
space design
Tutorials
10 Frames
11 Uploading
13 Scripts
16 Forms
Information
Software
Index
Adobe
Free
Recomended
Student Licence
Webmaster
Tools
Templates

Design

 

 

corner Tutorial 8. Lists corner
HTML Tutorial

 

 Web Design

Page Contents- Unordered, Ordered and Definition Lists

Element Description / Comments End Tag Attributes
<ul> The UL element is the container for the entire Unordered List. Req. compact, type
<ol> The OL element is the container for the entire Ordered List Req. compact, type, start
<li> The LI element is used for each line of the list Opt. type, value
<dt> The UL element is the container for the entire Definition List Opt. NONE
<dl> The DL inline element is used to create a definition term, before each <dd> tag Opt. compact
<dd> The DD block element is used for each definition. Opt. NONE

John's Recommendation: Always use closing tags with optional tags.

 

Unordered List: Tag <ul>

Sample Code

The default Unordered List produces a list where each line starts with a large round blob.

See Changing default below

  • one
  • two
  • three
  • etc.
 
<ul>
      <li>one</li>
      <li> two </li>
      <li>three</li>
      <li>etc.</li>
</ul>

You can nest lists, this indents the nested list. You just need a few more <ul> and </uls>

Sample Code

The default changes with the nested portion of the list as follows.

  • one
    • two
      • three
  • etc.
 
<ul>
      <li>one</li>
             <ul>
                    <li> two </li>
                          <ul>
                               <li>three</li>
                          <ul>
                <ul>
        <li>etc.</li>
</ul>

 

 space

 

 

space

Up to 80% off for Students from Adobe.  Plus FREE Shipping Offer

 

Buy Domains from 1&1 and Save Money!

 

Search this site for a word or phrase. Place phrases inside "double quotes"

 

You can change the blob to other shapes with additional HTML code, or change it to a graphic image with CSS

 

Ordered List: Tag <ol>

Sample Code

The default Ordered List is Numbered 1., 2., 3, etc.

  1. one
  2. two
  3. three
  4. etc.
 
<ol>
     <li>one</li>
     <li> two </li>
     <li>three</li>
      <li>etc.</li>
</ol>

You can change the type of ordering such as alphabetical, roman numarals etc with additioal HTML code

 

 space
space .

 

Changing the Default

The default for Unordered and Ordered lists can be changed by the deprecated type attribute or by style sheets.

Type can be applied to the UL, OL or LI tags.

UL (Unordered List) example

<ul type="a">

HTML

type

CSS

list-style-type

 Result in a list...
Example
<ul type="circle">		 Example
LI {list-style-type:circle}		  
circle   The open circle o
disc   Default- the blob, or solid circle
square   The square

OL (Ordered List) examples

HTML
list-style-type,upper-alpha,lower-alpha,upper-roman,lower-roman,decimal

HTML CSS  
Example
<ol type="a">		 Example
LI {list-style-type:lower-alpha}		  
A upper-alpha A, B, C, ...
a lower-alpha a, b, c, ...
I upper-roman I, II, III, ...
i lower-roman i, ii, iii, ...
1 decimal 1, 2, 3, ...

 

Example of the use of both HTML and in line styles. Although more time consuming it will be better to use CSS styles rather than the HTML type deprecated attribute.

Sample Code
  1. one
  2. two
  3. three
  4. four
 <ol>
<li style="{list-style-type:lower-alpha}">one</li>
<li>two</li>
<li style="{list-style-type:upper-roman}">three</li>
<li>four</li>
</ol>

Definition List: Tag <dl>

Definition Lists are also called Glossary Lists.

 

Sample Code

The default Definition List

Term 1
Definition 1
Term 2
Definition 2
 
<dl>
      <dt>Term 1</dt>
      <dd>Definition 1</dd>
       <dt>Term 2</dt>
      <dd>Definition 2</dd>
  <d/l>

 

 

corner
Previous Top of Page Next page
Design

 

 corner
space

 



 In Association with Amazon.co.uk
In Association with Amazon.co.uk

In Association with Amazon.co.uk

 

 

Leisure Time - book your holiday or flights with our UK sponsors

Monarch Holidays
Book a Monarch Holiday
Book a Thomson holiday
Book a Portland Holidays Direct
flythomascook.com
Fly Thomas Cook flights
Direct Holidays		 Jet2
Jet2 Cheap flights

More Tutorials

M206
Home page of a tutorial in programming in Smalltalk, a object-oriented programming language. This is an ideal tutorial for anybody learning Smalltalk and of particular interest to students on courses: M206 at the OU Open University, and course CSC517 at NCSU North Carolina State University

C programming tutorial
Home page of a tutorial in programming in C This is an ideal tutorial for anybody learning C programming language, and of particular interest to students on courses: T223 at the OU Open University.

tutorials4u.com
Home page of tutorials4u.com

Leeds my home town

 

Top

AireWeb Web Design
Leeds Web design

Copyright © John McGuinn 2001-03

.