In Html, we can create three type of List:
- Unordered List <ul>
- Ordered List <ol>
- Description List <dl>
Unordered List <ul>
An unordered list represents a group of items where the arrangement or order is insignificant. When incorporating an unordered list into an HTML file to exhibit items on a webpage, the following guidelines should be adhered to for successful implementation. By following these instructions, generating an unordered list can be effortlessly achieved.
To begin, the initial step involves entering the HTML code into a text editor or accessing an already existing HTML file in the text editor where we intend to generate the unordered list.
<!Doctype Html>
<Html>
<Head>
<Title>
Create Unordered list
</Title>
</Head>
<Body>
The list which is shown below is an unordered list:
</Body>
</Html>
Step 2: Next, it is necessary to position the cursor within the designated location of the <body> element where the unordered list is intended to appear. Subsequently, input the <ul> tag to initiate the creation of the unordered list.
<Body>
<ul>
</Body>
Step 3: After that, we have to define the items which we want to show as unordered on the web page. For that, we have to use the "><li> tag . So, type the opening <li> tag before typing the item. And, after typing each item we have to close the <li> tag.
<Body>
<ul>
<li> First Unordered item </li>
<li> Second Unordered item </li>
</Body>
Step 4: Once all the items have been entered, it is necessary to conclude the list by closing the corresponding tag.
<Body>
<ul>
<li> First Unordered item </li>
<li> Second Unordered item </li>
<li> Third Unordered item </li>
<li> Fourth Unordered item </li>
<li> Fifth Unordered item </li>
<li> Sixth Unordered item </li>
</ul>
</Body>
Step 5: Finally, it is necessary to save the HTML file and proceed to execute the file in a web browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Create Unordered list
</Title>
</Head>
<Body>
The list which is shown below is an unordered list:
<ul>
<li> First Unordered item </li>
<li> Second Unordered item </li>
<li> Third Unordered item </li>
<li> Fourth Unordered item </li>
<li> Fifth Unordered item </li>
<li> Sixth Unordered item </li>
</ul>
</Body>
</Html>
The result of the HTML code provided above can be observed in the screenshot displayed below:
Ordered List <ol>
To generate a numbered list in an HTML file to display the items on a webpage in a specific order, we must adhere to the following guidelines. By following these instructions, we can effortlessly produce an ordered list.
To begin, the initial step involves entering the HTML code in a text editor or accessing the current HTML file in the preferred text editor to establish the ordered list.
<!Doctype Html>
<Html>
<Head>
<Title>
Create ordered list
</Title>
</Head>
<Body>
The list which is shown below is an ordered list:
</Body>
</Html>
Step 2: Next, it is necessary to position the cursor within the designated location in the <body> tag where the ordered list is intended to be shown. Subsequently, the <ol> tag must be entered to exhibit the items in a specific order.
<Body>
<ol>
</Body>
Step 3: After that, we have to define the items which we want to show in a sequence on the web page. For that, we have to use the <li> tag. So, we have to type the opening <li> tag before typing each item. And, after typing each item we have to close the <li> tag.
<Body>
<ol>
<li> apple </li>
<li> Mango </li>
</Body>
Step 4: Once all the items have been entered, it is necessary to close the list by using the closing tag.
<Body>
<ol>
<li> apple </li>
<li> Mango </li>
<li> Pineapple </li>
<li> Orange </li>
<li> Banana </li>
</ol>
</Body>
Step 5: Finally, remember to save the HTML file and proceed to execute it in a web browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Create ordered list
</Title>
</Head>
<Body>
The list which is shown below is an ordered list:
<ol>
<li> apple </li>
<li> Mango </li>
<li> Pineapple </li>
<li> Orange </li>
<li> Banana </li>
</ol>
</Body>
</Html>
The result of the HTML code provided can be viewed in the screenshot displayed below:
Description List
A description list is a type of list that includes items along with their corresponding descriptions and definitions.
To display items and their descriptions on a webpage using HTML, we can generate a Description List by following the steps outlined below. By adhering to these guidelines, we can effectively craft a Description List.
To begin, the initial step involves entering the HTML code into a text editor or opening an already existing HTML file in the desired text editor where the description list will be crafted.
<!Doctype Html>
<Html>
<Head>
<Title>
Create Description list
</Title>
</Head>
<Body>
The list which is shown below is an description list:
</Body>
</Html>
Step 2: Next, it is necessary to position the cursor within the designated location in the <body> element where the description list should appear. Following this, the <dl> element must be entered to showcase the items along with their corresponding descriptions.
<Body>
<dl>
</Body>
Step 3: After that, we have to define the term which we want to show in a description list on the web page. For that, we have to use the <dt> tag. So, we have to type the opening <dt> tag before typing each term. And, after typing each item we have to close the <dt> tag.
<Body>
The list which is shown below is an description list:
<dl>
<dt> <b>
HTML
</b> </dt>
</Body>
Step 4: After then, we have to define the description for each term. For defining the description, we have to use the <dd> tag. So, we have to type the opening <dd> tag just after the closing tag of each term. And, after typing each description we have to close the <dd> tag.
<Body>
The list which is shown below is an description list:
<dl>
<dt> HTML </dt>
<dd>
Hyper Text Markup Language </dd>
<dt> CSS </dt>
<dd> Cascading Stle sheet </dd>
<dt> UL </dt>
<dd> Unordered List </dd>
</Body>
Step 5: After entering all the terms along with their descriptions, proceed to end the list by closing the tag.
<Body>
The list which is shown below is an description list:
<dl>
<dt> HTML </dt>
<dd>
Hyper Text Markup Language </dd>
<dt> CSS </dt>
<dd> Cascading Stle sheet </dd>
<dt> UL </dt>
<dd> Unordered List </dd>
</dl>
</Body>
Step 6: Finally, the next step involves saving the HTML file and then executing it in a web browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Create Description list
</Title>
</Head>
<Body>
The list which is shown below is an description list:
<dl>
<dt> <b>
HTML
</b> </dt>
<dd>
Hyper Text Markup Language
</dd>
<dt> <b>
CSS
</b>
</dt>
<dd>
Cascading Stle sheet
</dd>
<dt> <b>
UL
</b> </dt>
<dd>
Unordered List
</dd>
<dt> <b>
OL
</b>
</dt>
<dd>
Ordered List
</dd>
</dl>
</Body>
</Html>
The outcome of the HTML code displayed above can be observed in the screenshot provided below: