Unordered List in HTML

HTML unordered list is to present a group of related items in a bullet-pointed or marker-based format that does not require a specific sequence or order. Unordered lists are used to provide a visual hierarchy and organization to the content of a webpage.

An unordered list can be used to present a variety of information, such as a list of features or benefits, a set of instructions, a menu of options, or a list of related links. It can also be used for more creative purposes, such as displaying a list of quotes or testimonials, or as a way to break up long blocks of text.

By using an unordered list, the content is broken down into bite-sized pieces that are easier to read and understand. The bullet points or markers provide a visual cue that helps the reader quickly identify the individual items in the list.

To create an HTML unordered list, you can use the <ul> element, which stands for "unordered list". Each item in the list is represented by an <li> (list item) element. Following is an example of an HTML unordered list:

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

In the above example, created an unordered list with three items. Each item is enclosed in an <li> tag. When this code is displayed in a web browser, it will create a list that looks something like this:

run this source code Browser View
  • Item 1
  • Item 2
  • Item 3

By default, each item in the list will be displayed with a bullet point. You can customize the appearance of the bullet points or markers using CSS.

Customize the bullet points or markers in unordered list

By default, HTML unordered lists are displayed with bullet points or markers to represent each list item. You can customize the appearance of these bullet points or markers using CSS. Here are some examples of how you can customize the bullet points in an HTML unordered list:

Change the bullet point type:

You can change the default bullet point type to a different shape or symbol by using the list-style-type property in CSS.

ul { list-style-type: square; }

In the above code, set the list-style-type property to "square", which will display each list item with a square bullet point instead of a circle.

Change the bullet point color:

You can change the color of the bullet points or markers by using the color property in CSS.

ul { color: red; }

In the above code, set the color property to "red", which will display each bullet point or marker in red.

Use a custom image as the bullet point:

You can use a custom image as the bullet point or marker by using the list-style-image property in CSS.

ul { list-style-image: url('bullet.png'); }

In the above code, we have set the list-style-image property to the URL of an image file called "bullet.png". This will display each bullet point or marker using the image instead of a default shape or symbol.

<style> ul { list-style-type: square; color: red; } </style> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
run this source code Browser View
  • Item 1
  • Item 2
  • Item 3

Remove the bullet points or markers entirely:

If you want to remove the bullet points or markers entirely, you can use the list-style-type property and set it to "none".

ul { list-style-type: none; }

In the above code, set the list-style-type property to "none", which will remove the bullet points or markers from each list item entirely.

Nesting unordered lists within each other

In HTML, you can nest unordered lists within each other to create a hierarchical structure of items. Following is an example of how to nest unordered lists within each other:

<ul> <li>Item 1</li> <li>Item 2 <ul> <li>Sub-item 2.1</li> <li>Sub-item 2.2</li> <li>Sub-item 2.3 <ul> <li>Sub-sub-item 2.3.1</li> <li>Sub-sub-item 2.3.2</li> </ul> </li> </ul> </li> <li>Item 3</li> </ul>

In the above example, we have created an unordered list with three list items. The second list item has a nested unordered list with three sub-items. The third sub-item of the nested list has another nested unordered list with two sub-sub-items.

When you nest unordered lists within each other, you need to make sure that each <ul> and <li> tag is properly closed. The indentation of the code helps to make it clear which items are nested within each other.

In terms of styling, you can use CSS to customize the appearance of nested unordered lists. For example, you can add margins or padding to create visual separation between different levels of the list.

Horizontal unordered list in HTML

By default, unordered lists are displayed vertically with bullet points or other markers. However, you can use CSS to style an unordered list to display horizontally instead.

<ul class="horizontal"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

In the above code, created an unordered list with three list items. Also added the class="horizontal" attribute to the <ul> tag, which will use to apply CSS styling.

To display the list horizontally, we can use CSS to set the display property of the <li> tags to inline-block. You can also remove the default bullet points using the list-style-type property.

ul.horizontal { list-style-type: none; margin: 0; padding: 0; } ul.horizontal li { display: inline-block; margin-right: 10px; }

In this CSS code, first select the <ul> tag with the class="horizontal" attribute and set the list-style-type, margin, and padding properties to remove the default bullet points and spacing.

