Qarpeo LogoInstitute

<ul>

The HTML <ul> element generates an unordered list, showing list items (<li>) with bullet points. It is used to present items without a specific sequence.

<ul> Tag

The <ul> tag defines an unordered list, where each item is marked with a bullet by default. List items are enclosed within the <li> tag.

Syntax

index.html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul> Demo

  • First item
  • Second item
  • Third item
index.html
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
A <li> element can contain nested lists or other HTML elements like images and links.

Customizing List Item Markers

The appearance of list markers can be adjusted using the CSS list-style-type property. The table below describes the available options:

ValueDescription
discDefault bullet style (solid circle)
circleHollow circular marker
squareSquare marker
noneNo list marker

disc Example

  • Coffee
  • Tea
  • Milk
index.html
<ul style="list-style-type: disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

circle Example

Circle

  • Coffee
  • Tea
  • Milk
index.html
<ul style="list-style-type: circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

square Example

  • Coffee
  • Tea
  • Milk
index.html
<ul style="list-style-type: square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

No List Marker

  • Coffee
  • Tea
  • Milk
index.html
<ul style="list-style-type: none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Attributes

  • compact (Deprecated): Previously used for a more condensed list display. Use CSS for spacing adjustments instead.
  • type (Deprecated): Allowed specification of the list marker style (disc, circle, square). CSS list-style-type should be used instead.
Since compact and type are deprecated, the recommended approach is to use CSS for list styling.

HTML List Elements

TagDescription
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Represents a list item
<dl>Defines a description list
<dt>Defines a term in a description list
<dd>Describes the term in a description list

Related Topics

  • <ol> – Used for ordered lists.
  • <li> – Defines list items.
  • <menu> – Used for menu lists.
  • The CSS list-style property allows customization of bullet styles.
  • CSS counters help in styling nested lists dynamically.
  • Adjusting line-height and margin in CSS can control spacing and indentation.

Conclusion

The <ul> tag in HTML is a powerful tool for creating unordered lists, where items are typically marked with bullets. It allows for easy customization of list markers using the CSS list-style-type property. Although deprecated attributes like compact and type were previously used for styling, CSS is now the recommended approach for list presentation.

<ol>

The HTML <ol> element generates a numbered list, where each item (<li>) appears in a defined sequence, often used for content that follows a particular order.

<dd>

The HTML <dd> element represents a description or value linked to a term in a <dl> (description list), commonly used for detailed information or explanations.