Unordered, Ordered and Definition Lists: Tags <ul>, <li>, <dt>, <dl>

tutorials4u.com

Home HTML Tutorial

Tutorials

T171 News. Tips

1 Required Programs

2. First Web Page

3 Page Appearance

4 Colour RGB System

4a Colour Names

5 Tables

6 Graphics

7 Linking.

8 Lists

9 Meta tags

10 Frames

11 Uploading

12 CSS

13 Scripts

14 Site Promotion

15 Site Design

16 Forms

99 Web Glossary

Information

Recommended Books

Editors and Authoring

Hosting

Link to us

Search engines

Useful Links

Software

Webmaster

Tools

Templates

Tutorial 8. Lists

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.

three

etc.

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

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.

one
two
three
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

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

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
one two three 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>

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

			Last minute	Save 10%
Book a Thomas Cook holiday	Book a Thomson holiday	Book a Portland Holidays Direct	Last minute	Save 10%

Thomas Cook flights	Thomson holiday flights	Flybe Cheap flights	British Airways flights	My Travel flights