---

Greased 1.15.1 - HTML Lists Appendix

November 6th, 2015

In issue #15, we discuss how to tailor lists to your individual needs within the HTML Tips & Tricks segment. As I began running through the examples and the various combinations, I quickly realized that there was much more to tell than could be reasonably crammed in the small box alotted. I don't want the information to be vague, go to waste, or worse yet cause headaches when reviewing, so I decided to append this document to the original newsletter in the hopes of fully explaining what is easily doable when it comes to fine-tuning your lists when writing for us at Nerd Bacon. I've tried to be as clear and as thorough as possible, but I (The Cubist) will be glad to help you out if you have any trouble!

---

First of all, let's go over what a list actually is. CSS/HTML provides for an easy and orderly way to make lists without having to manually worry about things like spacing, numbering, or bullet points. WordPress makes this even easier by providing buttons on the toolbar with which to quickly create lists. You've probably noticed - and used - them by now; one looks like a list with bullet points and the other replaces the bullets with numbers. Each of these represents a different sort of list. There are those that are numbered (ordered lists) and those that are not numbered (unordered lists) which mark the items with bullet points instead of numbers (or letters).

Before we get started, I want to reiterate what it means to use these "HTML tricks" in case you've forgotten or have never attempted such before. To implement the concepts we'll be talking about, you'll need to click on the Text tab in the upper right of your editing box when you're logged in to NB and ready to write or review. By default, the editor is on the "Visual" setting, which displays a rough approximation of what the final result will look like. By clicking on "Text," you can see the raw HTML and edit it (to an extent). Inside of the Text editor, unless otherwise noted, is where we'll be working.

When working within the Text editor, it's important to keep a few things in mind if you're unfamiliar with raw markup:

• It's very easy to screw up the entire document by deleting or adding a character erroneously. Fortunately it's also pretty easy to fix most of the time, but not if you don't know what you're doing. Before doing any editing in the Text editor, save your work first.
• After making any substantial changes in the Text editor, use the Preview button to make sure everything is functioning as expected. Work in small increments at first, and as you get more familiar, you can increase the number of changes made before using "Preview." Using "Preview" frequently is an easy way to trace exactly where things "went wrong."
• DO NOT mess around with anything outside of what is instructed!

This isn't meant to scare you off, I just want to make sure people who might otherwise be blown away by the raw HTML understand what's going on. Follow the instructions and you should be fine; I wouldn't be putting this information out there if I thought it was above the average member's head. Anyone can use these tips and tricks as long as they know how to follow instructions.

Lastly, be careful with the placement of arrowheads (< >), quotation marks (" "), semi-colons (;), and any other symbols. It only takes an extra arrowhead or a missing quotation mark to throw everything out of whack, so if things don't turn out how you planned after clicking Preview, don't give up and start from scratch just yet. Go through your changes character by character and make sure it looks exactly how it does in these instructions. This is the part where I'm tempted to launch into a cursory lesson on syntax, but since we'll be using both proper HTML and inline CSS (a separate language used within HTML), such a discussion could potentially be confusing. So instead of trying to remember whether you should use an equal sign or a colon, just copy what I've lain forth and you should be good to go. I'm including a quick reference on a separate page for those of you who know what's going on but may need to glance at the specifics now and again.

---

Alright, so let's get on with the good stuff. Making lists isn't hard, and as we've already established, WordPress makes it even easier. Fortunately, we can go ahead and use WordPress to construct these lists in the Visual editor and then afterwards go into the Text editor to make our small modifications. For now we're only going to be talking about ordered lists (remember, those that are numbered), but we'll get to unordered lists a little later. Let's take a look at a simple list, similar as to how it would appear if we created it in WordPress:

Now if we switch over to the Text editor, we'll see the raw HTML:

The ol stands for ordered list and li for list item. Like most HTML tags, each tag must be "opened" and "closed." The initial <ol> signifies the beginning of the list, while </ol> denotes the end - likewise with the <li> tag.

What we're going to be learning here are 2 main thing: how to change the number (or lettering) scheme of the list (for example "a, b, c" instead of "1, 2, 3") as well as the values of the numbers (or letters) themselves. As you can see, we don't actually type "1" before each item, that's part of what the ordered list does for us. But what if wanted the list to start at a different number? Of if we need the list in descending order?

---

First let's learn how to change the value of an item. There are actually 2 perfectly good ways to do this, and I'll go over the second method briefly, but for the sake of both simplicity and versatility, I recommend the following method (not to mention I personally find it a little more intuitive...or as intuitive as these things can be). In fact, I can't think of a single situation where you'd need the second way instead of the first; nonetheless we'll take a look at it shortly. Now on to the preferred method.

Let's say you wanted your list to start at "73" instead of "1." Within the first <li> tag, we can specify a value like this: <li value="73">. The remaining items will follow in sequential order, so you'll only need to use the value attribute once. Here's an example of the raw HTML followed by the end result:

You can also set the value for any number of items individually, for instance if you were listing an incomplete collection of cards or something similar. Whatever number is used for value is what will appear; for any list items without the value attribute, numbers will follow in sequence. Here's an example where we're going to keep "Peach" at "73," set "Blue" to "41," and "Cyan" to "212." Again, raw HTML first, followed by the end result

As you can see, "Peach" is numbered "73" since that's what we set the value to. "Viridian" and "Gold" are "74" and "75" respectively, because we did not set the value, therefore they follow "Peach" / "73" sequentially. "Blue" is at "41" and "Cyan" is at "212" because we explicitly defined those values, and "Indigo," following "Cyan" and having no explicit value of its own, is "213." Neat huh?

You may not be coming up with dozens of examples where this may be necessary, but it can be especially useful when listing something that is incomplete or a small subset of something larger. Going back to collectible cards, let's say you were making a list of the rarest ones along with their numbers (most collectible cards are numbered). Unless the rarest cards were in order, this wouldn't be possible (at least not ideally so) with a conventional ordered list, but by manually setting the values we can reap the uniformity of the list without being constricted by its default numbering. If cards 2, 7, 8, 9, 23, 25, 44, and 45 were the rarest (or singled out for some reason; maybe those are the ones you're missing, maybe they're the ones you have, etc.) we could easily list these with their correct numbers first, rather than doing something awkward like having the card number follow the default value (such as 1. 2. [Card Name], 2. 7. [Card Name], 3. 8. [Card Name], etc.). See for yourself the difference between an unordered list (bullets), standard ordered list, and an ordered list using the value attribute:

Unordered List	Ordered List (Standard)	Ordered List (with Values)
2. Card Name 7. Card Name 8. Card Name 9. Card Name 23. Card Name 25. Card Name 44. Card Name 45. Card Name	2. Card Name 7. Card Name 8. Card Name 9. Card Name 23. Card Name 25. Card Name 44. Card Name 45. Card Name	Card Name Card Name Card Name Card Name Card Name Card Name Card Name Card Name

Sure, we can use the bullet points (unordered list) to similar effect (or even set the list-style-type to none - more on that later) but doesn't it look much cleaner in the third example where we can control the value of each list item directly?

---

Similarly, you can create a descending list by using the reversed attribute within the ol tag. Observe!

Pretty easy, right? You could then combine this attribute with setting the value as well! In the example above, when using reversed the list starts at 6 (or whatever the maximum number of items is) and descends down to 1. By setting the value, we can control this descent however we want. Any items lacking a value following an item with a value will descend sequentially, as opposed to "normal" circumstances where the numbers ascend. We will again set the value of "Peach" to "73," but this time the list will descend to "68" instead of the earlier example where the items advanced to "78." Also like the default (ascending) lists, you can continue to change the value of any list item with subsequent items (without value) assuming sequentially descending values.

Not that you'd ever need it, but it is also possible to achieve negative numbers through the use of ol reversed and/or using negative numbers for li value. Here are a couple of examples, just for the hell of it! (Remember that as negative numbers descend the absolute value increases; i.e. -5, -6, -7, etc. When negative numbers ascend, they move closer to zero before eventually moving into the positive numbers, i.e. -2, -1, 0, 1, 2, etc.)

---

Now I'm going to briefly review the other way to control the values of list items. Remember, I said that the prior method was both more intuitive and offered more versatility, though I am going to throw this out there just in case you run across some situation where this and only this method will work. (And if that happens, please let me know...)

Instead of adding value to an li tag, we're going to be defining a "start value" for the initial ol tag. Going back to our first example where we marked "Peach" as "73," in this case we use <ol start="73"> which "starts" the first list item at "73" (or any other chosen value) and the following items increase sequentially. Of course we can accomplish the exact same thing by using <li value="73">. Using ol start doesn't really cause us any extra work, and we're still free to change any of the other values at will by again using li value, yet its function seems redundant. Either ol start or li value will get the job done, but li value can get even more done...so what's the use in knowing ol start at all...?

I'm not going to bother with examples, but if you want to play with it yourself, simply replace the standard <ol> with <ol start="χ"> where χ is whatever value you wish to assign to the first item. This can also be used in conjunction with reversed, as in <ol reversed start="25">.

---

