logo

Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll
  1. Home
  2. Articles

HTML first steps - lesson 3 - list tags ul, ol. Attributes of HTML tags.

16/04/2025, by Ivan

Lists are frequently used on websites — in menus, within text, or for any kind of enumeration. Let’s start with the most common type: the unordered list using the <ul></ul> tags.

UL List

The <ul> tag is used for unordered (bulleted) lists. Through HTML, we can also define the type of bullet marker.

Let’s update our HTML code:

<html>
  <head>
    <title>My First HTML Document</title>
  </head>
  <body>   
    <h1>My First HTML Document</h1>
    <ul>
    </ul>
  </body>
</html>

This displays only the heading because the list is empty. Let’s add items using the <li></li> tag (list item):

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

You now have a bulleted list. You can change the bullet type using the type attribute on the <ul> tag.

HTML Tag Attributes

Attributes are used to define how an HTML tag behaves — color, size, shape, and more. For <ul>, the type attribute can define the marker type: disc, circle, or square.

<ul type="square">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

You can also use type="circle" or type="disc" (the default). You can override bullet types for individual <li> items as well:

<ul type="circle">
  <li>First item</li>
  <li type="square">Second item</li>
  <li>Third item</li>
</ul>

Or make all list items different:

<ul>
  <li type="disc">First item</li>
  <li type="square">Second item</li>
  <li type="circle">Third item</li>
</ul>

OL Lists

The <ol> (ordered list) tag is used for numbered lists — often for instructions, chronology, or ranking items.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Like <ul>, <ol> also supports a type attribute, but with different values:

  1. type="A" – uppercase Latin letters (A, B, C...)
  2. type="a" – lowercase Latin letters (a, b, c...)
  3. type="I" – uppercase Roman numerals (I, II, III...)
  4. type="i" – lowercase Roman numerals (i, ii, iii...)
  5. type="1" – Arabic numerals (1, 2, 3...) — this is the default

Example with lowercase Roman numerals:

<ol type="i">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>