Related post

Inheritance in Java programming with example | Zhullyblog

Posted by on
0

HTML list : How to create a list in HTML - Zhullyblog

Posted by on

Hello, welcome to zhullyblog. If this is your first time here , please Subscribe to Zhullyblog by Email to get latest tutorial.

How to create a list in HTML

List are compilation or enumeration of a set of words. A list can be used to enumerate set of words, things etc. You could be told to list the generation of computer, list of programming language, list of frameworks etc.


This information can be displayed as a list which can be represented in different ways.

There are simply 4 different types of list, they are :
• Ordered list
• Unordered list
• Nested list
• Description list

 • Ordered list

As the name implies, an ordered list is used to create a list in a specific order. For example you want to list name of your course mate in a particular order or list the procedure to do something.

• Unordered list

This is used to create a list in no order. It's just like making a list without order.

• Nested list

A nested list is a list in which one or more of the data has sublist within it.

• Description list

This is a list of items with there description. This is when you lecturer says list and explain. You know that you will list then give further information of the item listed.


Now let's go to the root of list.



HTML Ordered List

An ordered list is created using <ol> element followed by <li> element.
<ol> start for ordered list and the <li> stands for list item.

Here is an example.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a table</title>
</head>
<body>
  <h1>List of fruits</h1>
  <ol>
    <li>Orange</li>
    <li>Mango</li>
    <li>Pineapple</li>
    <li>Apple</li>
  </ol>
</body>
</html>


Output
HTML ordered list
Alright as you can see, by default an ordered list start with 1. But you can change it using the start attribute.

Exercise: Create a table , let the list start with number 5. Please make a comment if you got this. If you have issue, please read more about attribute.



Unordered list

An Unordered list is creating using <ul> element and each item is listed using the <li> element.

Here is an example.



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a table</title>
</head>
<body>
  <h1>List of fruits</h1>
  <ul>
    <li>Orange</li>
    <li>Mango</li>
    <li>Pineapple</li>
    <li>Apple</li>
  </ul>
</body>
</html>



Output
Unordered list in HTML



HTML Nested list

A nested list is a list that has another list within it. This list is used when a particular data in the listed item has another sublist.

Here is an example



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a table</title>
</head>
<body>
  <h1>Classes of food</h1>
  <ul>
    <li>Carbohydrates</li>
    <ul>
      <li>Rice</li>
      <li>Yam</li>
    </ul>
    <li>Protein</li>
    <ul>
      <li>Beans</li>
      <li>Plamtain</li>
    </ul>
  </ul>
</body>
</html>



Output
HTML nested list


HTML Description list

A description list is a list of items that has a description of the item. To create a description list, you use <dl> element and then <dt> then <dd>.

Here is an example.



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a table</title>
</head>
<body>
  <dl>
    <dt>Computer</dt>
    <dd>A computer is an electronic blah blah blah blah blah blah blah</dd>
  </dl>
  <dl>
    <dt>Data structure</dt>
    <dd>Data structure is blah blah blah blah blah blah blah blah blah blah blah blah blah</dd>
  </dl>
</body>
</html>


Output
Description list in HTML

That's all with list in HTML. Check other tutorials to learn more.

Comments

Post a Comment