Now we're going to learn how to change the actual numbering scheme of ordered lists. So far we've been using the default decimal value, but now we're going to use the CSS property list-style-type to change it. The syntax here is slightly more involved than what we were using (we've moving from plain HTML to inline CSS), I don't want to start a long-winded and possibly confusing lesson on HTML versus CSS. Just keep in mind that yes, this does look a little different than what we were doing before.

In addition to the standard 1, 2, 3, etc. numbering system, there are many others spanning the alphanumeric characters of several other languages. For our purposes though, we're only going to be covering a few of them: plain ol' numbers (or decimal; this is what we've been using and it is the default scheme when using ol), uppercase letters (A, B, C, ...), lowercase letters (a, b, c, ...), uppercase Roman numerals (I, II, III, ...), lowercase Roman numerals (i, ii, iii, ...), and to a lesser extent numbers with leading zeros (01, 02, 03, ...) and lowercase Greek letters (α, β, γ, ...).

Why would we use these? Well apart from purely stylistic decisions, they can be especially useful when creating lists within lists; think of an outline where there are headings, sub-headings, sub-sub-headings, and so on. This might not come up much in the course of reviewing games, but they can be helpful ways of organizing an index or table of contents, as well as for outlining the procedure for more involved DIY projects. You may also find them handy when discussing things like character relationships, a succession of games and their spin-offs, or any other information that may benefit from being presented in a tiered structure. Don't use it if you don't need it, but don't be scared to give it a go if you think it might work for organizing your information.

Now let's take a second to see it in action before going over the finer details of implementation. You can't switch number schemes mid-stream, but as mentioned, you can change the scheme of a list within a list. Here's a simple example with the higher level list using uppercase Roman numberals and the sub-level using lowercase letters:

I'll touch on "lists within lists" a little bit later for those that want complete control over their list-making experience, but generally speaking, it's best to leave this simple yet messy task to WordPress. Creating lists within lists in WP's Visual editor is much easier than coding them manually, mostly due to the potential for error. Once you've made your list via the Visual editor, go into the Text editor. You'll find a corresponding <ol> for each separate list; it might be wrapped up in the midst of other tags, just keep your eyes open, work slowly, and you should be fine. Once you find the appropriate ol tag, you can then modify it as needed. Here's how:

No matter what numbering scheme you're using, you'll need to add a few things to your ol. For the moment, let's use decimal as our numbering scheme. (Remember, this is the default scheme, I'm just writing it all out as an example.) The completed tag will look like: <ol style="list-style-type: decimal;">. Don't forget all the quotes, colon, semi-colon, etc. It is all necessary. From here you can replace decimal with the value that corresponds to the scheme you want to use. Here are the more common/useful ones we listed earlier:

• For uppercase letters, such as A, B, C, D, use upper-alpha
  • <ol style="list-style-type: upper-alpha;">
• For lowercase letters, such as a, b, c, d, use lower-alpha
  • <ol style="list-style-type: lower-alpha;">
• For uppercase Roman numerals, such as I, II, III, IV, use upper-roman
  • <ol style="list-style-type: upper-roman;">
• For lowercase Roman numerals, such as i, ii, iii, iv, use lower-roman
  • <ol style="list-style-type: lower-roman;">
• For lowercase Greek letters, such as α, β, γ, δ, use lower-greek
  • <ol style="list-style-type: lower-greek;">
• For numbers with leading zero, such as 01, 02, 03, 04, use decimal-leading-zero
  • <ol style="list-style-type: decimal-leading-zero;">
• For regular numbers, such as 1, 2, 3, 4, use decimal
  • <ol style="list-style-type: decimal;">

Why all the choices!? Which one(s) do I use!? That's a good question, and frankly, it doesn't really matter and it's largely a matter of personal preference. However, there are some loose conventions in place, particularly if you're composing anything resembling an outline or structured as such. One commonly accepted model is to use upper Roman for the top-level headings, upper alpha for the first sub-level, numbers for the next sub-level, lower alpha at the third sub-level, and then lower Roman at the fourth sub-level. In this way you could refer to a section using these delinations, such as "Section II.C.9.k.iv." Informal at worst and outdated at best, there isn't much to be said about yet another sub-level. Personally I like to stick the lower Greek down there, but I don't think the practice is documented anywhere officially. Most sources citing further sub-levels will often enter into a repetition of number, lower alpha, lower Roman. This would lead to insane reference points like "Section V.F.2.b.i.7.x.vi.9.b.ix." You can see where this becomes problematic, not only from being needlessly complex, but also because of the shared characters between lower alpha and lower Roman. Is "x" the 24th point (lower alpha) or the 10th (lower Roman)? Does "vi" represent 6 (lower Roman) or 581 (lower alpha)? (Ok, that one was silly.)

