The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

HTML Code - HTML Lists And Menus

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Lists Of Information ...

One advantage of HTML having originated as a text formatting language is that it has a variety of methods to display lists of information on a web page. The number of lists has been reduced in recent years and some of the earlier HTML lists are now depreciated but we are still left with a rich variety of ways to displat lists of information. The really significant changes apply to formatting lists and the formatting function is now the province of CSS (Cascading Style Sheets) rather than the now depreciated HTML Tag Attributes which we discuss further down the page. This page explains and demonstrates the modern usage of HTML Lists.

Different List Types...

There are effectively three different types of HTML lists that can be used safely on modern web pages and these are the Unordered List, the Ordered List and the Definition List. If used correctly, they should work correctly in all modern web browsers and other User Agents. They will all validate to the W3C '4.01 Strict' standard and pass WCAG Web Accessibility testing guidelines. HTML lists can be nested which means for example that you can use an Ordered List inside an Unordered List.

unordered list

basic Unordered List ...

<ul>
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ol>

Unordered List default rendering ...

ordered list

basic Ordered List ...

<ol>
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ol>

Ordered List default rendering ...

  1. This is List Item one ...
  2. This is List Item two ...
  3. This is List Item three ...

definition list

Definition Lists are slightly different from the other list types in that list items consist of two parts, the term and a corresponding description. In my opinion, Definition Lists are under used and because of this I have taken extra time to describe them in a way that I hope, enables users to grasp the principles of Definition Lists more easily. I have also used indenting to make the Markup easier to read and understand.

basic Definition List ...

<dl>
  <dt>DL (Definition List) Tag</dt>
    <dd>This is the outer container for the Definition List ...</dd>
  <dt>DT (Definition Term) Tag</dt>
    <dd>This is the container for the term to be defined ...</dd>
  <dt>DD (Definition Description) Tag</dt>
    <dd>This is the container for the description of the term being defined ...</dd>
    <dd>(you can have multiple descriptions for each Definition Term)</dd>
</dl>

Definition List default rendering ...

DL (Definition List) Tag
This is the outer container for the Definition List ...
DT (Definition Term) Tag
This is the container for the term to be defined ...
DD (Definition Description) Tag
This is the container for the description of the term being defined ...
(you can have multiple descriptions for each Definition Term)
 

Applying CSS Formatting ...

We have a explained the different types of HTML lists that you can use in modern web authoring to provide structure and we can now move on to the different ways you can add formatting to these lists using CSS. In all our examples we have used Inline styles but in reality you are better using a Style Tag in the HEAD of your page or better still, an external Style Sheet to store all your style information. Although you can apply CSS formatting to any HTML element W3C strongly recommends that you restrict the use of the following 'list-style' styles to the Ordered List 'OL' Tag or the Unordered List 'UL' Tag.

list-style-type

used in an Unordered List ...

<ul style="list-style-type:disc|circle|square|none">
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ul>

rendered in an Unordered List using 'list-style-type:square' ...

used in an Ordered List ...

<ol style="list-style-type:"decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none>
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ol>

rendered in an Ordered List using 'list-style-type:lower-alpha' ...

  1. This is List Item one ...
  2. This is List Item two ...
  3. This is List Item three ...

list-style-image

A new feature introduced by CSS is this very cool style that allows you to specify your own image instead of using a standard bullet or number to mark each List Item. Images must be in GIF, JPG or PNG format in accordance with normal web image ruquirements and the image dimensions should be proportinate to the list you are displaying. In our example we have used a pointing hand image which we use throughout the Web-Wise-Wizard site to draw attention to links that point to related pages. Our hand image is in GIF format and has a filesize if 178 bytes. The image is 35 pixels wide and 18 pixels high, and has been created with a transparent background. Because of the size of the image you will see that the images in our example appear crowded and you should really use a style to improve the appearance by increasing the line height to perhaps 200%.

used in an Unordered List ...

<ul style="list-style-image:url(../images/hand-blue.gif)|none">
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ul>

rendered in an Unordered List using 'list-style-image:url(../images/hand-blue.gif)' ...

list-style-position

used in an Ordered List ...

<ol style="list-style-position:inside|outside">
<li>This is List Item one which we have deliberately created as a much longer line.</li>
<li>This is List Item two which we have deliberately created as a much longer line.</li>
<li>This is List Item three which we have deliberately created as a much longer line.</li>
</ol>

rendered in an Ordered List using 'list-style-position:inside' ...

  1. This is List Item one which we have deliberately created as a much longer line.
  2. This is List Item two which we have deliberately created as a much longer line.
  3. This is List Item three which we have deliberately created as a much longer line.

list-style

The 'list-style' property is the CSS shorthand way for setting any of the three properties 'list-style-type', 'list-style-image' and 'list-style-position', all at the same time. The problem with using this property is that it can get very confusing if you are new to CSS and HTML lists and the responsibility lies squarely with the page developer to make sure that theu use values that are appropriate for the list. If you are new to CSS or HTML lists then my recommendation is that for the sake of clarity, you stick to the using the three 'list-style' properties described above until you become familiar with their usage.

used in an Unordered List ...

<ul style="list-style:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none|inside|outside|<url>">
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ul>
 

Depreciated Attributes ...

Remembering that formatting HTML Markup is now a function of CSS, we list the HTML Attributes that were previously used to format HTML lists. These Attributes are now depreciated and should not be used. All the formatting functions previously accomplished using these Attributes (plus many more) should now be accomplished using CSS.

type compact

for Unordered Lists the Attributes TYPE and COMPACT are now depreciated ...

<ul type="disc|circle|square" compact>
<li></li>
<li></li>
<li></li>
</ul>

type start compact

for Ordered Lists the Attributes TYPE, START and COMPACT are now depreciated ...

<ol type="1|A|a|I|i" start="1" compact>
<li></li>
<li></li>
<li></li>
</ol>

value attribute

the Attribute VALUE, used in List Items is now depreciated ...

<ol>
<li></li>
<li value="5"></li>
<li></li>
</ol>
 
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - HTML Lists/Menus/Listings Learn how to create HTML lists as ordered lists with a choice of number types, numbers, numerals and alphanumeric characters or as unordered lists using a choice of bullet, circle, disc and square.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
HTML Lists/Menus Links
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England