JavaScript Error

Lists

In this blog post I am referring to the standard List type elements that are available with HTML.

There are three main types of lists readily available in HTML: Unordered, Ordered, and Description.

Unordered Lists

Unordered lists are used to display a group of items in a Bullet style (small black circles).

To make an Unordered List, use the <ul> element tag, and then add each list item using the <li> tag:

<ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

Example output of the above Unordered List code:

It is also possible to display a list of items without displaying the Bullets. To accomplish this we just need to set some Style attributes to the list element tag. Set the list-style-type attribute value to none to remove the bullets. You can also set the margin and padding attribute values to zero to remove the list items indentions altogether, or set a different value to adjust how much the list items are indented by.

For example:

<ul style="list-style-type:none;margin:0;padding:0;">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

Example output of the above modified Unordered List code:

Note: This style trick can be applied to both Unordered and Ordered lists.

Ordered Lists

Ordered lists are used to display a group of items in a Numbered style (1, 2, 3, etc...).

To make an Ordered List, use the <ol> element tag, and then add each list item using the <li> tag:

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

Example output of the above Ordered List code:

Description Lists

Description lists are used to display a group of items, with item descriptions for each item.

To make a Description List, use the <dl> element tag, and then use the <dt> tag to note the item title followed by the <dd> tag to specify that items description:

<dl>
    <dt>First Item</dt>
    <dd>-  This is the description for First Item</dd>
    <dt>Second Item</dt>
    <dd>-  This is the description for Second Item</dd>
    <dt>Third Item</dt>
    <dd>-  This is the description for Third Item</dd>
</dl>

Example output of the above Description List code:

Tips and Tricks

Lists elements can contain other HTML elements as well, not just text. For example, you could easily add images, paragraphs, tooltips, line breaks, etc... to each list item.

To separate the list items to be more apart from each other, you can either use Style methods to add Margin or Padding values to them, or you can add a <br/> line break at the end of each list item. For Example:

<ul>
    <li>First Item</li><br/>
    <li>Second Item</li><br/>
    <li>Third Item</li><br/>
</ul>

Example output:

Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

	(0)
	(0)