How do you display bullets in a list tag?

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

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.

Web Style Sheets CSS tips & tricks

See also the index of all tips.

On this page:

• Colored bullets
• Colored list numbers

: 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

: The List Item element

The

• HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list [
  ], an unordered list [
  ], or a menu []. In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
  Content categoriesPermitted contentTag omissionPermitted parentsImplicit ARIA rolePermitted ARIA rolesDOM interface

  None.

  Flow content.

  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.

  An , , or element. Though not a conforming usage, the obsolete can also be a parent.

  listitem when child of an ol, ul or menu

  menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem

  HTMLLIElement

  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.

  Create a list

  To start a numbered list,type 1, a period [.], a space, and some text. Then press Enter.Word will automatically starta numbered list for you.

  Type* and a space before your text, and Word will makea bulleted list.

  To complete your list, press Enteruntil the bullets or numbering switchoff.

  Create a list from existing text

  1. Select the text you want to change into a list.

  2. Go to Home> Bullets or Home>Numbering.

  Note:Find different bullet styles and numbering formats by clicking the down arrow next to Bullets or Numbering.

  Video liên quan