Unordered Lists or Bulleted Lists:
There are several different types of lists which can be made with HTML. Whether your interested in making a list of links or a list of definitions, lists are very simple. All lists follow a similar format. This post is going to show you how to create a list and select the style of the bullet points.
Once you’re done building your website and want to get it to start ranking on Google, be sure to check out our SEO content. We’re an NJ SEO company that produces tons of content on getting your site to rank on Google.
Let us start off with the most common, the unordered list. Suppose we want to make a list of groceries like the following.
- Eggs
- Milk
- Bread
- Soda
This list was made with the following statements:
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Soda</li>
</ul>
Notice how the unordered list tags, <ul> and </ul>, surround or enclose all of the list items. Also, notice that each list item is surrounded by list item tags, <li> and </li>. This format is very important.
But, what if I don’t like the discs, you ask? You can change the type of unordered list to either SQUARE, CIRCLE, or DISC. The following is an example of the same list as above, but with the TYPE set to SQUARE.
- Eggs
- Milk
- Bread
- Soda
This list was made with the following statements:
<ul type=”square”>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Soda</li>
</ul>
Ordered Lists or Numbered Lists:
Ordered or numbered lists are another great way to list items. The format is very similar to the unordered list, just change the <ul> and </ul> tags to <ol> and </ol> tags respectively.
- Eggs
- Milk
- Bread
- Soda
This list was made with the following statements:
<ol>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Soda</li>
</ol>
So, are there other “TYPE’s” of ordered lists or am I stuck with just numbers, you ask? You catch on quickly. There are other types of ordered lists. An example of a large roman numeral list is shown below.
- Eggs
- Milk
- Bread
- Soda
This list was made with the following statements:
<ol type=”i”>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Soda</li>
</ol>
The other types of ordered lists are show in the table below:
| TYPE | Definition |
| TYPE=”1″ | Arabic Numbers (default) |
| TYPE=”a” | Lowercase Letters |
| TYPE=”A” | Uppercase Letters |
| TYPE=”i” | Small Roman Numerals |
| TYPE=”I” | Large Roman Numerals |
Definition or Glossary Lists:
A definition list is a little more complex than the other lists, but this shouldn’t scare anyone. There are three parts to a definition list. First, there are the <dl> and </dl> tags which surround the entire definition list. Next, there are the <dt> and </dt> tags which surround the definition terms. Lastly, there are the <dd> and </dd> tags which surround the definition data. Does this sound a little strange? Look at the example below: Eggs n., female reproductive Milk n., liquid excreted from breasts of female animals Bread n., food produced of flour Soda n., alkali, soft drink
This list was made with the following statements:
<dl>
<dt>Eggs</dt>
<dd>n., female reproductive</dd>
<dt>Milk</dt>
<dd>n., liquid excreted from breasts of female animals</dd>
<dt>Bread<dt>
<dd>n., food produced of flour</dd>
<dt>Soda</dt>
<dd>n., alkali, soft drink</dd>
</dl>
This list doesn’t seem as useful as the others, but I felt it important to point it out. Try and see where you might find it useful.
