How to create an HTML list? Very simple!

HTML is currently the most popular language used for marking up web pages. Many developers do not even know that there are other tools for creating sites. Many books, courses, and seminars have been devoted to this language. About him and this article. Of course, it’s impossible to fit the full potential of this language on several pages, but I did not try to do this. This article will let you get to know more about an object like an HTML list. We will consider its types and tags, allowing to draw a conclusion to the users screen.

general information

html list
An HTML list is used quite often. Since it allows you to quickly and efficiently present the necessary information to users in a convenient form. There are two types of lists: ordered and unordered. Their structure remains the same. The only difference is that an ordered list uses digits that go in order as markers. Next, we will consider each species separately.

Ordered

how to create a list in html
Such an HTML list starts with the <ol> tag and ends with a closing element </ol>. The <ol> tag is fully supported by all modern browsers, operating systems and platforms. Use the <li> tag to indicate a list item. Very often this type of markup is called numbered. Although at the same time not only numbers can be used as a marker, but, for example, letters. The <ol> tag has three characteristic attributes, which will be described later.

  • Type. Allows you to select the type of marker. As mentioned above, not only the usual Arabic numerals can be used , but also other characters. If the type attribute is assigned the value β€œA”, the list will be ordered in capital Latin letters. The meaning of β€œa” is lowercase; "I" - capital Roman numerals; "I" - lowercase Roman numerals; β€œ1” - Arabic numerals.
  • Reversed. Invites the browser to count down, for example, 3, 2, 1, etc. It should be noted that this attribute is not supported by many browsers and is not included in any specification (except HTML 5).
  • Start The value may be a figure that will indicate where the countdown begins.

Disordered

html unordered list
In another way, this view is called an unordered list of HTML. Decorative markers are used to indicate the beginning of an element. In the last paragraph, just such a list was used. Using CSS, you can completely remove the display of markers, this happens using the property "list-style-type", with the value "none". The <ul> tag is used to mark the beginning of an unordered list. Inside it contains <li> elements. There is only one individual attribute for the <ul> tag, namely β€œtype”, which indicates the type of marker. Keywords can be its keywords: disc, circle, square. The first is the filled circle, the second is the circle of the circle, and the third is the square. Using the β€œlist-style-image” property (from CSS), you can assign your own markers that look like small pictures.

Conclusion

The question of how to create a list in HTML is often asked in various forums and portals. Therefore, a separate article for this information does not hurt to fully satisfy the curiosity of novice programmers. And remember that the HTML list may sometimes be used for other purposes. But this topic is already beyond the scope of this article.

Source: https://habr.com/ru/post/K141/


All Articles