E-Mail - HTML Codes

E-Mail » HTML Tags »

Define an unordered list using <li> ... </li> tags.

Usage:

<ul> <li> ... </li> ... etcetera ... </ul>

OR

<ul type="none|circle|disc|square"> <li> ... </li> ... etcetera ... </ul>

Best Practice Example:
<ul> New Cereals This Month: <li>Sugar-Glazed Handballs</li> <li>Shredded Packing Material</li> <li>Fear Smacks</li> <li>Lobsta Fahts</li> </ul>

New Cereals This Month:

Sugar-Glazed Handballs

Shredded Packing Material

Fear Smacks

Lobsta Fahts

Using type

<ul type="circle">

New Cereals This Month:
<li>Sugar-Glazed Handballs</li>
<li>Shredded Packing Material</li>
<li>Fear Smacks</li>
<li>Lobsta Fahts</li>
</ul>

New Cereals This Month:

Sugar-Glazed Handballs

Shredded Packing Material

Fear Smacks

Lobsta Fahts

Or go crazy! Each bullet point can be customized by using the type= attribute within the <li> tag.

<ul>

New Cereals This Month:
<li>Sugar-Glazed Handballs</li>
<li type="circle">Shredded Packing Material</li>
<li type="square">Fear Smacks</li>
<li type="disc">Lobsta Fahts</li>
</ul>

New Cereals This Month:

Sugar-Glazed Handballs

Shredded Packing Material

Fear Smacks

Lobsta Fahts

Unordered lists were made to be easily nested within one another. The default nested bullet types are (in order): disc, circle, square. This sequence repeats under additional levels of nesting, but any level of nesting's bullet point type can be overridden by using the type= attribute in the <ul> definition tag.


<b>Rudest Drivers:</b>

<ul>

<font face="Times,serif" size="2" style="font: 1.0em Times,serif;">

<li><font face="Times,serif" size="2">Volkswagen</font>

<ul>

<li><font face="Times,serif" size="2">Jetta</font>

<li><font face="Times,serif" size="2">Golf</font>

<li><font face="Times,serif" size="2">Passat</font>

</ul></li>

<li><font face="Times,serif" size="2">BMW</font>

<ul>

<li><font face="Times,serif" size="2">320i</font>

<li><font face="Times,serif" size="2">520i</font>

<li><font face="Times,serif" size="2">Z4 M</font>

</ul></li>

<li><font face="Times,serif" size="2">Jaguar</font>

<ul>

<li><font face="Times,serif" size="2">XK</font>

<li><font face="Times,serif" size="2">XJ</font>

<li><font face="Times,serif" size="2">R5</font>

</ul></li></ul>

Rudest Drivers:

Volkswagen

Jetta
Golf
Passat

BMW

320i
520i
Z4 M

Jaguar

<ul style="font: 18pt Arial, sans-serif; color: #000000;">
<li style="color: #990000;">Red</li>
<li type="circle" style="color: #009900;">Green</li>
<li type="square" style="color: #000099;">Blue</li>
<li type="disc" style="color: #999900;">Yellow</li>
<li type="circle" style="color: #990099;">Magenta</li>
<li type="square" style="color: #009999;">Cyan</li>
<li type="disc" style="color: #999999;">Black (Grey)</li>
</ul>

Red
Green
Blue
Yellow
Magenta
Cyan
Black (Grey)

An interesting thing to note in this example is that if you define the point size in the <ul> tag as being a larger size than the text actually displayed by the list, you will get an effect similar to what the line-height CSS property accomplishes, as the bullet points do not change size.

NOTES:
This type of formatted list will work in all known e-mail clients, as long as the same bullet point is used throughout the unordered list.

Evolution craps itself if it encounters a new bullet type within an unordered list and reverts to ordered list numbering. Evolution also does not understand the start="" tag attribute and will always start a list at item 1.

The list-style-type style property (which can be used in the <ul> tag) does not work in all mail clients. Ordinarily you would define this like: <ul style="list-style-type: none;">, which would render any elements in that list without any bullet points. This was once used as an indented paragraph trick by HTML designers, even though it was faulty because implied list margin indentation space varies from browser to browser.

Many people think that the closing tag </li> is optional. If you were writing straight HTML, it might be. If you were writing cross-browser XHTML (which you should be if you are writing e-mails), it is REQUIRED.

E-Mail » HTML Tags »

This reference was created for Innovyx by Steve Cartoon Q3 2007. All rights reversed.