How To Display a List In HTML with Ordered Lists and Unordered Lists

While reading the contents of a document, we generally prefer to read only the required information. So lists provide a convenient way of displaying important information to the users in small paragraphs consisting of few lines. For example, You can create a list of specific features of a product, steps for installing a particular software, etc. HTML provides three different kinds of lists for specifying information on a web page. Every list must contain one or more lists in HTML elements. There is three main type of lists: unordered lists ordered lists, and definition lists.

Display A List In HTML With Ordered Lists And Unordered Lists

• Unordered lists follow the bullet style like a solid circle, an open or a square circle. The element of an unordered lists start with <ul> and </ul>.
• Ordered lists can be preceded by Arabic numerals, uppercase or lowercase Roman numerals, or uppercase or lowercase alphanumeric characters. The tag for an ordered list are <ol> and </ol>.
• Definition lists require a start tag <dl> and end tag </dl> and two special elements is definition terms <dt> and one for definitions <dd>.

In addition to these three types of lists, HTML also allows two other types of lists that are much less commonly used: directory lists(which use the <dir> tag) and menu lists. However, these two types of lists is not recommended.

Creating Unordered lists and Using list item elements

The first of three list elements we will see is the unordered list element, which uses the <ul> and </ul> tag. The only element that can be contained inside the <UL> and </UL> tag is a list item, signified with the list item element. A bulleted list is an unordered list that is used to represent a set of items that are related to one another but the order of items is unimportant. A bulleted list always beings with <UL> tag, (that stands for unordered list) and ends with </UL> tag. Each item in the list is marked using the <LI> tag which stands for list item. However, it is optional to specify the closing tag</LI>. You can define any number of items in the list in HTML. It is also possible to include text formatting elements, paragraphs, etc. in the list contents. The list item element uses the <li> tag and contains the actual content of your lists. Both <ul> and<li> have the same set of attributes, which is TYPE=”CIRCLE”, “DISC”, ”SQUARE” the following types. The CIRCLE type is remark with hollow bullet value, the DISC type is remark with solid bullet value, and the SQUARE type also remarks with solid bullet value.

<ul>

<li>Milk <li>

<li>Bread<li>

<li>Avocados</li>

</ul>

One important aspect of lists is that you can nest one list inside another to create a sublist. The default appearance of the sublists will vary from the main list, with the first sublist using circle bullets, and the next nested list using squares.

Creating Ordered lists

The ordered list elements <ol> and </ol> tags are used to create ordered lists. Like unordered lists, ordered lists must contain list item elements to contain the text of your list. Numbered List in HTML is an ordered list that is used to represent a set of related items in a given order such as step-by-step instructions, recipes, outlines, etc. A numbered list always begins with <OL> tag and ends with </OL> tag. Each item in the list is marked using the <LI> tag. The closing </LI> tag is optional. The actual appearance of a numbered list is similar to an unordered list but the main difference is that numbers appear before each item instead of bullets. In fact, ordered lists are identical in behavior attribute to start numbering at a number other than one.

Here are the attributes you can use with the <ol> tag:

TYPE=’1’ (Arabic numbers)

TYPE=’a’ (lowercase alphanumeric)

TYPE=’A’ (uppercase alphanumeric)

TYPE=’i’ (lowercase Roman numbers)

TYPE=’I’ (uppercase Roma numbers)

The TYPE attribute allows you to specify the numbering system you want to use. Arabic numbers are the default. In addition, when you are using ordered lists, the <li> tag can use the VALUE attribute to force to make a particular list item to have a certain number.

For Example:

<ol>

<li>Milk <li>

<li>Bread<li>

<li>Avocados</li>

<li VALUE=’10’>Dark Chocolate</li>

</ol>

Defining Terms with Definition Lists

The definition list element use the <dl> start tag and the <dl> end tag to create a definition list. This list is rendered without bullets. Definition List in HTML has primarily been used for glossaries i.e. terms with their definitions. The definition list are always enclosed in <DL> and </DL> tag. The definition term and definition description are represented by <DT> and <DD> tags respectively.

NOTE: I hope this post helps you to learn about How To Display A List In HTML With Ordered Lists And Unordered Lists. If you want to learn more about HTML so, please constantly reach our website.