HTML for Lists – Part 5

We’re almost done folks!  Only two posts left in the HTML series.  This week, I’m going to focus on writing the HTML for lists because bullets and numbers are where the Spotfire GUI fails early and often.  In case you are new to the series, go back and check out the earlier posts covering these four topics:

  1. Intro to HTML — Basics of Tags
  2. Tag Attributes
  3. Using CSS
  4. Containers and Style Attributes

Before learning to write HTML, I had more trouble with lists than any other function in the Text Area, and I’m talking about “throw your computer out the window” kind of rage.  Fortunately, bullets and lists are one of the easiest things to write in HTML.  Master three tags — <ol>, <ul>, and <li> — and you are ready to rock and roll.

HTML for Lists

Lists are created with <ol> and <ul> tags.  Use <ol> for ordered lists (numbers) and <ul> for unordered lists (bullets) . Each line in the list will also use the <li> tag.

Of course, there are a few rules to abide by.

  1. Start the list with <ol> or <ul>.
  2. Use the <li> tag for each line in the list.
  3. Always close the <li> tag.  You’ll notice weird spacing if you don’t close each <li> tag.
  4. Add another <ol> or <ul> to indent a level.
  5. Close the <ol> or <ul> to go back up a level.
  6. Make sure to close the final <ol> or <ul> when the list is complete.

Here are two examples demonstrating the rules above.  The first example is fairly simple and just demonstrates the use of the <ol> and <li> tags.

HTML for Lists

In the second example, I have highlighted the <ul> tags used to move up and down levels in the list.

HTML for Lists

Now, you might be asking whether putting each tag on a new line is required, and the answer is no.  I do this to make tracing my start and end tags easier.  Add the tags in whatever manner is easiest for you to follow and understand.  These few simple rules are all you need to work around the GUI and correct the text area when it goes awry.

Attributes for <ol> and <ul>

Now, because I know you are going to Google it, I want to mention that the <ol> and <ul> tags do have HTML attributes.  You can read about them here  for <ol> and here for <ul>.  An example is provided below.  Just remember to use the attribute in the <ol> or <ul> tag, not the <li> tag, or it won’t work.  I definitely made that mistake.

HTML for Lists

 

 

In closing, I want to note that when I first started using HTML for lists, I printed out the syntax and kept it on my desk.  A week later, I threw that paper in the trash.  You’ll pick this up and have it memorized in no time.

Guest Spotfire blogger residing in Whitefish, MT.  Working for SM Energy’s Advanced Analytics and Emerging Technology team!

One thought on “HTML for Lists – Part 5

Leave a Comment

Your email address will not be published. Required fields are marked *