HTML Lists

 Unordered and ordered lists are the most common type of HTML list you find. One of the most popular uses of HTML unordered lists is for presenting your site navigation. However, there are basically three types of HTML lists you can use with your websites. They include:

Unordered List

Unordered lists can be used to present list items in no particular order and are marked with bullets (small black circles by default). An unordered list begins with the <ul> tag and each list item begins with the <li> tag.

Code

<ul>
<li>Redundant graphics</li>
<li>Save Navigation</li>
<li>Remove Themes</li>
<li>DL Web Package</li>
<li>Preserve Regions</li>
<li>Insert DocType</li>
<li>Remove bots</li>
</ul>

Browser Display

• Redundant graphics
• Save Navigation
• Remove Themes
• DL Web Package
• Preserve Regions
• Insert DocType
• Remove bots

Ordered List

Ordered lists can be used when the listed item content is supposed to be in a special order so as to add meaning to the list. List items are marked with numbers by default. An ordered list begins with the <ol> tag and each list item begins starts with the <li> tag.

Ordered lists would be useful for giving instructions that need to be followed in a certain order or a recipe where ingredients are added in a specific order.

Code

<ol>
<li>Right-click on a ZIP file and select the 'Extract All' menu option. </li>
<li>Browse to the Desktop or Folder where you want the files extracted to. The default is to show the extracted files when complete. Untick this if you do NOT want to view the file at this time. </li>
<li>Click 'Extract.' </li>
<li>Your files are now extracted to the directory you have specified and you can begin to use them. </li>
</ol>

Browser Display

1. Right-click on a ZIP file and select the 'Extract All' menu option.
2. Browse to the Desktop or Folder where you want the files extracted to. The default is to show the extracted files when complete. Untick this if you do NOT want to view the file at this time.
3. Click 'Extract.'
4. Your files are now extracted to the directory you have specified and you can begin to use them.

Definition List

Definition lists is a list of items, with a description of each item. The <dl> tag defines the beginning of a definition list and acts as the container for the list. The  <dt> tag is used for the definition term and and <dd> defines the definition description. The default styling of definition list indents any descriptions.

Code:

<dl>
<dt>Coffee</dt>
<dd>Coffee is a brewed beverage with a distinct aroma and flavor prepared
from the roasted seeds of the Coffea plant.</dd>
<dt>Tea</dt>
<dd>Tea is an aromatic beverage commonly prepared by pouring hot or
boiling water over cured leaves of the tea plant.</dd>
<dt>Hot chocolate</dt>
<dd>Hot chocolate (also known as hot cocoa) is a heated beverage
typically consisting of shaved chocolate, melted chocolate or cocoa powder,
heated milk or water, and sugar.</dd>
</dl>

Browser Display

Coffee

Coffee is a brewed beverage with a distinct aroma and flavor prepared from the roasted seeds of the Coffea plant.

Tea

Tea is an aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the tea plant.

Hot chocolate

Hot chocolate (also known as hot cocoa) is a heated beverage typically consisting of shaved chocolate, melted chocolate or cocoa powder, heated milk or water, and sugar.

Nested Lists

Nested lists are lists within a list. Different list types may be used together.

 Your major concern in working with nested lists will be to verify that each list is properly ended and the nesting order is correct.

Code

<ul>
<li>Import Web Package</li>
<li>Use Cleanup Toolbar
<ul>
<li>Compatibility</li>
<li>Clean Tables</li>
<li>Accessible Tables</li>
<li>Apply XHTML</li>
</ul>
</li>
<li>Replace Bots</li>
<li>Compatibility Reports</li>
<li>Accessibility Reports</li>
<li>CSS Reports</li>
<li>Add Semantic Markup<ul>
<li>Heading Tags</li>
</ul>
</li>
<li>Add Meta Tags</li>
<li>Preview in browser</li>
<li>Validation</li>
<li>Run Queries</li>
</ul>

Browser Display

• Import Web Package
• Use Cleanup Toolbar
  • Compatibility
  • Clean Tables
  • Accessible Tables
  • Apply XHTML
• Replace Bots
• Compatibility Reports
• Accessibility Reports
• CSS Reports
• Add Semantic Markup
  • Heading Tags
• Add Meta Tags
• Preview in browser
• Validation
• Run Queries

