Html List Tags

When building a website, most websites have listed elements or items. These listed elements make identification easier. HTML has 3 list tags with other nested tags, which have different functions and help to identify items in a webpage. There are different types of HTML lists and they are:

1. Unordered list

2. Ordered list

3. Definition list

• UNORDERED LIST

This is also known as a "bulleted list". It is used to displays items in a bulleted format. This means that this list identifies "listed" items that are displayed in no particular order. The unordered list has a closing tag and an opening tag. An unordered list contains the listed items.

NOTE: The "ul" tag works together with the "li" tag to create an unordered list.

There are four types of a bulleted list:

• Disc: Listed items are marked with bullets

• Circle: Listed items are marked with circles.

• Square: Listed items are marked with boxes/squares.

• None: Listed items are not marked.

NOTE: Ensure to indicate the type of bulleted list to allow the webpage to know which list you want to make use of.

EXAMPLE OF A DISC BULLETED LIST STRUCTURE;

<ul>
    <li> Cow </li>
    <li> Goat </li>
     <li> Elephant </li>
</ul>  

EXAMPLE OF A CIRCLE BULLETED LIST INDICATED:

<ul type= "circle">
    <li> Cow </li>
    <li> Goat </li>
    <li> Elephant </li>
</ul>

NOTE: This "type" attribute is not functional in HTML5 but one can use the CSS style property to indicate a bulleted list type.

FOR EXAMPLE;

   <ul style= "list-style-type: circle;">
      <li> Cow </li>
     <li> Goat </li>
     <li> Elephant </li>
   <ul>

• ORDERED LIST

This is also known as a "numbered list" because once the ordered list tag is used, by default the listed items are numbered. The numbered list starts with the "ol tag" and the listed items are "li tags" and they both have opening and closing tags. There are 3 ways in which an ordered list can be identified;

• Normal Numbers: The listed items are numbered with numbers. (1, 2, 3)

• Roman numerals: The listed items are identified with either capital or small numerals. ( I, II, i, ii)

• Alphabets: The listed items are identified with either small or capital alphabets. ( A,B,a,b)

NOTE: One has to indicate the type of listed items to allow the browser to navigate which list you are referring to.

EXAMPLE OF NORMAL NUMBERS LIST:

<ol> 
    <li> Cow </li>
    <li> Goat </li>
    <li> Elephant </li>
 </ol>

NOTE: By default, the browser knows this is a numbered list.

EXAMPLE OF A UPPERCASE ROMAN NUMERAL LIST:

<ol type=" I"> 
   <li> Cow </li>
   <li> Goat </li>
  <li> Elephant </li>
</ol>

EXAMPLE OF A LOWER CASE ROMAN NUMERAL LIST:

<ol type="i">
   <li> Cow </li>
   <li> Goat </li>
  <li> Elephant </li>
</ol>

EXAMPLE OF UPPERCASE ALPHABET LIST:

<ol type="A">
   <li> Cow </li>
   <li> Goat </li>
  <li> Elephant </li>
</ol>

EXAMPLE OF LOWERCASE ALPHABET LIST:

<ol type="a">
   <li> Cow </li>
   <li> Goat </li>
  <li> Elephant </li>
</ol>

• Start attribute: This helps the browser know what number or alphabet the listed items are starting from.

FOR EXAMPLE:

<ol type="a" start "4">
   <li> Cow </li>
   <li> Goat </li>
  <li> Elephant </li>
</ol>

This means the listed items will start from lower case "d".

<ol type="I" start "4">
   <li> Cow </li>
   <li> Goat </li>
  <li> Elephant </li>
</ol>

This means the listed items will start from the uppercase numeral "IV"

• Reversed attribute: This indicates the reversed version of the listed items. Listed items are numbered in descending order. (5, 4, 3,2,1). This can be used in HTML5.

FOR EXAMPLE:

<ol reversed>
   <li> Cow </li>
   <li> Goat </li>
  <li> Elephant </li>
</ol>

• DEFINITION LIST This is also known as a description list because it describes items in a definition format. There are three different tags used here and they are:

• DL tag: This tag defines the description list. All other tags are nested within this tag.

• DT tag: This tag indicates or defines the term used.

• DD tag: This tag defines the term indicated in the DT tag.

FOR EXAMPLE

<dl>
   <dt> CSS </dt>

   <dd> Is a cascading style sheet</dd>

   <dt> REACT </dt>

   <dd> Is a javascript library for building user interface </dd>

</dl>

Most people prefer writing a list because it is very easy to pick out your exact point and it is more specific and outlined. These HTML list tags are essential for easily listing your items and also make it easy for the browser to identify listed items and display the specifically listed tags used.