Site Development
Downloads
Help!!
Home
What Is An Unordered List?An Unordered List is simply a list of items presented in no particular order or priority. They are not numbered or lettered like Ordered Lists (next lesson). Here's an example:
Unordered lists are great for presenting related items of equal priority or value. Making An Unordered ListWe make unordered lists with the <ul> and <li> tags. The <ul> and </ul> tags enclose the entire unordered list. Each item in the list is coded with a <li>, or "list item" tag. Below is the code for the above example. This is placed in the <body> of your page:
<ul> This is the code that produced the unordered list at the top of this page. Notice that the whole thing is nested inside the <ul> and </ul> tags. Also notice that there is no closing </li> tag. List items only need the single opening <li> tag. All list items and <li> tags must be nested inside the <ul> tags. What the unordered list does is put a dot, called a "bullet" before each list item. This tells the viewer that the unordered list is a list of related items. Lists are often used with header tags to make a title for the list:
<h3>A List Of Items</h3> The above would look like this: A List Of Items
Changing The "Bullet"You don't have to settle for a "dot" as a bullet. You can use a circle (unfilled dot) or square, too. To do this you must use the TYPE attribute in the list's <ul> tag:
<ul type="square"> This would produce the bulleted list below:
Using the value "circle" for TYPE would produce circles instead of squares. You can mix this up a bit by using the TYPE attribute in the individual <li> tags instead of the <ul> tag.
<ul> This would produce the list below:
The three possible attributes for TYPE in an unordered lists are "disc" (default), "square", and "circle". Aligning ListsLists do not align well. This is especially true if the list item strings are of different lengths. I'll demonstrate this by using the <div align="center"> tag to try to center the list. The code would be:
<div align="center"> The <div> tags do center the list, but the list's internal alignment is lost. Each list item (<li>) is centered individually. The code would look like this:
The above may or may not be an effect you want. When we learn about HTML tables, we'll see how to tame lists a little more. For now just practice making unordered lists with different bullets. Then we'll move on to Ordered Lists. |
To Next Beginning HTML Lesson
Back To Beginning HTML Index