What is HTML List? What is it used for?

Hello guys,

You are welcome in our HTML series,

In the last segment, we learned the tables in HTML.

How can we create tables in html?

How can we define rows, header, and enter data using tr, th and td tags?

After that, we also used two attributes rowspan and colspan to merge the rows and columns.

I hope you all tried the examples, performed the practical.

If any error occurred while performing the practical, you can let us know at forum.learnvern.com.

Based on the error, we will try to revert to you with the solutions as soon as possible.

The topic today is HTML List.

What is an html list?

You must have seen whenever you go shopping in a supermarket or somewhere else, the elders or the mothers prepare a list of what to bring while shopping.

It is like numbered things that we need to purchase.

So, whenever we need to buy any necessary stuff, we prepare a list so that we do not forget anything.

Similarly, in HTML we do the same.

So, how can we create a list in HTML & how can we mention things in a numbered manner, one after the other

This is basically called a list.

If we see the definition of the list.

The list describes some information in a proper or one by one manner.

One or more things can be added to a list which means, it can contain one or more elements.

Mostly if it's more than one element, we define it as a list.

There are a total of three ways to define a list in HTML.

The first way is the ordered or the numbered list (ol), ordered means, whenever a list is created, it doesn't have to be a numbered one,

At times we create a list by adding checkboxes or checkmarks.

So, a listing in which numbers are added is called numbered or ordered lists because they come in an order.

Now,

The list in which numbers aren't included are called unordered or bulleted lists or denoted as ul.

We call it a bulleted list because we do not use numbers to show it, but dots, circles etc.

The last is the description or the definition list.

In the index of a book usually, numbers are given, but along with the numbers the headings are mentioned like chapter 1.

And if there are any sub-topics in the chapter, they are written with a space.

So, an encyclopedia type list is called a description or a definition list.

We will check them with the help of an example so that it can get clear.

So, we saw that there are a total of three types of lists available in HTML.

Ordered list, which is also called a numbered list.

Unordered lists are bulleted lists and don't contain numbers.

And the last is the description or definition list that looks like an encyclopedia or an index.

So, first, we will see the example of the ordered list or the numbered list in which the numbers are marked by default.

This is the way to write the ordered list.

The ordered list always starts with the ol tag, O stands for order & L stands for List.

If we define an ordered list, we will close it within the ol and /ol tag.

I repeat!

We will enclose the ordered list within the ol and /ol tag.

In the last segment, when we created a table, we enclosed it within the table tag, table tag open & table tag close & in that, we placed the content of the table.

Similarly,

If we place an ordered list, the content will come within the ol and the /ol tag.

Now, the content of the list will be inside the li tag, li stands for List.

If I'm using a li tag,

I can use multiple li tags.

The number of items in a list can be added by using this li tag one after the other.

This is called the listing.

Let us see this with the help of an example so that we can understand it better.

So firstly, I will open the editor.

I am closing the last program of the table.

And adding a new HTML program.

As soon as I type HTML,

You can see the structure of the HTML (head, body etc.) automatically gets inserted here.

This is a facility of using sublime text, that when Entered HTML the complete format of the program got inserted.

This happened because I selected Html here.

If I would have used any other language, the sublime text will provide me with the format for that.

Currently, just by typing HTML, the structure is inserted.

As this is the example of listing, we will insert "Example of List" in the title tag.

Now, I am saving it with the name of list.html.

So, this is an example of a list.

Now we'll come inside the body.

The first example is the ordered list.

So, I will start it with ol, ol stands for an ordered list.

I will include Li inside it.

The sun signs are given in the example, so we will use the same.

Aries, bingo, Leo and Oracle.

So, it's like Aries, bingo, Leo, oracle.

Save

As soon as I save it, I will run the program.

That is the program, list.html.

It is giving me the output like this upon running the program.

The 1,2,3,4 are added by default & we didn't add 1 2 3 4 & only added the ol (ordered list) tag.

So, here we get it in the order of 1 2 3 4.