Currently most scholarly sources will recommend structuring a document of this sort exclusively with numbers. This turns that first example - Section II.C.9.k.iv - into something much less convoluted - Section 2.3.9.11.4. Still messy, but if you've got a document that complicated, it's better.

Ultimately these differing schemes are just a fun, aesthetic modification. If you want to use them, use 'em and don't worry about what's "right" or "wrong." If we take our example list and drop each item down a level, we get a fun "thing" that looks like this:

---

Here's another fun thing we can do, but since its practicality is dubious, I'm only going to touch on it. We can use the alternate schemes in conjunction with setting values! The value - expressed as a number just like we've been doing - will be "converted" into the appropriate value for whatever scheme is in use. For instance, if we designate our list as upper-alpha and set the value of our first li as "13," our list will start at "M," a.k.a. the 13th letter of the alphabet. What happens if one of the alphabet schemes is used and a value over 26 is chosen? The same thing that we see on a spread sheet: "27" becomes "AA," "30" is equivalent to "AD," "321" turns into "LI," and so forth. In fact, only numbers can be used for value. If you want the list to start at "K," you must input a value of "11," not "K." You can also use reversed, but note that any negative numbers will be expressed as -1, -2, etc. (Believe me, I tried to get something like "-D" or "-θ" just to be sure, but it doesn't work!)

---

Way back I said there were a few things to be done with unordered lists, and there are, and I'm going to go through them, but there's a catch. Due to the larger CSS rules at work on the actual Nerd Bacon site itself, they somehow override these particular features of unordered lists. One day, when I'm up to the task, or perhaps when someone more knowledgeable about HTML and CSS joins us, I hope to fix the issue. I understand the need for defaults, but something about the way our site's CSS is structured actively overrides even some forms of inline CSS (this has me really stumped). Regardless, there are a few things worth doing with the simple bullet points of an unordered list.

First I probably need to point out the differences between how ordered and unordered lists are coded. Don't worry, it's really easy: all you have to do is replace the <ol> tag with the <ul> tag. Adding items with <li> is exactly the same, as is forming lists within lists. The main differences lie in what you can't do with ul that are possible with ol, namely the value, start, and upper-roman / lower-alpha / etc. attributes.

We can do a few things unique to ul though, and WP will override them, but here they are nonetheless. All of these will be carried out using <ul style="list-style-type: χ;">, where χ is one of a few different variables. First, we can make the list appear with no bullets or symbols whatsoever, by using <ul style="list-style-type: none;"> and then listing the items as usual. Below are 3 examples, the first using the default bullets, the second with the raw HTML using the previously mentioned tag, and the third the end result when using said tag.

Default Unordered List	Raw HTML	"No Bullets" Unordered List
Peach Viridian Gold Blue Cyan Indigo	<ul style="list-style-type: none;"> <li>Peach</li> <li>Viridian</li> <li>Gold</li> <li>Blue</li> <li>Cyan</li> <li>Indigo</li> </ul>	Peach Viridian Gold Blue Cyan Indigo

The other thing we can do is change the types of bullets used. Most sites will employ a default type, as well as a certain type for each level (lists within lists). Similar to how we can control the numbering scheme either alone or to use different ones in lists within lists, we can do the same with bullets for unordered lists. Sometimes you may wish to use contrasting bullets between levels; other times you may want uniformity. There are 3 possible types:

• For square bullets, use square
  • <ul style="list-style-type: square;">
• For open circles, use circle
  • <ul style="list-style-type: circle;">
• For filled in circles, use disc
  • <ul style="list-style-type: disc;">

Here's what they look like in action:

Square	Circle	Disc
Peach Viridian Gold Blue Cyan Indigo	Peach Viridian Gold Blue Cyan Indigo	Peach Viridian Gold Blue Cyan Indigo

It's probably worth pointing out that you can do other fancy things with lists, most notably creating your own bullets by way of linking it to an image. I'm not sure if WP "sanitizes" this particular aspect or not, but I would guess so. Still, I think it deserves a mention. I don't have any special icons made up for bullets at the moment, but we can see what it would look like using something small...like the icons for Bacon Badges! If you're interested in playing with it yourself, the proper coding is <ul style="list-style-image: url('χ');">, where χ is the URL for the desired image.

Oh, you can also do stuff like put borders around a list (useful if you want it to really stand out as a focal point) but that's for another day. In fact, with HTML/CSS, you can put borders around almost anything from paragraphs to images to arbitrary divs. Maybe the next issue will include an appendix on borders. It's easy to use and great to make a statement with.

