What is the correct HTML code for creating a bulleted list and ordered list?

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.

Ordered list of students

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 🤓.

Unordered TODO list

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.

HTML Lists

❮ Previous Next ❯

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

Example

An unordered HTML list:

• Item
• Item
• Item
• Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

Try it Yourself »

Overview of How to Create Ordered Lists in HTML

You can create HTML bullet points by making an unordered list in HTML. An unordered list in HTML, also called a bullet list in HTML, is a common type of HTML list. The other most popular choice is probably the ordered list. Unlike an ordered list, you use bullet lists in HTML to list items you don’t need to list in order.

To create HTML bullet points in an unordered list in HTML, you must use two different tags. First, place the

…

tags around the text to turn into a bulleted list. Second, place the

…

tags around each line item in the list. You can choose from three formatting type choices when making HTML bullet points. You can create either circles, squares, or discs. The default is discs. To set the type of bullets, use the STYLE attribute. Then set its value as “list-style-type:format” where format is the word circle, square or disc. You add the STYLE attribute within the

start tag.

Start Tag:
End Tag:
Attributes:	style=“list-style-type:disc”	Bullet style is filled circle
	style=“list-style-type:circle”	Bullet style is hollow circle
	style=“list-style-type:square”	Bullet style is filled square
Related Tags:	… [Line item]
Example:	My list: First Item Second Item Third Item	This tag makes the items surrounded by the line item tags … appear as a list with square bullets.
Result:	My List: First Item Second Item Third Item

A picture of a user creating HTML bullet points in a simple web page created in Notepad.

How to create an unordered list with disc bullets in HTML?

HTMLWeb DevelopmentFront End Technology

To create unordered list in HTML, use the

tag. The unordered list starts with the
tag. The list item starts with the
• tag and will be marked as disc, square, circle, etc. The default is bullets, which is small black circles.

  For creating an unordered list with circle bullets, use CSS property list-style-type. We will be using the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML

  tag, with the CSS property list-style-type to add circle bullets to an unordered list.

  Just keep in mind, the usage of style attribute overrides any style set globally. It will override any style set in the HTML tag or external style sheet.

  You can try to run the following code to create an unordered list with disc bullets in HTML −

  : The Ordered List element

  The

  HTML element represents an ordered list of items — typically rendered as a numbered list.
  Content categoriesPermitted contentTag omissionPermitted parentsImplicit ARIA rolePermitted ARIA rolesDOM interface

  Flow content, and if the element's children include at least one element, palpable content.

  Zero or more , and elements.

  None, both the starting and ending tag are mandatory.

  Any element that accepts flow content.

  list

  directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree

  HTMLOListElement

  : The Unordered List element

  The

  HTML element represents an unordered list of items, typically rendered as a bulleted list.
  Content categoriesPermitted contentTag omissionPermitted parentsImplicit ARIA rolePermitted ARIA rolesDOM Interface

  Flow content, and if the element's children include at least one element, palpable content.

  Zero or more , and elements.

  None, both the starting and ending tag are mandatory.

  Any element that accepts flow content.

  list

  directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree

  HTMLUListElement

  Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them

  Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

  Lists are used all the time on the web. Articles, website navigation menus, and product features on e-commerce websites all make frequent use of lists – even when you can’t tell that a list is being used just by looking at the web page.

  There are three types of lists you can use, and this quick guide will show you how to use each.

  Contents

  • 1 Unordered Lists
  • 2 Ordered Lists
    • 2.1 Changing Numbering
      • 2.1.1 Creating a Countdown List
      • 2.1.2 Starting a List on a Specific Number
      • 2.1.3 Changing the Numbering Style
  • 3 Description Lists
  • 4 Nested Lists
  • 5 Using Lists for Menus
  • 6 Styling Lists
  • 7 Closing Thoughts
  • 8 Related Elements

  10 Lists

  Contents

  1. Introduction to lists
  2. Unordered lists [UL], ordered lists [OL], and list items [LI]
  3. Definition lists: the DL, DT, and DD elements
     1. Visual rendering of lists
  4. The DIR and MENU elements

  Video liên quan