Pages of websites consist of many elements - tables, pictures, links, media files, lists. One of the most popular elements is just the list. With its help, you can organize information, submit it in a more concise and understandable way, and facilitate perception. That is why you should know how to make a list in HTML and what types of lists are. And also learn how to set the necessary parameters.
List Types
First, we’ll highlight the main types of lists with which we can work. These are ordered, unordered and drop down lists.
The first allows you to number the contents using numbers and letters. The second one is a usual enumeration of certain items, the third one allows you to select the desired item from the entire list.
Almost every one of them can contain a list in a list. HTML makes it easy to create complex lists of information in a very short time.
First of all, decide which of the lists you need, and then proceed to create it. Below we will consider all three types of lists and find out exactly how to create them and what parameters they have.
Ordered list
Let's start with the most used and widespread list - an ordered one. In this case, the transfer of certain information is in a certain order, and each of the elements is numbered. For example, a class list:
- Ivanov.
- Petrov.
- Sidorov, etc.
Such a list is specified using paired <ol> and </ol> tags. It starts with the opening <ol> tag, and ends with the </ol> tag. Each new list item begins with a paired <li> tag and ends with a closing </li>.
Now you know how to make an HTML list. As you can see, it’s enough to remember only two tags.
A bit about the parameters of the <ol> tag - type and start.
The first sets the type of numbering - alphanumeric. It can take the following parameters: A, a, I, i, 1.
The first two values are set by Roman letters - upper and lower case, the second two - by large and small Roman numerals, the last value is used if you want the list to be numbered in Arabic numerals.
It is worth noting that in the lists by default, the numbering is always set using Arabic numbers.
The second parameter - start - sets the number from which the numbering of the list begins.
Let’s also say a few words about the parameters of the <li> tag. He also has two of them. The first parameter value can change the numbering order. Moreover, it will be changed until this parameter is registered again (or until the end of the entire list).
The second parameter - type - will help change the numbering type for this item. Quite often there is a variant of a complex list. For example, take an approximate plan of composition :
- Introduction.
- Main part.
a) the opinion of others;
c) my opinion;
c) evidence. - Conclusions.
Creating such a list in an HTML list is quite simple. It is enough to write one main list, and then create in the right place the second of the sub-items using a different numbering. Here is a sample code based on our list:
- <ol type = "1">.
- <li> 1. Introduction </li>.
- <li> 2. The main part </li>.
- </ ol type = "A">
- <li> the opinions of others </li>.
- <li> my opinion </li>.
- <li> evidence </li>.
- </ol>.
- <li> 3. Conclusions </li>.
- </ol>.
Unordered list
The second kind of list is unordered. It does not matter in which order the elements go. It can be a list of anything - purchases, guests, books, etc.
This list is set using the paired tag <ul> and </ul>. Moreover, each new element begins with the same paired tag <li> </li>.
It has only one parameter - type, with which the marker type is set. The marker can be a circle - filled or not, as well as a filled square. So, an empty circle means disc, a filled circle means circle. The square is set using square.
There is also the option to create a list in an HTML list . To do this, as in the first case, you will have to create two lists, one of which is the main, the second is nested.
Drop-down list
And the last type of list is a dropdown. Basically, it is used with scripts and serves to ensure that the user can send this or that information to the owners of the site or to a specific program.
Examples are lists from which you should choose your country of residence, place of study or work, date of birth, evaluation of an article, etc. In this case, you select the item you need from the list before sending information.
Let us briefly mention the tags by which a drop-down list is created. HTML does not have the full functionality to create these lists. Note that when working with this type of list you need to know not only the basics of page layout, but also have an understanding of CSS styles and java scripts.
The list itself is set using paired <select> </select> tags.
Each new element begins with a paired <option> </option> tag.
If you decide to create such a list on your website, we recommend that you find special add-ons for your engine. Using it to create a drop-down list is much easier than writing it yourself.
conclusions
One of the most used elements on site pages is lists. Creating them is very simple, using only a few tags with simple parameters. If desired, you can make a list in the list. HTML markup allows you to create it in just a few minutes.