HTML Basics: Making List
Use lists to display numbered steps, bulleted items, or items and their
definitions.
This section introduces HTML list tags. These tags let you display items in list form. You can also use the list tags as an "unofficial" workaround to create an indented paragraph or section.
About Lists
Using HTML tags, you can display items as three types of lists:
- unordered
- ordered
- definition.
In an unordered list each item is preceded by a bullet. You can define the type of bullet
you want to use.
In an ordered list each item is preceded by either a number or letter.
In a definition list you specify a term and its definition. The term appears bold and the
definition is indented.
Each type of list works the same way. You enter a tag that describes the type of list.
Then you tag each list item. Finally, you end the list. You
can have paragraphs within lists. Paragraphs within a list are indented, but do not have a
bullet or number as list items do.
An easy-to-make mistake is to leave off the end list tag. This leaves the list indent
turned on and the remainder of your page appears indented.
Lists tags can easily create a messy looking text file of code. Messy code and neat code will produce the same results, but neat code will be much easier to edit and update in the future.
Unordered List (<ul>)
The unordered list displays items in an indented, vertical column. Each item is preceded
by a bullet.
A unordered list uses three tags.
- The list begins with the <ul> tag.
- Each item in the list is marked with the list item tag, <li>.
- The list ends with an off unordered list tag, </ul>.
For example, this code:
There are nine planets:<br>
<ul>
<li>Mercury
<li>Venus
<li>Earth
<li>Mars
<li>Jupiter
<li>Saturn
<li>Uranus
<li>Neptune
<li>Pluto
</ul>
displays like this in a web browser:
There are nine planets:
- Mercury
- Venus
- Earth
- Mars
- Jupiter
- Saturn
- Uranus
- Neptune
- Pluto
If you have lists within lists the brower will display a different type of bullet at each
level. You can also specify the type of bullet you want to
use by adding the type switch. The type switch has three variables: disc, circle,
and square.
