One of the goals for formatting is to get information to be easily read and understood.
While text in a webpage works well for displaying information, it can be hard to read if there is a lot of text.
Lists can break down large complicated blocks of text into smaller, more manageable sections. This is why you often see blog posts online, written in bullet points.
Consider the two examples:
apples, oranges, pears, grapefruit, strawberries, bananas, blue berries, mangos, peaches, plums, watermelon, and cantaloupe
- apples,
- oranges,
- pears,
- grapefruit,
- strawberries,
- bananas,
- blue berries,
- mangos,
- peaches,
- plums,
- watermelon, and
- cantaloupe
Which would be easier to use when going shopping? Most would say the list, as it allows for each item to be easily distinguishable. (And easier to check off when found in the store.)
This is why we use lists when shopping, identifying steps that need to occur in a process, and reminding us of what needs to be accomplished (AKA a to do list).
You might notice that there are actually two different types of list: Ordered Lists and Unordered Lists.
Unordered Lists
The items in an unordered lists don’t have to be listed in a particular order. If listing ingredients in a recipe, it doesn’t matter what order you put them in. You could order them alphabetically, by price, or by amount that you will use.
Therefore, unordered list items are normally identified by placing a dark solid dot, called a bullet point, before each item. This leads unordered lists to sometimes be called a bullet list.
However, if you have nested list(s), you may also see hollow circles, small dots, and more. If you control the design with CSS, you can additionally see squares, diamonds, or a custom image.
- To create a ordered list, write your first item in the list.
- Then in the property inspector, select the icon that looks like it has a set of bullet points with lines beside them.
This will convert the line to a list item. - Hit the enter/return key to create a new bullet line item. Enter the text for the next line.
- Repeat as necessary. Hit the Enter Key twice to exit from the ordered list.
This is the same technique you would use in most word processors, so it should be familiar to you from that perspective.
Unordered List in HTML
If you were to look at the HTML code, you would notice each line item is enclosed within a <li> set of tags. <li> is for List Item.
Furthermore, the <li> tags are enclosed within a <ul> tag set. The <ul> is for Unordered List, and lets the browser know what type of list it is.
Ordered Lists
While you don’t care what order you pull the recipe’s ingredients from the shelf as you prep to cook, the steps to cook the recipe, need to be followed in a given order. For example: you can’t put your food into the over before mixing, at least and not have it turn out right.
Therefore, Ordered Lists exist to provide a sense of chronological steps that need to be followed. They are normally numbered, although, through CSS, you may also see letters, and upper and lower case roman numerals.
The steps to create a ordered list is nearly identical to a unordered list. The difference being, in the property inspector, select the button with numbers next to the lines
, instead of the dots.
Ordered List in HTML
If you were to look at the HTML code for an ordered and unordered list you would notice a lot of similarities. For example, each line item is also enclosed within a <li> set of tags, just like with the unordered list.
However, the <li> tags are enclosed within a <ol> tag set. The <ol> stands for Ordered List, and lets the browser know what type of list it is. This way it can put the numbers beside each line.
Indenting Text
I’ve mentioned that you can indent text previously. This is done through a <blockquote> tag. Like a block quote in writing, it indents the text an equal amount on the left and right from the margins.
When done within a list, this shows a sub list, and the list icon before the time changes. By default, an unordered list gets an open circle as well as indenting, where an ordered list indention becomes letters. These behaviors can be changed in CSS if you want.
To indent, for a sub list, use the indent button on the while within the list.
This button is found in the property inspector.
Hitting the Enter/Return key twice will send you back to the parent list. Or you can click on the out-dent button
.This button is found in the property inspector next to the indent button.
Creating Lists in Dreamweaver was originally found on Access 2 Learn
