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

Joined
Sep 4, 2022
Messages
150
Reaction score
16
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.
 
Joined
Jul 4, 2023
Messages
575
Reaction score
77
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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,249
Messages
2,571,244
Members
47,876
Latest member
Kiptechie

Latest Threads

Top