HTML <ul> Tag for a Bulleted List

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <ul> Tag for Unordered Lists

The <ul> tag is used for unordered lists in HTML. This tag is often used for lists with bullets. For numbered lists, use the <ol> tag instead.

Each list item in an unordered list is an li child element of the ul element, created using the <li> tag. List items are usually highlighted with a bullet mark or image, which is why list items are sometimes called bullet points.

Here are a couple examples of using the ul tag to create bulleted lists. The first one creates a breadcrumb trail with the bullets between the items. The second list example is a more typical list of bulleted items, but it uses stars as the bullets.

Tina Fey
Jane Lynch
Kyra Sedgwick
Andie MacDowell
Laura San Giacomo
Clare MacIntyre-Ross
Kimberly Williams-Paisley

This is an actual working example of the <ul> tag example code below.

<ul> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <ul>
      <li>
         ... flow content ...
      </li>
      ...
   </ul>
   ...
</body>

Rules for coding the HTML `ul` element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code a ul element inside an element where flow content is allowed.
Begin the ul element with a starting <ul> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Inside the ul element, between the <ul> starting tag and the </ul> ending tag, code the li elements for the list items.
End the ul element with a matching </ul> closing tag.

Content of the ul element

The content of the ul element can only include HTML comments and li elements.

<ul> Tag Attributes

Attributes of the <ul> tag

global attributes

In addition to the personal attributes of the <ul> tag below, any of the common HTML attributes can also be coded.

<ul> Tag Examples

Examples of the `ul` tag in HTML 5

Horizontal list for a breadcrumb trail

(see <ul> tag demo above)

<div>
<style scoped="scoped">
   ul.breadcrumb-trail { margin: 0; list-style: none }
   ul.breadcrumb-trail li { display: inline }
   ul.breadcrumb-trail li+li:before { content: "\27a2\a0" }
</style>
<ul class="breadcrumb-trail">
   <li><a href="/">Home</a></li>
   <li><a href="../../tutorials/basic-html-structure.html#html-code">HTML</a></li>
   <li><a href="../">Tags</a></li>
   <li><a href="../#html-list-tags">Lists</a></li>
   <li><ul> tag</li>
   <li><a href="#examples#">Examples</a></li>
   <li><b>Celebrities</b></li>
</ul>
</div>

Even though the style is scoped, the class attribute is included in the <ul> tag and the style selectors in case the browser ignores the scoped attribute, which most currently do. The style that inserts the bullet uses li+li in the selector, which requires at least two li elements and keeps the bullet from appearing before the first list item.

Entire list centered with aligned items and star-shaped bullets

(see <ul> tag demo above)

<div style="width: 30%; margin: 0.5em auto; text-align: center">
<style scoped="scoped">
   ul.star-shaped-bullet { margin: 0; list-style: none; text-align: left }
   ul.star-shaped-bullet li:before { content: "\2606\a0" }
</style>
<ul class="star-shaped-bullet">
   <li>Tina Fey</li>
   <li>Jane Lynch</li>
   <li>Kyra Sedgwick</li>
   <li>Andie MacDowell</li>
   <li>Laura San Giacomo</li>
   <li>Clare MacIntyre-Ross</li>
   <li>Kimberly Williams-Paisley</li>
</ul>
</div>

Again, the class attribute is included in the <ul> tag and the style selectors in case the browser ignores the scoped attribute, which most currently do. On the <div> tag, the text-align: center style is used to center the list, along with auto in the second position of the margin style, which keeps the left margin from being forced to a fixed width. The text-align: left style for the li element keeps the list items left justified. If the div element was omitted and the text-align: center style was coded on the <ul> tag then each list item would be centered and the bullets would be staggered.

Some of the HTML character codes that are useful as bullets are:

Character	Decimal	Hex	Name
▸	▸	▸	black right triangle
◆	◆	◆	black diamond
◇	◇	◇	white diamond
○	○	○	white circle
●	●	●	black circle
☆	☆	☆	white star
✓	✓	✓	check mark
✗	✗	✗	handwritten X
✤	✤	✤	4-point florette
✶	✶	✶	6-point star
❍	❍	❍	circle with shadow
❏	❏	❏	square with shadow
➔	➔	➔	right arrow
➢	➢	➢	white arrowhead
➤	➤	➤	black arrowhead

Search Engine Friendly Breadcrumb Trail Example

Some search engines, particularly Google, may include a breadcrumb trail in their search engine results if the links include microdata properties for a breadcrumb trail.

Search Engine Results

HTML <a href> Tag

Description, syntax, usage, attributes and examples of the HTML <a href> tag.

www.html-5.com › › ›

To code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:

elements with itemscope="itemscope" (a boolean attribute) and itemtype="http://data-vocabulary.org/Breadcrumb" identifying each link in the breadcrumb trail
an a href element with itemprop="url" indicating the target URL of each breadcrumb link
an element with itemprop="title" that provides the text for each breadcrumb link

<ul class="breadcrumb-trail">
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" rel="up up up" href="/">
         <span itemprop="title">HTML 5</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a class="nobr" itemprop="url" rel="up up" href="/tags/">
         <span itemprop="title">HTML Tags</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" rel="up" href="./">
         <span itemprop="title">HTML <a href> Tag</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" href="#examples#">
         <span itemprop="title">Examples</span>
      </a>
   </li>
</ul>

Changes in HTML 5 - <ul> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <ul> tag because they either have been deprecated or were never officially supported:

compact
type

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the ul element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5