— 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

Unordered 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 <li> tag.

<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.

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 <li> tag.

— You are absolutely right. The same as with the <ul> list.

<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, 1 is 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
->

Description list

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 <ol> and <ul> lists, the list item is NOT added using the <li> tag.

Here, each item consists of two elements - a term and its definition. The term uses the <dt> tag, and the definition uses the <dd> tag.

<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!