Unorder list in html

HTML Lists

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

Example

Unordered HTML List

tag. Each list item starts with the
tag.

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

Example

Ordered HTML List

tag. Each list item starts with the
tag.

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

HTML List Tags

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 Tutorials

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.

Источник

Unorder list in html

Dionysia Lemonaki

A nested list is a list inside another list.

You can create a nested unordered list, or a nested ordered list, or even an ordered list nested inside an unordered one.

Remember that the only direct child of the ul tag is li .

Here’s how you create a nested unordered list:

You create the nested unordered list under the main list’s item of your choosing.

In the example above, I created a nested list between the opening and closing li that has the name ‘JavaScript’.

Make sure to include both the closing tag and opening tags, as it can get confusing quickly.

A good practice to avoid any confusion is to comment your code. And keep in mind that you should use nested lists only when it semantically makes sense.

How to change the default styling of unordered lists

As you’ve seen so far, the default styling of unordered lists are bullet points next to each list item.

But you can change the styling using the list-style-type property in a separate .css file.

The default value of the property is disc .

How to style list items with circles

You can create list items that have circles instead of solid bullet points as their style:

How to style list items with squares

You can also create list items that have squares as their style:

How to remove styles from list items

You can even remove styling altogether:

This is particularly helpful when you want to style the list items horizontally and create a navigation bar. This will require some extra styling.

Lists are block elements. By changing the list items to inline and using a Flexbox rule, you can get items to stack next to each other.

And by adding a few new CSS rules:

You can style the list items horizontally:

How to style list items with emojis

You don’t have that many styling choices for styling items in an unordered list.

To make lists more interesting and fun, you can add emojis, using the CSS ::before pseudo-element.

The first step is to add the list-style-type:none; rule to the parent ul tag and remove the default padding and margin from the tag.

You add the emoji to the li tag using the ::before pseudo-element. You can pick and choose from a full list of emojis in this article.

To give each list item a different emoji, use the :nth-child() selector on the list item before the ::before pseudo-element:

ul < list-style-type: none; padding:0; margin:0; >/*first list item*/ li:nth-child(1)::before < content: "✍️"; >/*second list item*/ li:nth-child(2)::before < content: "🎨"; >/*third list item*/ li:nth-child(3)::before

Conclusion

And there you have it! You now know how to create unordered lists in HTML and have seen some ways to style them.

To continue your HTML learning journey, watch the following videos on freeCodeCamp’s YouTube channel:

freeCodeCamp also offers a free, project-based certification on Responsive Web Design.

It is ideal for complete beginners and assumes no previous knowledge. You’ll start from the absolute necessary basics and build your skills as you progress. In the end, you’ll complete five projects.

Thanks for reading and happy learning 🙂

Источник

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

tag. The ol in the tag stands for an ordered list. Inside each of the ordered list elements
and
, we have to define the list items. We can define the list items using the
tag.

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.

You may also like these articles:

Источник

HTML Unordered List

We use the HTML unordered list to define a list where the sequence or order of the list items doesn’t matter. We can use an unordered list for keeping track of groceries, supplies and random objects.

tag to create an unordered list. For example,

Browser Output



By default, the symbol to represent an unordered list in HTML is a dot bullet point, however, we can change them as per our choice.

Unordered Lists Marker

We use the CSS list-style-type property to change the marker that marks the list item. The valid options for markers are

Icon	Marker	Description
• (default)	disc	sets the marker to a dot
○	circle	sets the marker to a hollow circle
▪	square	sets the marker to a filled black square
none	removes the marker altogether

Below, we can see examples for all the marker types.



Nesting Lists

In HTML, we can create a nested list by adding one list inside another. For example,

Browser Output



In the above example, you can see we have added unordered lists inside another unordered list.

In this case, the first and second list items of the outer unordered list include unordered lists.

Ordered List inside Unordered List

Similarly, we can also mix list types while nesting and add ordered lists inside the unordered list. For example,

Browser Output



Multi-level Nesting of Unordered List

In our examples, we are nesting the list up to a single level, however, we can also nest lists up to multiple levels. This might be important while creating lists like Table of Content. For example,



In a similar way, we can nest lists to as deep of a level as we need.

Table of Contents

Источник

Читайте также:  Интерлиньяж