So, this is the ordered list.

Now, we want to change these 1 2 3 4 into some other numbers, let us say I need Roman letters.

The facilities are available in that case as types.

Type is an attribute through which we can change the type of numbering in the list.

1 2 3 4 will be by default.

If I want to change it and give Roman numbers, I can do that also.

For that,

Inside the ol tag, I will add type and write I in it.

I stand for the Roman letters.

When I run it, the numbers change.

This represents that we can change the numbers as per our needs and requirements.

Default is 1 2 3 4 in the number system & we can change them to Roman letters.

If I want the small Roman letters, I will type small I and reload.

The numbers will turn into small Roman letters.

Apart from that capital "A" and small a are also available.

Capital A will give the output in A B C D.

And if I apply small "a" the numbering will be in small abcd.

As it is the ordered list, the output is in order in small abcd and capital ABCD.

We can prepare an ordered list according to our requirements.

So that was the example of the ordered list.

Let me add a heading H1, as ordered list & I will keep it as the default 1 currently.

This is the listing.

The second example is the unordered list or bulleted list.

A list that doesn't start with a number but with some icons.

For that, we will do is,

The tag for defining an unordered list is ul.

Ul is the most commonly used listing item whenever we need to create a navigation bar or menu on a website.

The menu is also a list where we add more than one menu in order.

So, as we do not create menus like

1 home

2 service

3 about us

But we usually use, home, service, about us, contact us & that is an unordered list.

So, to generate it we use the ul, unordered listing technique.

Let us perform this with an example.

The tag used for creating the unordered list is ul.

Firstly, we will give the heading "unordered list".

Save

Now I need to write ul, ul stands for unordered list.

And I will copy the contents of the list from above.

As of now, I didn't give any type to the list.

So let us see which is the default type for the unordered list.

The default type for the unordered list is the bulleted circle, & the list is provided with a bulleted circle here.

The contents we typed in the list item or li is provided with a bulleted circle here.

Here, in a ul or unordered list, we have different types available for inserting different items.

The first is the disc item, firstly we will use this.

The disc is the default icon,

So, when I am reloading, nothing is getting changed.

That means this bullet filled with black color is called the disc icon.

The next icon is the circle,

So, let's change this with the circle.

So here, it will be provided in the form of a circle.

After that it is square.

So, we will change the circle to a square.

The empty circle changed to a filled black square.

The last is the none.

As we have seen, the menu of the website (home, about us, service etc.) does not have any bullet list.

So, here the none type icon is used.

When we use none, nothing like a filled circle, empty circle or square is available in the list.

This means that none stands for nothing.

Let us remove the type from here,

Let us write a disc for the example purpose.

So, this is the unordered list, first was the ordered list in which we can use any numbering system.

The second is the unordered list in which we can use icons.

The last is the description or the definition list.

As I told you earlier,

Whenever we need to prepare a list like an index of a book, encyclopedia or a dictionary.

In that case, we can use the description or definition list.

In both cases, the tag is dl.

Now, if we see the example, there are two things

The definition list starts with dl.

As seen earlier, the ordered list starts with ol, the unordered list starts with ul & this description list starts with dl.

There are two things in the dl tag.

One is the dd & the second is the dt.

Here, with the help of dt and dd we add header and data.

Now, the question that arises is what is dt and dd.

As the dl is a description list similarly, the dt is a data term.

The dt stands for data term & dd stands for data definition.

So, there are three things here: dl (a description list), dt (data term) and dd (data definition).

As we saw in the table,

In a table, there is only one header tag and multiple sub-tags, (like td was multiple in number, but th can be defined once because it is the header of the table).

Similarly,

If we need to create this type of structure, we will use only 1 dt but multiple dd.

When we jump to the next topic, we use its dt and multiple dd.

Let us understand this with the help of an example to be clearer.

So here we have taken HTML inside dt & inside dd, we have described the language.

So let us go to the example,

Definition list.

dl

Inside dl, the first was the data term dt.

