Created on April 6, 2021
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:
This would display something quite similar to what's seen here:
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...
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:
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:
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...
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...
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.
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...
You should then get to see your list of definitions displayed something like this:
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:
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.
Pretty useful tutorial. I'm acftually following this to make my website.
This tutorial is awesome, learned a lot! Definitely will be putting these skills to use!
2 comments on this page
Sort: Ascending | Descending
Leave a Comment