Scribd
Upload
11 views

HTML List Styles

HTML has different list styles that can be used to organize and display content in an ordered or unordered format. The main list styles are: 1) Unordered lists use <ul> tags and <li> tags to display list items with bullet points. 2) Ordered lists use <ol> tags and <li> tags to display list items in a numbered order. 3) Description lists use <dl> tags to contain <dt> term tags and <dd> description tags to define terms and their descriptions.

Uploaded by

aungkyawmyatsep
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

HTML List Styles

HTML has different list styles that can be used to organize and display content in an ordered or unordered format. The main list styles are: 1) Unordered lists use <ul> tags and <li> tags to display list items with bullet points. 2) Ordered lists use <ol> tags and <li> tags to display list items in a numbered order. 3) Description lists use <dl> tags to contain <dt> term tags and <dd> description tags to define terms and their descriptions.

Uploaded by

aungkyawmyatsep
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML List Styles

Introduction to HTML List Styles


 Lists are the common requirement to place the data in a formatted manner, like if you have

made a webpage where you need to display the content of the pizza menu of a hotel, then

likely it would be an HTML list style that shall appear in a clear and discrete manner.

 Other cases can be where you are having a set of ranks of students who appeared among top

performers of the class; in this context, the requirement will be to place the rank 1 student at

the top and others below it in increasing order of ranking, for that we need to format this into a

sorted list.

 Another type can be custom lists which you can make using Javascript and Html together,

where the dynamics in the objects can be set up too, and the lists can take some customized

outlook.

Different List Styles in HTML


1) Unordered Lists
Here the order of display of the content is not something that we need to care about; just we need to

place the things well, such that the HTML page makes them placed up in front of the user in a well-

formatted and clear way.

There are two tags in HTML language that handle these lists, and likely you can make a navigation bar

and vertical sidebar using these tags only.

1. <ul>: this represents the unordered list; whenever we need not rank anything or look to place it

in random order, this tag is incorporated.

2. <li> : this represents the list items, the set of items to be placed in the unordered list i.e. under

the <ul> tag appear inside the <li> tag. The items marked with these markups will be
automatically carrying some bullets or circles in their beginning; these are the basic HTML

features.

Now let us see a piece of code for <ul> and <li> based unordered lists and how the HTML page will

look; once you execute that file, note that you can write in an editor like notepad and save the file with

“.html” extension; hence it can be opened with any of the browsers.

Example Snippet –

Code:

<html>
<head> HTML Lists </head>
<body>
<h2> list of pizzas <h2>
<ul>
<li style="color:red"> farmhouse </li>
<li style="color:green"> peppy paneer </li>
<li style="color:blue"> onion pizza </li>
</ul>
</body>
</html>

Output:

2) Ordered Lists
Now will see a case where we are looking to place the students in an ordered manner based on their

ranks in class, and this will appear in a sorted manner by using the <ol> tag of HTML, and it will be

containing multiple <li> tags, those will have the list items in it.

<ol>: this tag is used to set up an ordered list, and all elements are placed inside it, within <li> tags.

<li> tag has been explained above.

For this case, let’s see an example, too, and you need to save this just like done above.

Code:
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol>
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>
Output:-

Now let’s see some variants of these where we can customize or well format these lists only by adding

some CSS properties into the HTML page, which will make the appearance of the page look better.

1. In the unordered lists, we have the following properties that can be given –

2. List-style-type – can be disc, circle, square or none. So the circles you saw in unordered list

items will not appear if we choose none here, let’s do it.


Example –

Code:

<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ul style="list-style-type:none">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ul>
</body>
</html>

Output/ HTML page –

So, the circle bullets no longer exist; you can customize them with the above-provided options.

Similarly, there is a provision to choose whether the order list values will appear with numerals or

Romans or alphabets in the order lists.

You can set the property type in <ol> tag for the same, and the type can take the following values.

Type: “1”,” A”,” a”,” I”,” i.”


Let’s see Example Code for the same –

Code:

<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "i">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>

Output/ HTML page –

Similarly, we also have description lists where we can define the item against which we need to place a

description; let’s say you are making a page where you need to place some definitions against some

keywords, then you can choose the description lists.

Tags
We have the following tags to handle the same.

<dl> – this tag defines the description list


<dt> – this tag will give the description term

<dd> – this tag carries the description of each term

Example –

Code:

<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<dl>
<dt style="color:red"> Docker </dt>
<dd> -: this is used to make environment portable application containers </dd>
<br>
<dt style="color:green"> Kubernetes </dt>
<dd> -: this is an orchestrator for those containers make by docker </dd>
</dl>
</body>
</html>

Output/HTML page –

You can also define the start property in the ordered lists in <ol> tag, which tells from where the count

starts. Let’s see an example of the same –


Code:

<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "1" start="10">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</>
</body>
</html>

Output:

You might also like