HTML Tutorial

HTML Unordered Lists

An unordered list in HTML is created using the <ul> (unordered list) element. List items are defined within <li> (list item) tags. Unordered lists are typically used when the order of items is not important, and they are usually displayed with bullet points.

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
Try It Yourself

List Styles

List styles in HTML refer to the different visual representations of items within lists. By default, HTML provides a basic style for lists, but you can customize these styles using CSS (Cascading Style Sheets) to enhance the visual presentation of your content. There are several list-style properties that you can use to change the appearance of lists. Here are some common list styles:

Default Bulleted List

This is the default style for an unordered list.

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
Try It Yourself

Circle Style

You can use CSS to change the list-style-type to ‘circle’.

Example:

<style>
  ul.circle {
    list-style-type: circle;
  }
</style>

<ul class="circle">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>
Try It Yourself

Square Style

Change the list-style-type to ‘square’.

Example:

<style>
  ul.square {
    list-style-type: square;
  }
</style>

<ul class="square">
  <li>Small</li>
  <li>Medium</li>
  <li>Large</li>
</ul>
Try It Yourself

Custom Image as Bullets

You can use a custom image as the list item marker.

Example:

<style>
  ul.square {
    list-style-image: url('image/tick.png');
  }
</style>

<ul class="square">
  <li>Small</li>
  <li>Medium</li>
  <li>Large</li>
</ul>
Try It Yourself

These styles can be applied to both ordered (<ol>) and unordered (<ul>) lists. Additionally, you can apply these styles to specific lists by using class or ID selectors.

W3TWEAKS
Latest posts by W3TWEAKS (see all)