Next, select the <li> tags within the <ul> tag and set the display property to inline-block to display them horizontally. Also add a margin-right property to create space between each item.

When you view the HTML and CSS code in a web browser, you should see a horizontal list of items with no bullet points or markers, and a small amount of space between each item.

<style> ul.horizontal { list-style-type: none; margin: 0; padding: 0; } ul.horizontal li { display: inline-block; margin-right: 10px; } </style> <ul class="horizontal"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
run this source code Browser View
  • Item 1
  • Item 2
  • Item 3

Vertical unordered list with multiple columns

By default, unordered lists are displayed vertically with bullet points or other markers. However, you can use CSS to style an unordered list to display in multiple columns instead of one long list.

<ul class="multicol"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul>

In this example, created an unordered list with six list items. Also added the class="multicol" attribute to the <ul> tag, which will use to apply CSS styling.

To display the list in multiple columns, you can use CSS to set the column-count property of the <ul> tag to the desired number of columns. Also remove the default bullet points using the list-style-type property.

ul.multicol { list-style-type: none; margin: 0; padding: 0; column-count: 2; /* Set the number of columns */ column-gap: 20px; /* Set the gap between columns */ }

In this CSS code, first select the <ul> tag with the class="multicol" attribute and set the list-style-type, margin, and padding properties to remove the default bullet points and spacing.

Next, set the column-count property to the desired number of columns and the column-gap property to the desired gap between columns.

When you view the HTML and CSS code in a web browser, you should see a vertical list of items with multiple columns and no bullet points or markers.

<style> ul.multicol { list-style-type: none; margin: 0; padding: 0; column-count: 2; /* Set the number of columns */ column-gap: 20px; /* Set the gap between columns */ } </style> <ul class="multicol"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul>
run this source code Browser View
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Add text or images to HTML unordered list items

You can add text or images within your unordered list items by placing the content between the <li> and </li> tags.

<ul> <li>Item 1</li> <li>Item 2 with an <strong>important message</strong></li> <li>Item 3 with an <img src="image.jpg" alt="Image"></li> <li>Item 4</li> </ul>
run this source code Browser View
  • Item 1
  • Item 2 with an important message
  • Item 3 with an Image
  • Item 4

In the above code, created an unordered list with four list items. The second item has an <strong> tag to emphasize the text, and the third item has an <img> tag to display an image. Note that the src attribute in the <img> tag specifies the image file name, and the alt attribute specifies alternative text to display if the image cannot be loaded.

You can add any HTML tags or content within your list items to format and style the text or images as desired. For example, you could use <p> tags for paragraph text or <a> tags for links.

When you view the HTML code in a web browser, you should see a vertical list of items with the added text or images within each item.

Style unordered list using CSS

You can style your HTML unordered list using CSS to change the appearance of the list markers, adjust the spacing and alignment of the list items, and more.

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> ul { list-style-type: square; /* Change list marker to square */ margin-left: 20px; /* Add left margin to list */ } li { color: blue; /* Change text color to blue */ font-size: 16px; /* Increase font size */ line-height: 1.5; /* Add line height */ }

In the above, created an unordered list with four list items. Then applied CSS to change the list marker to a square shape, add a left margin to the list, and adjust the text styling of the list items.

Used the list-style-type property to change the list marker to a square shape, and the margin-left property to add a left margin to the list.

Then targeted the <li> tags with CSS to change the text color to blue, increase the font size, and add line height using the color, font-size, and line-height properties, respectively.

<style> ul { list-style-type: square; /* Change list marker to square */ margin-left: 20px; /* Add left margin to list */ } li { color: red; /* Change text color to blue */ font-size: 16px; /* Increase font size */ line-height: 1.5; /* Add line height */ } </style> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>

Conclusion:

The purpose of an HTML unordered list is to create an organized, easy-to-read presentation of related items that does not require a specific order or sequence.






Related Topics
  1. HTML Comments
  2. HTML Line Break
  3. HTML Headings
  4. HTML Paragraphs
  1. HTML Lists
  2. HTML Ordered Lists
  3. HTML Description List
  4. HTML Horizontal Line