Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <ul> Tag

The <ul> tag creates an unordered list of items.

By default, solid bullets are displayed for each item.

But other options and icons can be used.

Example

#

A <ul> tag with 3 bulleted items.

  • Vincent Van Gogh
  • Paul Cézanne
  • Claude Monet
<ul>
  <li>Vincent Van Gogh</li>
  <li>Paul Cézanne</li>
  <li>Claude Monet</li>
</ul>
ul = unordered list
li = list item

Using <ul>

The <ul> tag creates an unordered list.

Use the <li> tag to add items to the <ul> list.

By default, items are displayed with a solid bullet before each item.

Tip: The <ul> element is also frequently used to create lists of navigation items (with bullets removed).

More Examples

A <ul> element that is styled without bullets.

  • Vincent Van Gogh
  • Paul Cézanne
  • Claude Monet
<ul style="list-style-type:none;">
  <li>Vincent Van Gogh</li>
  <li>Paul Cézanne</li>
  <li>Claude Monet</li>
</ul>

Attributes for <ul>

The <ul> element has no attributes, but it does accept global attributes. The following are commonly used.

Attribute Value Description
id   identifier Defines a unique identifier for the ul element.
class   classnames Sets one or more CSS classes to be applied to the ul element.
style   CSS-styles Sets the style for the ul element.
data-*   value Defines additional data that can be used by JavaScript.
hidden   hidden Specifies whether the ul element is hidden.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid in HTML5.

Attribute Description Alternative
compact Renders the list in a compact style. CSS line-height
type Sets the bullet style for the list. CSS list-style-type

Did you know?

Did you know?

Creating navigation menus with <ul>

An example of a horizontally aligned <ul> element using CSS.
Replace the items with links and you have a fully functioning menu bar.

<style>
  ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  .nav li {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

  .nav li:hover {
    background-color: #555;
    cursor:pointer;
  }
</style>

<ul class="nav">
  <li>Products</li>
  <li>Services</li>
  <li>About Us</li>
</ul>

List Tags

The <ul> tag is part of a group of tags that are used to create lists (i.e. lists of items) on web pages. This group is referred to as the List tag group. Together, they allow you to create comprehensive HTML lists.

Below are the list tags.

Element Description
<ul> Creates an unordered, bulleted list
<ol> Creates a numerically or alphabetically ordered list
<li> Defines a list item. Used in <ol> and <ul> elements
<dl> Defines a description list
<dt> Adds a term or name to a <dl> element
<dd> Adds a description of a term or name to a <dl> element

Browser support

Here is when <ul> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides