Friday, December 7, 2007

Ordered & Unordered Lists - Basics - HTML Text Formating Part 6

The good things all come to an end, & the talk about HTML markup in bbPress powered forums is coming to its end with this post then the second part of it presenting how to create lists ...

As I said before & I'm repeating (because I know some of you would read some posts & not the others), HTML tags don't serve only in bbPress forums but are used by web devolopers / masters / designers all over the Internet unlike bbCode used only in some forums & whose tags are inspired from HTML.

Will finish with the tags used to create lists & they are three:

ul - for simple unordered lists

ol - for ordered numeral lists

li - short for "list item" which means that this tag wraps & designates the items in the lists (ordered or unordered).

These tags have similar use we already saw of [list] & [*] tags in bbCode.

As usual it's all about "wrapping", each of the three tags has an opening & an ending part: opening: <tag> - ending: </tag>, notice how the ending part has an extra character "/".

You'll have to wrap each element in your "future list" with <li> ...
</li>, then according to what type of list you want to use (ordered or not), you wrap all the items with <ol> ... </ol> or <ul> ... </ul>


First an unordered list:

<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>

or even in one line:

<ul><li>Item One</li><li>Item One</li><li>Item One</li></ul>

Will be this in the final message:
  • Item One
  • Item Two
  • Item Three

Now an ordered list using the <ol> tag:

<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>

The result is:
  1. Item One
  2. Item Two
  3. Item Three

Rest some advanced tricks to create sub-lists, we'll see that next :)