Kinda neat, eh? We can achieve virtually the same result through the use of tables and divs and such, but this is way simpler! Hopefully I'll solve this strange issue in the near future and those of us who are adventurous enough can give these a shot!

---

There's only a couple of things left to know about lists, one being lists within lists. I still recommend letting WordPress do the heavy lifting for you when it comes to this task, or at least using an HTML editor to assist you. It ain't hard, but the nesting nature of it can make it confusing to know when to close which tags, and if you don't do it right, whatever comes next in your document is going to look really strange!

The concept of nesting a list in another list is easy. The difficulty lies in closing each of these sub-lists at the right time. Let's go back to our list of colors again. "Peach" is first, followed by "Viridian." If we want "Viridian" in its own sub-list, after we list "Peach," we begin another ul tag (or ol tag; you can actually have ordered lists within unordered lists and vice versa in any combination). Now if we want "Gold" on yet another sub-level, we begin another ul. But what if, for "Blue," we wanted to go all the way back to the top level, equal with "Peach"? In this case we have to first close our second sub-level ("Gold") followed by the first sub-level ("Viridian") and then go about listing "Blue" with a regular li. Now suppose we wanted to drop "Cyan" down not one level, but 2 levels? In this case, after "Blue," we open 2 ul tags, then list "Cyan." Adding another item at the same level is just like adding an item regularly; if we want "Indigo" at the same level as "Cyan," we simply add another li. Once the list is over, things have the potential to get tricky. First we have to close out 2 ul tags since we dropped down 2 levels before listing "Cyan." Fortunately, all that's left in this example is to then close out the top-level list.

Here's what that looks like in HTML followed by the finished product:

That can be a lot to take in, and I know I probably didn't do a great job of explaining it, but like I said, you can get WordPress to do the hard stuff for you. Moreover, it's doubtful you'll be needing to create complex multi-level lists in the first place. Each ul (or ol) opened within another ul (or ol) will lead to another sub-level. When a ul (or ol) within a ul (or ol) is closed the next item will appear in the next-highest open level. Make sense? Also,there doesn't necessarily have to be an item at each level either, similar to how we jumped 2 levels from "Blue" to "Cyan" in the above example. You can move "down" several levels at once by opening multiple ul (or ol) tags without inserting items, and you can move up several levels at a time by closing them (without intervening items). It is important to remember though that every open ul (or ol) tag must be closed before you resume writing outside of the list(s).

---

Well, that's the extent of everything I planned on covering, but while we're at it, let's throw a couple of other "tricks" into the mix!

First notice that lists are always (or almost always) indented. The text that you're reading right now is part of a paragraph; when I place a list under it, you can see that the list doesn't align directly to the left side of the paragraph. As it turns out, you can control this identation. Throughout this document I've purposely been throwing the lists a little further to the right for aesthetic reasons, but to demonstrate, the following list will not be padded; any indentation is the default indentation for a list.

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

We can get rid of these default margins and padding really easily by using this: <ul style="margin: 0; padding: 0;">

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

The problem here should be obvious - the bullets are hanging over the edge. Well hopefully you've caught on by now; how do we get rid of the bullets? By using <ul style="list-style-type: none;">. If we combine the two into <ul style="list-style-type: none; margin: 0; padding: 0;"> we get what we were looking for!

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

We can continue to expand upon this concept to adjust where exactly the list sits, as well as any sub-lists. Normally the default settings should be fine for any given situation, but certain aesthetic dilemmas may be corrected by shifting lists a little bit one direction or another.

---

Whew, what a handful huh? Well, if you're ready to take this to the next level, I encourage you to keep going! Originally this document continued with some advanced instruction on how to create menus from horizontal lists (useful if you want an elegant way to link to other posts at the bottom of your articles) but it became so involved I decided to separate it. If you have even a passing interest, I would encourage you to at least read through the information on making horizontal lists and turning them into menus. Even if you don't have any specific need for them right now but are interested in exercising more control over the content in your articles, you might find some useful bits of information.

Originally I wanted to slowly build up to the big reveal, piece by piece, but in the interest of enticing you to keep reading, I'm going to go ahead and show you what we're going to be working towards throughout the next piece - all through the use of lists! Check it out! Go ahead and hold your cursor over the buttons to get the full effect. And when you're ready, take the plunge and dig into the advanced section!

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

---

Quick Reference

---

Advanced HTML Lists - Horizontal Menus

---

Example Variations

---

NerdBerry NerdBerry@NerdBacon.com	The Cubist TheCubist@NerdBacon.com
Doc Croc DocCroc@NerdBacon.com