Inside dt, I have written HTML & we are describing it using dd.

So "HTML is a markup language" will be written inside it.

Then, the second dt

Inside dt, we will take JAVA.

In its definition,

We will write, "JAVA is a programming language".

After that, we will take another dt & we will take SQL

inside it.

Inside its dd,

We will add "SQL is a scripting language".

Let's save and see how the output will be.

As you can see,

Inside, the definition list

The first dt is "HTML is a markup language".

JAVA: Java is a programming language.

SQL: SQL is a scripting language.

So here,

Whatever we wrote inside the data term is shown here as a header & the thing we wrote in the dd (definition) for the definition of the data are shown here.

So dt will be shown above & after leaving some space, the content will show.

So, as I said,

The header in a table comes only once after that, the thing shown multiple times is the data.

If I want to do the same and need to write more about HTML, just like "html is a markup language".

I write "New version of Html is HTML 5" and again if I add "New tags introduced are video and audio".

Save and run.

As you can see, the new dd I added is added with some spacing & it's like sub-content or subheadings in the Html.

So, HTML works as a header portion & the rest portion describes the content about it.

So, this was the example of the definition list and how we can create an index structure.

So, we learned a total of three lists.

First is the ordered list, second is the unordered list & third is the definition list.

You can use any listing method based on the requirements of the web page or the website.

Now, we will take an example, in which we will try to merge all these three.

There are possibilities when we create a list or a listing item, we might need to nest the listings.

That means we might need to nest one listing in another.

Here,

The ordered list provides the numbers, but the unordered list doesn't provide the numbers.

So, if I want to use bullets and numbers both in an ordered list, in that case, I will combine the ordered and unordered list.

We will this with an example,

Let's give it the name "Nesting of the list".

Let's say first I take the ol

Inside the ol, we will take an example.

Let us say we took the example of sun signs, but now I want to take the HTML, the one where we described it.

I will write the first list inside that I will add HTML.

I will take the second as Java and the third as SQL.

This got executed something like this.

Nesting of the list, then html, Java & SQL.

No one will want to add subtopics inside it.

For that, I will add a "ul" inside the li.

For example,

I will press enter & inside that ul, I will write the subtopics for HTML.

If this is the ul, here is the li.

HTML 2.1 inside the li

After that HTML 4.1

And the one we are using currently is HTML 5.

So, I have added three versions of HTML inside the unordered list.

Let us save & see the output.

So here is the nesting of the list.

The first is the HTML for which we have the sub list with HTML 2.1, HTML 4.1 & HTML 5.

Same way, if we want to add any sub-list for JAVA.

Again, adding ul,

 "JAVA is a programming language " inside the li.

Reload.

Here, the "JAVA is a programming language " is shown inside JAVA.

After that, if I want to add the same thing to SQL.

So, I can add, ul & li

SQL is a scripting language.

So here, we have performed the nesting of lists.

Under which the first is the numbered list that is

1. HTML
2. JAVA

And

3. SQL

And secondly, the list we added the sub list inside the unordered list.

Where we don't need numbering and shown them with bullets & we can say it is added as a ul or bulleted list.

So the nesting of lists means we can add a list inside another list.

So, we added a ul inside li and started with ol.

That means we can add listings under listings.

So that was the nesting of lists.

In today's topic, we learned a total of three things.

The first is the ordered lists.

The second is an unordered list & the third is a definition list.

And combining these, we also learned the nesting of lists and how it is performed.

Today's session can be considered complex because the listing is used at multiple places while creating a website other than creating menus.

There are places where the listing is a mandatory requirement.

We can achieve so many things in web development using the lists.

So,

I request you try and run all the four examples we learned today: unordered lists, ordered lists, definition lists and nesting of lists.

If you can run the program, it is well and good, but if you face any difficulty or issues while running it.

You can let us know at forum.learnvern.com.

Soon as we accept the queries, we will try to revert back with the solutions.

In the next segment, we will learn a useful element of HTML, which is the FORM.

Thank you