UL

ul is an HTML tag that is used to create an unordered list. This tag is useful for creating bulleted lists and other structured list types. Since HTML should be used to structure a document rather than add stylistic elements, the ul tag should not simply be used to indent text.

See also: dd, dir, dl, dt, li, menu, ol

Attributes

The ul tag does not have any required HTML attributes. It does, however have numerous allowable attributes. Some of the most commonly used attributes are now deprecated in favor of Cascading Style Sheets.

• Deprecated Attributes
  • compact (type: Custom) - specifies that the list should be displayed in a compact manner; it is up to the user agent to determine what this means and how to do it
  • type (type: ULStyle) - determines which ordering style to use ("disc" is usually a filled in circle, "circle" is usually an open circle, and "square" is a filled in square)
     
• HTML Core Attributes
  • class (type: CDATA) - space separated list of classes
  • id (type: ID) - document-wide unique id
  • style (type: Style Sheet) - associated style information
  • title (type: Text) - advisory title/amplification; this information is usually displayed through tooltips
     
• HTML International Attributes (I18N)
  • dir (type: Custom) - specifies the direction of weak or neutral text; valid values include ltr (left to right) or rtl (right to left)
  • lang (type: Custom) - specifies the Language Code of the language used in the text
     
• HTML Event Attributes
  • onclick (type: Script) - a pointer button was clicked
  • ondblclick (type: Script) - a pointer button was double clicked
  • onkeydown (type: Script) - a key was pressed down
  • onkeypress (type: Script) - a key was pressed and released
  • onkeyup (type: Script) - a key was released
  • onmousedown (type: Script) - a pointer button was pressed down
  • onmousemove (type: Script) - a pointer was moved within
  • onmouseout (type: Script) - a pointer was moved away
  • onmouseover (type: Script) - a pointer was moved onto
  • onmouseup (type: Script) - a pointer button was released

Usage

In its simplest form, to use the ul tag simply place opening and closing HTML tags around a series of list items (which use the li tag). However, it can be a little tricky when dealing with nested lists. If you have lists inside of lists, be sure that you enclose each nested list entirely within an li tag. For example:

<ul>
  <li>Top Level A</li>
  <li>Top Level B
    <ul>
      <li>Nested Level 1A</li>
      <li>Nested Level 1B
        <ul>
          <li>Nested Level 2A</li>
          <li>Nested Level 2B</li>
          <li>Nested Level 2C</li>
        </ul>
      </li>
      <li>Nested Level 1C</li>
    </ul>
  <li>Top Level C</li>
</ul>

See also: this and this.

Everything2 Support?

E2 does provide limited support for the ul tag, but it does not allow the use of any of its HTML attributes. Below is how your browser displays the example above here on Everything2:

• Top Level A
• Top Level B
  • Nested Level 1A
  • Nested Level 1B
    • Nested Level 2A
    • Nested Level 2B
    • Nested Level 2C
  • Nested Level 1C
• Top Level C

Notice that even though the "type" attribute is not used, the nested lists use a different bullet style than used in the levels above. If you would like to use this tag with any of its attributes or with style sheets, you can do so in your Notelet Nodelet.

Common Browser Implementations*

Most web browsers support this tag, as it has been around since HTML 2.0. Most browsers will display the unordered lists in the same general manner though you may see minor differences between platforms, operating systems, and browsers.

Previous HTML Tag: u
Next HTML Tag: var
See Also: HTML tags and HTML attributes

* Please feel free to send me information about how other browsers implement this tag.

5.6.1. Unordered List: UL, LI

   The <UL> represents a list of items -- typically rendered as a
   bulleted list.

   The content of a <UL> element is a sequence of <LI> elements.
   For example:

    <UL>
    <LI>First list item
    <LI>Second list item
     <p>second paragraph of second item
    <LI>Third list item
    </UL>

The example text renders as:

• First list item
• Second list item

  second paragraph of second item

• Third list item

The <UL> list is one example of the three lists available within HTML:

• Unordered information
• Ordered information
• Definitions

Such a list must contain one or more list items (designated by the <li> tag). While it does not need to be closed (as of the HTML 4.01 Specification), it is helpful for XHTML and makes some parsers much happier when this is done.

For the <ul>, the start (<ul>) and end (</ul>) tags are both required. For list items, the start tag (<li>) is required, but the end tag is optional.

In unrestricted html (not E2), there are several attributes that may be used within the <ul> tag:

type = style-information

Now deprecated. Values may be one of 'disc', 'square' and 'circle'. The correct way to do this now is with the style sheet.

compact

Now deprecated. Attempt to render the list in a more compact format.

As wonderful as the <ul> tag is, it can also be abused in indenting text. The correct way to do this is to use the <blockquote> tag. Likewise, the use of the <li> tag outside of a <ul> or <ol> list is invalid, even though it does give the bullet. Please don't do this.