HTML5 <ul> Tag

The HTML <ul> element is used to represent an unordered list of items, typically rendered as a bulleted list.

The only content permitted inside this element is zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements. Both the starting and ending tag are mandatory for this element. The parent of the <ul> tag can be any element that accept flowing content.

The <ol> and <ul> elements both represent a list of items. They differ in that, with the <ol> element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, otherwise you can use <ul>.

The following style is applied to this element by default:

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px;
}

Here is an example of using this tag:

<p>I have lived in the following countries:</p>
  <ul>
    <li>Norway</li>
    <li>Switzerland</li>
    <li>United Kingdom</li>
    <li>United States</li>
  </ul>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML ul Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <ul> element on MDN.
  2. You can also read the HTML <ul> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top