Could anyone explain simply what is an <ul> element? with a closing tag

TypicalJoe · Feb 4, 2025

Could anyone explain simply what is an <ul> element? with a closing tag

Saul H. · Feb 4, 2025

A ul element is simply an un-ordered list. The W3Schools website has some superb tutorials on it's usage and applications.

FResher · Feb 8, 2025

ul tag : un-ordered list.

unordered , the ul tag will provide an indentation when you use it.
without 'chip' or 'draw' before the line

HTML:

<!DOCTYPE html>
<html>

    <head></head>

    <body>
        
        <ul>hello</ul>
        

        <ul>hello again</ul>


        <li>try 11111</li>
        <li>item 22222</li>
        <li>item 33333</li>
        <li>item 44444</li>


        <ul>

            <li>First li between ul</li>
            <li>item 55555</li>
            <li>item 66666</li>
            <li>item 77777</li>

        </ul>

    </body>
    
</html>

copy paste this one in a file, then 'open on your browser.
you'll get where ul is active.

VBService · Feb 8, 2025

The <ul> tag is not only used for text-based lists but can also be utilized to structure other elements, like in the example belowe of the TODO list. It is a flexible HTML element that helps in organizing content, making it more structured and accessible. One of its most popular uses is for creating navigation menus, where <ul> is commonly used to group links in a well-structured manner.

HTML:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO List - ul tag</title>

    <style>
      @import url("https://fonts.googleapis.com/css2?family=PT+Mono&display=swap");

      * {
        box-sizing: border-box;
      }
      :root {
        color-scheme: light dark;
      }
      body {
        background-color: light-dark(#f6f1e9, #191825);
        color: light-dark(#191825, #f6f1e9);
        font-family: "PT Mono", monospace;
        text-align: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        container: main / inline-size;
      }
      header {
        margin: 2rem;
        font-size: clamp(2rem, 3vw, 5.5rem);
        font-weight: 700;
        animation: 1.5s fadeInUp;
        text-wrap: balance;
      }
      main {
        width: 50%;
        background-color: light-dark(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.4));
        border-radius: 1rem;
        padding: 1rem;
        margin: 0 auto;
        margin-top: 20px;
        box-shadow: 0px 14px 33px 9px rgba(66, 68, 90, 1);
        animation: fadeShadow 4s ease-in-out;
      }
      .fadein {
        animation: fadeInUp 2s forwards;
      }
      .shadow {
        animation: shadow 2s infinite;
      }
      main p {
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 1px;
        margin-bottom: 20px;
      }
      main ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        text-align: center;
      }
      main ul li {
        margin: 5px 0;
        padding: 6px;
      }
      footer {
        margin-top: 2rem;
        padding: 1rem;
        letter-spacing: 2px;
        opacity: 0;
        animation: fadeIn 1s ease-in-out 3s forwards;
        font-size: clamp(0.8rem, 1.3vw, 3rem);
        text-wrap: balance;
      }
      .task-box {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.85em;
        height: 1.85em;
        border: 0.15em solid currentColor;
        border-radius: 0.15em;
        display: grid;
        place-content: center;
        cursor: pointer;
      }
      .task-box::before {
        content: "";
        width: 0.85em;
        height: 0.85em;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em currentColor;
        background-color: currentColor;
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      }
      .task-box:checked::before {
        transform: scale(1);
      }
      .task-box:focus,
      .new-task:focus {
        outline: max(2px, 0.15em) solid currentColor;
        outline-offset: max(2px, 0.15em);
      }
      .new-task {
        background-color: black;
        border: 2px solid currentColor;
        border-radius: 5px;
        height: 30px;
        width: 100%;
        padding-left: 5px;
        color: currentColor;
        font-family: "PT Mono", monospace;
        font-size: 20px;
        text-decoration: line-through;
        text-decoration-color: transparent;
        transition: all 0.2s ease-out 0.5ms;
      }
      input:checked + label .new-task:not(:placeholder-shown) {
        text-decoration-color: #06d001;
        border: 2px solid #06d001;
      }
      .task {
        align-items: center;
        justify-content: center;
        display: grid;
        grid-template-columns: 1em auto;
        gap: 1em;
      }
      .new-task:hover {
        box-shadow: 0px 0px 15px 2px rgb(99, 101, 131);
      }
      input:checked + label .new-task:not(:placeholder-shown):hover {
        box-shadow: 0px 0px 15px 2px rgb(65, 180, 84);
      }
      .task label {
        margin-left: 10px;
      }

      @keyframes fadeInUp {
        0% {
          transform: translateY(20%);
          opacity: 0;
        }
        100% {
          transform: translateY(0%);
          opacity: 1;
        }
      }

      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      @keyframes fadeShadow {
        0% {
          opacity: 0;
          box-shadow: 0px 14px 33px 9px rgba(66, 68, 90, 1);
        }
        50% {
          opacity: 1;
          box-shadow: 0px 14px 33px 20px rgb(99, 101, 131);
        }
        100% {
          opacity: 1;
          box-shadow: 0px 14px 33px 9px rgba(66, 68, 90, 1);
        }
      }
    </style>
  </head>
  <body>
    <header>TO-DO list</header>
    <main>
      <p>Tasks</p>
      <ul>
        <li class="task">
          <input type="checkbox" class="task-box" id="task-1"/>
          <label for="task-1">
            <input type="text" class="new-task" placeholder="" name="Task 1"/>
          </label>
        </li>
        <li class="task">
          <input type="checkbox" class="task-box" id="task-2"/>
          <label for="task-2">
            <input type="text" class="new-task" placeholder="" name="Task 2"/>
          </label>
        </li>
        <li class="task">
          <input type="checkbox" class="task-box" id="task-3"/>
          <label for="task-3">
            <input type="text" class="new-task" placeholder="" name="Task 3"/>
          </label>
        </li>
        <li class="task">
          <input type="checkbox" class="task-box" id="task-4"/>
          <label for="task-4">
            <input type="text" class="new-task" placeholder="" name="Task 4"/>
          </label>
        </li>
        <li class="task">
          <input type="checkbox" class="task-box" id="task-5"/>
          <label for="task-5">
            <input type="text" class="new-task" placeholder="" name="Task 5"/>
          </label>
        </li>
        <li class="task">
          <input type="checkbox" class="task-box" id="task-6"/>
          <label for="task-6">
            <input type="text" class="new-task" placeholder="" name="Task 6"/>
          </label>
        </li>
      </ul>
    </main>
    <footer>
      example using <code>&lt;ul&gt;</code> tag in a different way
    </footer>
  </body>
