— Let’s go ahead and explore new tags.
— I thought we were already done with the tags. After all, we even studied the attributes.
— Oh no, there are still a lot of HTML tags. For example, today we’ll look at lists and tags for creating them.
— Fine, I’m ready!
Lists are widely used in HTML to group information. There are three kinds of lists:
- unordered list
- ordered list
- description list
In an unordered list, each element is highlighted with some kind of marker, by default it is a filled circle. Such a list is added using the paired
<ul> tag. And then we add each item to this list - using the
<h2> What I need to know to become a Frontend developer </h2> <ul> <li> JS </li> <li> HTML </li> <li> CSS </li> </ul>
— Cool. Is it possible that not circles are drawn? I just want, for example, squares.
— Easily. To do this, you need to use attributes. You learned how to add them in the last lecture.
To change the look of the marker, add the
type attribute to the
<ul> tag. This attribute can have several values:
disc- will display markers as filled circles
circle- an empty circle
square- markers will look like filled squares
<h2> What I need to know to become a Front-end developer </h2> <ul> <li> JS </li> <li> HTML </li> <li> CSS </li> </ul>
— What if I want to add the numbers instead of any squares and circles? Do I have to type them myself?
— Of course not. To do this, you need to create an ordered list.
In a numbered list, a sequential number is added to each item. Such a list can be created using the
<ol> tag. And each item on such a list …
— I know, I know. Created using the
— You are absolutely right. The same as with the
<h2> What I need to know to become a Frontend developer </h2> <ol> <li> JS </li> <li> HTML </li> <li> CSS </li> </ol>
A numbered list also has several attributes to help you change the look of the list and its properties:
- reversed - displays the list in reverse order
- start - sets the starting value from which the numbering will start. For example, with a value of 3, the numbering of list items will start with the number 3.
- type - sets the type of marker to use in the list (in the form of letters or numbers). For example,
1is the default, decimal numbering. And
I- numbering in Roman capital numbers (I, II, III, IV).
— Wait, you forgot to mention the value for the reversed attribute.
— The reversed attribute has no value. That’s why I haven’t set it.
— How to use it then?
— It’s even easier than attributes with a value. You just write the name of the atribute and that’s it. Look:
<ol reversed type = "I" start = "10"> <li> Point 1 </li> <li> Point 2 </li> <li> Point 3 </li> </ol> <! - Result: X. Item 1 IX. Point 2 VIII. Point 3 ->
There is one more kind of lists in HTML. It does not occur as often as the previous two. It is called - description list. Sometimes it’s also referred to as the list of definitions.
A description list is added using the
<dl> tag. But unlike the
<ul> lists, the list item is NOT added using the
Here, each item consists of two elements - a term and its definition. The term uses the
<dt> tag, and the definition uses the
<dl> <dt> Term 1 </dt> <dd> Term Definition 1 </dd> <dt> Term 2 </dt> <dd> Term Definition 2 </dd> </dl>
— I wonder why such lists are needed at all?
— The description list is great for explaining some terms, creating a dictionary or reference book.
— I think I’m ready to try to create my own lists!
— Moving on to the practical tasks then!