Unordered lists in html

HTML Lists

In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let’s have a look.

HTML Unordered Lists

Each element of an unordered list is declared inside the tag.

html> html> head> title>Title of the document title> head> body> h1>An unordered list: h1> ul> li>This is a list item li> li>This is another list item li> li>This is one more list item li> ul> body> html>

The items in unordered lists are marked with bullets (small black circles) by default. However, the default bullet style for the list items can be changed using a type attribute.

The type attribute is used to change the default bullet style for the list items.

html> html> head> title>Title of the document title> head> body> ul type="circle"> li>List item li> li>List item li> li>List item li> ul> ul type="square"> li>List item li> li>List item li> li>List item li> ul> body> html>

Result

You can also use the CSS list-style-type or list-style-image property to specify the type of a list item element.

html> html> head> title>Title of the document title> head> body> h2>Examples of unordered lists: h2> ul style="list-style-type: square;"> li>Cold Drinks li> li>Hot Drinks li> li>Ice-Creams li> ul> ul style="list-style-type: disc;"> li>Coca-Cola li> li>Fanta li> li>Ice Tea li> ul> ul style="list-style-type: circle;"> li>Coca-Cola li> li>Fanta li> li>Ice Tea li> ul> body> html>

HTML Ordered Lists

html> html> head> title>Title of the document title> head> body> h1>An ordered list: h1> ol> li>This is List item number 1 li> li>This is List item number 2 li> li>This is List item number 3 li> ol> body> html>

html> html> head> title>Title of the document title> head> body> h3>A numbered list: h3> ol> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> h3>An alphabetized list: h3> ol type="A"> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> h3>An alphabetized list (lowercase letters): h3> ol type="a"> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> h3>A numbered list (Roman numerals): h3> ol type="I"> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> h3>A numbered list (lowercase Roman numerals): h3> ol type="i"> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> body> html>

HTML Description Lists

HTML description list is used to arrange terms or names with a description the same way as they are arranged in a dictionary.

To create a description list, we use the tag. This tag comes in pairs.

Example of the HTML tag for creating a description list:

html> html> head> title>Title of the document title> head> body> h1>Description Lists: h1> dl> dt>Tea dt> dd>- hot drink dd> dt>Juice dt> dd>- cold drink dd> dl> body> html>

Result

HTML Nested Lists:

A nested list contains a list inside a list.

Example of an HTML nested list:

html> html> head> title>Title of the document title> head> body> h2>A nested HTML list h2> p>A nested list contains a list inside a list. p> ul> li>Copybooks li> li> Books ul> li>Detective books li> li>Roman books li> li>Fairy tale books li> ul> li> ul> body> html>

List Counting Control

By default, the enumeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.

Example of an HTML list for counting from a specified number:

html> html> head> title>Title of the document title> head> body> h2>List counting control h2> p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number. p> ol start="40"> li>Pen li> li>Pencil li> li>Copybook li> ol> ol type="I" start="40"> li>Pen li> li>Pencil li> li>Copybook li> ol> body> html>

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.

Example of a horizontal list with CSS:

html> html> head> title>Title of the document title> style> ul < list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #F44336; > li < float: left; > li a < display: block; color: white; text-align: center; padding: 16px; text-decoration: none; > li a:hover < background-color: #981816; > style> head> body> h2>Navigation Menu Example h2> p> You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally. p> ul> li> a href="#home">Home a> li> li> a href="https://www.w3docs.com/tool/">Tools a> li> li> a href="https://www.w3docs.com/snippets">Snippets a> li> li> a href="https://www.w3docs.com/quiz/">Quizzes a> li> li> a href="https://www.w3docs.com/string-functions/">String Functions a> li> ul> body> html>

Источник

Unordered lists in html

The HTML element represents an unordered list of items, typically rendered as a bulleted list.

Try it

Attributes

This element includes the global attributes.

compact Deprecated Non-standard

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent, and it doesn’t work in all browsers.

Warning: Do not use this attribute, as it has been deprecated: use CSS instead. To give a similar effect as the compact attribute, the CSS property line-height can be used with a value of 80% .

This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:

A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: triangle .

If not present and if no CSS list-style-type property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.

Warning: Do not use this attribute, as it has been deprecated; use the CSS list-style-type property instead.

Usage notes

The
element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.
The
and elements may be nested as deeply as desired. Moreover, the nested lists may alternate between
and
without restriction.
The and
elements both represent a list of items. They differ in that, with the element, the order is meaningful. To determine which one to use, try changing the order of the list items; if the meaning is changed, the element should be used, otherwise you can use
.

Examples

Simple example

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

Источник

Unordered lists 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 🙂

Источник