As a rule, some information is best presented as a list. The types of lists allow you to do this as conveniently as possible. If the user sees solid text, it will be inconvenient for him to read.
Thanks to the lists, it is easier for the user to read any enumerated items than on one line. That is why they are constantly used both on sites and in Word documents and other text editors.
HTML List Views
Lists are numbered and marked, which are also called unnumbered.
The numbered lists use Arabic, Roman numerals, letters and everything else, so you can make an enumeration.
In bulleted lists, various markers are used (points, circles, squares, arrows, and so on).
Here are some examples of sorting items in lists.
The figure above shows simple single-level lists. But documents can also use multi-level ones. Levels can be an infinite number.
The figure above shows what multi-level numbered and bulleted lists can be.
Creature
It is very easy to create a list in html. The types of lists in html markup are very similar. They differ only in the start and end tag. List items themselves are indicated by the same tag. You are not confused here.
Consider the example of creating a numbered list:
<ol>
<li> Point 1 </li>
<li> Point 2 </li>
<li> Point 3 </li>
</ol>
This code is enough to have a regular list with Arabic numerals. This sorting option is set by default. Other options will be considered a little further.
A bulleted list looks like this:
<ul>
<li> Point 1 </li>
<li> Point 2 </li>
<li> Point 3 </li>
</ul>
The difference is that an ol tag is put for a numbered enumeration, and an ul tag for an unnumbered enumeration.
Types of Lists in Word
In the Word editor, the types of lists are created exactly the same. Moreover, in some html-code editors it is possible to export content from Word. These lists are perfectly transferred there and are issued by the corresponding tags.
If you find it difficult to create a multi-level list in html from scratch, you can create it first in the Word editor. Then translate it to html markup.
Let's look at how to create lists in Microsoft Word. There is a special panel "List". The types of lists there are divided into groups.
As soon as you click on a type, sorting options are immediately offered. In the figure above, it is suggested to select the type of marker for an unordered list. The same goes for the rest of the options.
When the library of tiered lists opens, you can see mixed sorting there.
List Operations
In the Word Editor, you can convert any list. The types of lists are selected through the main panel or through a right click. You need to select the text that you want to present in a similar form, and press the right mouse button.
You can select either a numbered or bulleted list.
In addition, it is possible to set the starting position of the reference. For example, you need to print items from 10th to 12th. But by default the list will be from the 1st item. To do this, you need to set the initial value to "10".
As you can see, the editor also allows you to change the indentation.
If you select only the 3rd item and press the right mouse button, you will be able to start numbering anew, from one.
At any time, from a simple list you can make a multi-level. To do this, step on the item you need and again make the right mouse click. Then go to the menu item "Numbering" and at the very bottom click on "Change list level".
In fact, there is nothing complicated. All menu items are created thoughtfully. The context menu (when you right-click) always changes and depends on what exactly you clicked on (list, link, picture, and so on).
Listing in html
You can style tags through style classes or each time individually. At the very beginning, a table with various enumeration options was shown. There were indicated options for decimal, disc, circle, and so on. This value must be specified in the class or style property of list-style-type.
For example, like this:
.sort {
list-style-type: disc;
}
It is enough to specify the sort class to some list, and it will be represented accordingly.
In the Word editor, you can set initial values. This was stated above. The same is permitted in html.
This is done with the start attribute. An example of output items with an initial value of "5":
<ol start = "5">
<li> Point 1 </li>
<li> Point 2 </li>
<li> Point 3 </li>
</ol>
As a result, you will see the numbers 5, 6 and 7, not 1, 2 and 3.
In addition, you can specify where the marker will be located: inside or outside. An example is below.
You can also apply all kinds of CSS tricks to lists. That is, list items can:
- to decorate with any color;
- set any indentation;
- specify any font size;
- specify any font;
- adjust the distance between points;
- set background color;
- set any markers;
- draw with shadows;
- remove markers altogether;
- display items horizontally;
- create multi-level lists that are completely different from the parent item, and much more.
For example, a list can be represented as follows:
When making lists, the main thing is not to overdo it. They serve to facilitate the perception of information. No need to turn all this into a multi-colored disgrace.