List properties in html

This element includes the global attributes.

type Deprecated Non-standard

This character attribute indicates the numbering type:

a : lowercase letters
A : uppercase letters
i : lowercase Roman numerals
I : uppercase Roman numerals
1 : numbers

This type overrides the one used by its parent element, if any.

Note: This attribute has been deprecated; use the CSS list-style-type property instead.

Examples

For more detailed examples, see the and pages.

Ordered list

ol> li>first itemli> li>second itemli> li>third itemli> ol>

Result

Ordered list with a custom value

ol type="I"> li value="3">third itemli> li>fourth itemli> li>fifth itemli> ol>

Result

Unordered list

ul> li>first itemli> li>second itemli> li>third itemli> ul>

Result

Technical summary

Content categories	None.
Permitted content	Flow content.
Tag omission	The end tag can be omitted if the list item is immediately followed by another element, or if there is no more content in its parent element.
Permitted parents	An , , or element. Though not a conforming usage, the obsolete can also be a parent.
Implicit ARIA role	listitem when child of an ol , ul or menu
Permitted ARIA roles	menuitem , menuitemcheckbox , menuitemradio , option , none , presentation , radio , separator , tab , treeitem
DOM interface	HTMLLIElement

Specifications

Browser compatibility

BCD tables only load in the browser

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

Unordered HTML List

The list items will be marked with bullets (small black circles) by default:

Example

Ordered HTML List

The list items will be marked with numbers by default:

Example

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The tag defines the description list, the tag defines the term (name), and the tag describes each term:

Example

Tag	Description
	Defines an unordered list
	Defines an ordered list
	Defines a list item
	Defines a description list
	Defines a term in a description list
	Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML List – How to Use Bullet Points, Ordered, and Unordered Lists

TAPAS ADHIKARY

Listing items on a web page is a common task you’ll have to do as a web developer. You may have to list shopping cart items, the order of students based on their grades, dogs with the loudest bark – and so on.

So you need to know the different ways you can list items using HTML. While you might think it’s a trivial thing to learn, it’s important. And it’s one of the most commonly used features of HTML in web development.

In this article, you’ll learn all about HTML listing elements, their properties, styling, and how to actually use them to create neat lists. I hope you find it helpful.

How to Make Lists in HTML

In HTML, we can list items either in an ordered or unordered fashion.

An ordered list uses numbers or some sort of notation that indicates a series of items.

For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.

Here is an example of an ordered list with students’ names and marks.

On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.

There is one more type of list called a description list that we will learn as well below.

Now let’s get into a bit more detail and see how to create each type of list in HTML.

How to Make an Ordered List with HTML

Here is the complete HTML structure for an ordered list:

The output of the above ordered list is:

So, we have the list of elements ordered with a number starting with 1 and incremented to 2 and 3. Try this CodePen and see if you can change and play around with using ol-li .

Similarly, you can use lower case letters like a as the type value to list the elements with a, b, c, and so on.

If you want to use Roman numerals, use the value I for an ordered list with Roman numerals:

The output looks like this:

Check out the CodePen below to try other types:

Feel free to play around with the start attribute using this CodePen:

You can see the bullet points for each of the list items above, but you can customize them. We’ll learn that too.

But before that, feel free to use this CodePen to change and run the code.

You can use the CodePen below to try out the same. Feel free to modify it as you wish:

Try out this CodePen to experiment further with description lists:

Well, this is not what we want. So next we will write a few CSS rules and properties to make it look like a page header (at least close to it).

Now it is much better and looks closer to a realistic page header.

Again, you can use this CodePen to change and try out things with the header.

Before We End.

That’s all for now. I hope you’ve found this article insightful, and that it helps you understand HTML lists more clearly. You can find all the examples together in this CodePen Collection.

Let’s connect. You will find me active on Twitter (@tapasadhikary). Feel free to give a follow. I’ve also started sharing knowledge using my YouTube channel, so you can check it out, too.

List properties in html