HTML List Elements

• HTML list elements allow web developers to group a set of related items in a list. There are 3 types of lists: ordered list, unordered list, and description list.

Order list

• The ordered list is denoted with the <ol> tag. It lists each item with the <li> tag. By default, it displays the items numerically, but we can change them to uppercase, upper Roman case, lowercase, or lower Roman case using the start and type attributes.

<!--Numerical (default)-->
<h3>Numerical (default)</h3>
<ol>
  <li>Bat</li>
  <li>Ball</li>
</ol>
<!--UpperCase-->
<h3>UpperCase</h3>
<ol type="A">
  <li>Bat</li>
  <li>Ball</li>
</ol>
<!--Upper Roman Case-->
<h3>Upper Roman Case</h3>
<ol type="I">
  <li>Bat</li>
  <li>Ball</li>
</ol>
<!--UpperCase-->
<h3>LowerCase</h3>
<ol type="a">
  <li>Bat</li>
  <li>Ball</li>
</ol>
<!--UpperCase-->
<h3>Lower Roman Case</h3>
<ol type="i">
  <li>Bat</li>
  <li>Ball</li>
 </ol>

Unorder List

• The unordered list is denoted with the <ul> tag. It lists each item with the <li> tag. By default, it displays the items as bullet lists, but we can change them to disc, circle, or square using the type attribute.

<!--Bullet (default)-->
<h3>Bullet (default)</h3>
<ul>
  <li>Bat</li>
  <li>Ball</li>
</ul>
<!--Disc-->
<h3>Disc</h3>
<ul type="Disc">
  <li>Bat</li>
  <li>Ball</li>
</ul>
<!--Circle-->
<h3>Circle</h3>
<ul type="Circle">
  <li>Bat</li>
  <li>Ball</li>
</ul>
<!--Square-->
<h3>Square</h3>
<ul type="Square">
  <li>Bat</li>
  <li>Ball</li>
</ul>

Description List

• The description list is denoted by the <dl> tag. Inside the⁣<dl> tag, we have the⁣<dt> tag, which defines the description list of terms or names. Inside the⁣<dt> tag, we have the⁣<dd> tag, which describes the description of the term or name.

<dl>
  <dt>Lorem10:</dt>
  <dd>
    -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut,
     consectetur?
   </dd>
   <dt>Lorem20:</dt>
   <dd>
     -Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas illo
      ullam obcaecati labore quisquam officia sequi quidem aliquid dolore
      dolorem?
    </dd>
</dl>

---

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