Creating lists in Expression Web

NOTE: If you are using Expression Web as your web editor, and your list items are not properly nested. EW will notify you by highlighting and red squiggly lines under the incorrect elements. Hovering over the element will give you a tip about what is wrong. View Screenshot

Bulleted or Numbered Lists

1. To create a bulleted or numbered list in Expression Web, open your page in Design view or Code view and place your cursor where you want to create a list, and then do one of the following:
   • To create a regular bulleted list, either, on the Common or Formatting toolbar, click Bullets , or on the Formatting toolbar, click the Style box, and select Unordered List <ul>.
   • To create a regular numbered list, either, on the Common or Formatting toolbar, click Numbering , or on the Formatting toolbar, click the Style box, and select Ordered List <ol>.
   • To create a list that uses a picture to mark each list item, on the Format menu, click Bullets and Numbering. In the List Properties dialog box, click the Picture Bullets tab. Under Picture, either select Use current CSS Style to use the image specified by a CSS Style or select Specify picture to choose a picture. If you selected Specify picture, click Browse and select a picture and click Open, and then click OK.
   • To create a custom bulleted list, on the Format menu, click Bullets and Numbering. In the List Properties dialog box, click the Plain Bullets tab, click a bullet style, and click OK.
   • To create a custom numbered list, on the Format menu, click Bullets and Numbering. In the List Properties dialog box, click the Numbers tab, and click a number style. To set the starting number, under Start at:, type a number, and click OK.
2. For each item or line of text that you want in the list, type the text, and then press ENTER to add a bullet or number to the list.
3. When you have typed the last item, press ENTER twice to end the list.
4. To increase or decrease the indent of one or more listed items, put your cursor in the listed item or select one or more listed items, and then on the Common or Formatting toolbar, click either Increase Indent or Decrease Indent .
   

Definition Lists

1. To create a definition list in Expression Web, open your page in Design view or Code view, in your web page, place your cursor where you want to create a list of definitions, and then do one of the following.
   • On either the Common or Formatting toolbar, click the Style box, and then click Defined Term.
   • On the Format menu, click Bullets and Numbering. In the Bullets and Numbering dialog box, click the Other tab. Under List Style, click Definition List, and then click OK.
2. Type the first term in the list, and then press ENTER. The next line is automatically formatted with the Definition style.
3. Type the term definition.
4. Press ENTER to continue to the next term. The next line is automatically formatted with the Defined Term style.
5. Repeat steps 4 through 6 for each term and definition.
6. To end the list, press ENTER twice.

Styling Lists

You can change the default styling of ANY HTML list by using CSS.

List Style Type Property

The list-style-type property sets the type of bullet or numbering to a list.

list-style-type: { circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit } ;

Example:

ul li {list-style-type: square;}

ol li {list-style-type: upper-roman;}

List Style Position Property

The list-style position property specifies where to place the list-item marker.

list-style-position: { inside | outside | inherit } ;

Example:

ul {list-style-position:inside;}

Using an Image as a List Item

The list-style-image property replaces the list-item marker with an image.

Example:

#content li { list-style-image: url('images/pink-bullet-bg.gif'); }

list-style Property

The list-style property is shorthand which sets all the list properties in one declaration. Note that an omitted property value will be set to that property’s initial value.

Example:

ul { list-style:square inside ; }
ol { list-style:upper-roman inside ; }

Lists as Navigation

One of the most common uses for the unordered list is the navigation bar, whether vertical or horizontal. CSS Navigation Bar

If you Google horizontal or vertical navigation, you will find many resources for turning your unordered list into simple or more complicated site navigation. 

Resources

These are just a few of the resource links available for working with lists.

• Unordered, Ordered, & Definition Lists from A Beginner's Guide to HTML & CSS
• HTML Lists by W3schools
• html lists by tizage.com
• Styling HTML Lists with CSS: Techniques and Resources
• Lists by HTML Dog
• Listamatic by cssmaxdesign
• CSS Design: Taming Lists
• Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists.
• Understanding Lists - a slideshow
• Classification Properties for Lists by Web Design Group
• 8 different ways to beautifully style your lists
• 5 Simple and Practical CSS List Styles You Can Copy and Paste

Written December 2012
Copyright © Pat Geary of Expression Web Tutorials and Templates