Lettered list in html

The HTML element represents an ordered list of items — typically rendered as a numbered list.

Try it

Attributes

This element also accepts the global attributes.

This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.

An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter «d» or the Roman numeral «iv,» use start=»4″ .

a for lowercase letters
A for uppercase letters
i for lowercase Roman numerals
I for uppercase Roman numerals
1 for numbers (default)

The specified type is used for the entire list unless a different type attribute is used on an enclosed element.

Note: Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.

Usage notes

Typically, ordered list items display with a preceding marker, such as a number or letter.

Steps in a recipe
Turn-by-turn directions
The list of ingredients in decreasing proportion on nutrition information labels

Источник

How to create an ordered list with list items numbered with uppercase letters in HTML?

A list is a connected items written consecutively (usually one below other). Using HTML, you can create two kinds of lists unordered list and ordered list.

An ordered list is marked with the numbers by default. You can create an ordered list using the tag and, define the list items using .

We can create 4 types of ordered lists IN HTML −

type=»1″− This creates a numbered list starting from 1.
type=»A»− This creates a list numbered with uppercase letters starting from A.
type=»a»− This creates a list numbered with lowercase letters starting from a.
type=»I»− This creates a list numbered with uppercase roman numbers starting from I.
type=»i»− This creates a list numbered with lowercase roman numbers starting from i.

Syntax

Following is the syntax to create an ordered list items numbered with uppercase letters in HTML.

Example 1

Given below is an example to create an ordered list items numbered with uppercase letters in HTML.

DOCTYPE html> html> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> head> body> ol type="a"> li>Abdulli> li>Jasonli> li>Yadavli> li>Lokeshli> ol> body> html>

Following is the output for the above example program.

Example 2

Another example to create an ordered list with list items numbered with lowercase letters in HTML −

DOCTYPE html> html> head> title>World Cup Teamstitle> head> body> h1>List of teams for World Cuph1> ol type = "A"> li>Indiali> li>Australiali> li>South Africali> li>New Zealandli> li>Pakistanli> li>Srilankali> li>West Indiesli> li>Bangladeshli> ol> body> html>

The output is obtained as −

Источник

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.

Источник

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

When using the shorthand property, the order of the property values are:

list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

Источник

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.

Lettered list in html