- Joined
- Jan 27, 2025
- Messages
- 1
- Reaction score
- 0
Could anyone explain simply what is an <ul> element? with a closing tag
Could anyone explain simply what is an <ul> element? with a closing tag
<!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>
<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><ul></code> tag in a different way
</footer>
</body>
</html>
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.