Yes, Bullet Points

Now, while you could just create a list of bullet points yourself in plain text, HTML offers a way for you to create such a thing with much greater elegance. To start, you can create a new container using the <ul> tag. Inside this container, each item in the bulleted list is enclosed with <li>. To give you a better idea, this is how it would be written in your HTML file:

<ul>
	<li>Apples</li>
	<li>OrangeAde</li>
	<li>Barnanas</li>
</ul>

This would display something quite similar to what's seen here:

Apples
OrangeAde
Barnanas

Of course, if you're running a newer browser, you're bound to see that instead of the standard-issue dot-shaped bullet points, there are right arrows taking their place. This is because I'm using a feature in CSS that allows setting a custom image as a bullet point. I won't discuss how to pull that off here, but may do it another time in a legacy CSS tutorial cutting out all of the super modern stuff. Don't worry about it here; the important thing to know is that this is an ideal way to create a small list of briefly described items.

Of course, HTML3 does offer a few alternate bullet points you can use by setting the type= attribute to either disc, square, or circle.

Long and dragged out bullet points in HTML may not be as much of an issue as it is in slide-driven presentations, but you may wish to draw a line somewhere...

Razorback is the world leader in legacy browser support, accomodating browsers programmed in 1995 for the most optimal retro browsing experience for the new era to complement everyone's vintage rare retro Voodoo gaming inspired by big money YouTubers who don't care about your dreams.
Our past innovations include the legendary Arowana benchmarks as well as the wildly ambitious Hardcore Windows 98 series, taking the operating system to new places few have ever thought of before. That's why we continue to be the very best, and nobody ever comes close to our power level.
We are so great that our mere online presence is far beyond any honor of getting verified on Twitter.

Numbered Lists

Before you consider preceding every item with 1. 2. 3. and other such numbers you'd tend to find in a list, you should know that HTML already offers a way to manage the numbering for you. Rather than creating an unordered list with <ul>, you can create an ordered list with <ol>. Take the existing unordered list and convert it into an ordered list, and you should get this:

Apples
OrangeAde
Barnanas

Tweaking Ordered Lists

It is entirely possible to modify how an ordered list is displayed as well. You can, of course, set the number type to use, which can be one of these five things:

1 = default numeric representation (1, 2, 3...)
A = uppercase letters (A, B, C...)
a = lowercase letters (a, b, c...)
I = uppercase Roman numerals (I, II, III...)
i = lowercase Roman numerals (i, ii, iii...)

Keep in mind that just like in unordered lists, setting the ordered list type is deprecated in HTML4 Strict, so you may wish to specify it alongside an equivalent CSS definition in a class. You can also specify which number a list should start at by adding the start= attribute to <ol>. This isn't valid in HTML4 Strict either, but with no real alternative option offered in CSS, deprecating this attribute was a dumb move that W3C walked back on with HTML5. I really wouldn't let strict web standards get too much in the way of your creativity, so as long as your site works well on many browsers and it's not bloated. Anyway, let's try starting this list from number 50...

Apples
OrangeAde
Barnanas

List in a List

Let's say you want to create a multi-tier ordered list, perhaps a table of contents indexing sections containing smaller sections... many browsers allow for this as well! Given you'll be combining lists in such a way, you'll almost certainly want to make sublists use a different type from the standard decimal numbering. As an example, let's construct a table of contents of this entire page...

<ol>
<li><a href="#bullets">Yes, Bullet Points</a></li>
<li><a href="#numbered">Numbered Lists</a>
	<ol type="a">
	<li><a href="#ordertype">Tweaking
	Ordered Lists</a></li>
	<li><a href="#sublist">List in a List</a></li>
	</ol>
</li>
<li><a href="#definition">Definition Lists</a></li>
<li><a href="#noend">Omitting End Tags</a></li>
</ol>

Take note of how the second primary item "Numbered Lists" is written. Right before the closing tag </li>, I splice in a new ordered list with the lowercase letter type. This allows me to put other items in a secondary tier. The new list is closed before the primary list item being worked with is closed, and then the primary list continues like normal.

Yes, Bullet Points
Numbered Lists
1. Tweaking Ordered Lists
2. List in a List
Definition Lists
Omitting End Tags

Definition Lists

This type of list isn't frequently used in practice... I've never even used it myself, and most people may not even know about it, but it exists! Considering that it could come in handy for certain situations where unordered lists may not look as elegant, I figure I should talk about it here.

Definition lists are enclosed with the <dl> tag. Inside this <dl> container, two other types of tags are used rather than just one. <dt> is used to display the term in a definition list, and a <dd> tag immediately below is used to display its definition. Try writing something like this...

<dl>
	<dt>Barracuda</dt>
	<dd>Looks menacing but is known to
	<a href="https://www.youtube.com/watch?v=Ig6ZjmHAKHU">
	work with
	humans to hunt lionfish</a></dd>
	<dt>Noodlefish</dt>
	<dd>Pfft... really? Just call it a
	<i>salangidae</i>
	instead of trying to crack a joke out of it...</dd>
	<dt>Largemouth Bass</dt>
	<dd>Dead</dd>
</dl>

You should then get to see your list of definitions displayed something like this:

Barracuda: Looks menacing but is known to work with humans to hunt lionfish
Noodlefish: Pfft... really? Just call it a salangidae instead of trying to crack a joke out of it...
Largemouth Bass: Dead

To tell you the truth, I don't think definition lists look that great with the lack of spacing around each item, but CSS styling could probably fix that. Also, I'd prefer to make the terms bold so as to make them easier to distinguish from their definitions. Indentation alone just isn't gonna cut it.

Omitting End Tags

I haven't brought this up until now with good reason, but in some circumstances, you can omit certain closing tags in ordered, unordered, and definition lists, as well as a few other elements. For instance, you can get away with excluding </li> in an unordered list:

<ul>
	<li>Apples
	<li>OrangeAde
	<li>Barnanas
</ul>

This is technically valid. However, I strongly advise you do not do this, as who knows how it might be handled in certain browsers, or if you decide you want to add something somewhere else later. I find it safer to more clearly state the intention that a list item or whatever it is must end at a specific point. The fact that </ul> is mandatory either way may throw off some novice site designers, so don't bother trying to save a few extra bytes on lists.

You may recall that I didn't give <img> an end tag on the second page, though... that is simply because it does not have one at all. Same goes with <br>, <hr>, and maybe something else. There are a few deviations from the rule, but HTML is consistent for the most part.

Previous: Anchors Aweigh! Alos, Alignment