HTML <ul> Tag for a Bulleted List


ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 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.)

PDF mobile

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

   ... flow content expected ...
         ... flow content ...
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.

  1. Code a ul element inside an element where flow content is allowed.
  2. 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.
  3. Inside the ul element, between the <ul> starting tag and the </ul> ending tag, code the li elements for the list items.
  4. 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)
<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" }
<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>

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"> { margin: 0; list-style: none; text-align: left } li:before { content: "\2606\a0" }
<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>

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:

&#9656;&#x25b8;black right triangle
&#9670;&#x25c6;black diamond
&#9671;&#x25c7;white diamond
&#9675;&#x25cb;white circle
&#9679;&#x25cf;black circle
&#9734;&#x2606;white star
&#10003;&#x2713;check mark
&#10007;&#x2717;handwritten X
&#10020;&#x2724;4-point florette
&#10038;&#x2736;6-point star
&#10061;&#x274d;circle with shadow
&#10063;&#x274f;square with shadow
&#10132;&#x2794;right arrow
&#10146;&#x27a2;white arrowhead
&#10148;&#x27a4;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. › HTML TagsHTML <a href> TagExamples

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

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

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