HTML Lists

1.1 Types of Lists

Lists in HTML are a crucial tool for organizing and structuring information. They let you display items with numbers or bullet points. Let's take a closer look at each of the list elements in HTML: <ul>, <ol>, and <li>.

Unordered Lists (<ul>)

The <ul> tag is used to create unordered (bulleted) lists. List items are displayed with markers (dots, circles, squares).

Example:

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

Ordered Lists (<ol>)

The <ol> tag is used to create ordered lists. List items are displayed with numbers or letters.

Example:

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

1.2 List Elements <li>

The <li> tag is used to denote each item in a list, whether unordered or ordered. It always needs to be nested within <ul> or <ol>.

How to easily remember these tags:

• Ordered List - ordered (numbered) list
• Unordered List - unordered (bulleted) list
• List Item – list item

Attribute type

This attribute can be used within <ul> and <ol> to change the type of markers or numbering. For <ol>, you can use values like "1", "A", "a", "I", "i", and for <ul> - "disc", "circle", "square".

Example of changing the marker type for <ul>:

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

Example of changing the numbering type for <ol>:

    
      <ol type="A">
        <li>First list item</li>
        <li>Second list item</li>
      </ol>
    
  

Attribute start:

This attribute is only used with <ol> to set the starting number of the list.

For example:

    
      <ol start="5">
        <li>Fifth list item</li>
        <li>Sixth list item</li>
      </ol>
    
  

Nested Lists

Lists can be nested to create more complex structures.

Example of a nested list:

    
      <ul>
        <li>First list item</li>
          <ul type="circle">
            <li>Nested first item</li>
            <li>Nested second item</li>
          </ul>
        <li>Second list item</li>
        <li>Third list item</li>
      </ul>
    
  

1.3 Styling Lists

Lists can be styled using CSS, changing marker colors, marker types, and spacing.

Example of styling:

    
      ul.custom-list {
        list-style-type: katakana; /* Japanese syllabary */
        color: blue; /* Text color */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Japanese ordering system */
        color: green; /* Text color */
      }
    
  

    
      <ul class="custom-list">
        <li>First list item</li>
        <li>Second list item</li>
      </ul>

      <ol class="custom-list">
        <li>First list item</li>
        <li>Second list item</li>
      </ol>
    
  

So, using <ul>, <ol>, and <li> helps structure content and improve readability on web pages.

1

Task

Frontend SELF EN, level 4, lesson 1

Locked

Unordered List

Unordered List

Open

1

Task

Frontend SELF EN, level 4, lesson 1

Locked

Nested Lists

Nested Lists

Open