</html>

bangalorewebguru · Mar 13, 2025

The <ul> (unordered list) HTML element is used to create a list of items where the order does not matter. Each item within this list is typically marked with a bullet point and is defined using the <li> (list item) tag. The <ul> element must have both opening <ul> and closing </ul> tags to properly encapsulate the list items.

Example:

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

In this example, the <ul> element contains three <li> elements, each representing an item in the list. This structure is commonly used to display lists where the sequence of items is not significant.

VBService · Mar 13, 2025

FResher said:
unordered , the ul tag will provide an indentation when you use it.
without 'chip' or 'draw' before the line

HTML:

<!DOCTYPE html> <html> <head></head> <body> <ul>hello</ul> <ul>hello again</ul> <li>try 11111</li> <li>item 22222</li> <li>item 33333</li> <li>item 44444</li> <ul> <li>First li between ul</li> <li>item 55555</li> <li>item 66666</li> <li>item 77777</li> </ul> </body> </html>

No, this HTML code is incorrect because you have <ul> (unordered list) elements containing direct text instead of <li> (list item) elements.

Here is the corrected version:

HTML:

<ul>
  <li>hello</li>
</ul>

<ul>
  <li>hello again</li>
</ul>

<ul>
  <li>try 11111</li>
  <li>item 22222</li>
  <li>item 33333</li>
  <li>item 44444</li>
</ul>

<ul>
  <li>First li between ul</li>
  <li>item 55555</li>
  <li>item 66666</li>
  <li>item 77777</li>
</ul>

Each <ul> should contain only <li> elements. I removed any direct text inside <ul>.
Moved standalone <li> elements into appropriate <ul> lists.

Now, the code is valid HTML.

FResher said:
ul tag will provide an indentation when you use it.
without 'chip' or 'draw' before the line

only in this way

Code:

<ul>
  <li>Main item 1</li>
  <li>Main item 2
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Main item 3</li>
</ul>

[ List Style (CSS) Recipes ]

Problems with css menu options	2	Nov 19, 2025
Please explain: #define MOVE 0x05	1	Jun 4, 2023
How to properly insert a landing page within same container beneath an image element?	1	Oct 6, 2024
Centering picture element for larger screen sizes	2	Sep 21, 2023
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
What am I doing wrong?	1	Aug 17, 2024
Difficulties with the addition of an accordion	0	Feb 6, 2024
Changing string value that is an element of a list	3	Feb 10, 2025

Could anyone explain simply what is an <ul> element? with a closing tag

TypicalJoe

Saul H.

FResher

VBService

bangalorewebguru

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads