askvity

How to Make a Bulleted List in HTML?

Published in HTML Lists 1 min read

To make a bulleted list in HTML, you use the <ul> tag for the list container and the <li> tag for each item within the list.

Bulleted lists are formally known as unordered lists in HTML. They are used when the order of the items does not matter, such as a list of ingredients or a list of features.

Understanding HTML List Tags

Creating lists in HTML is straightforward and involves a pair of essential tags:

  • <ul>: This tag defines the entire unordered (bulleted) list. All the list items are placed inside this container tag. According to the reference, The <ul tag defines an unordered (bulleted) list.
  • <li>: This tag defines a single item within a list. Each point you want to appear with a bullet needs its own <li> tag. As the reference states, you Use the <ul tag together with the <li> tag to create unordered lists.

Here's a simple table summarizing these tags:

Tag Description Purpose
< ul > Unordered List Container for the list items
< li > List Item An individual item in a list

Basic Structure for a Bulleted List

The basic syntax involves placing multiple <li> elements inside a <ul> element.

<!DOCTYPE html>
<html>
<head>
<title>Bulleted List Example</title>
</head>
<body>

  <h2>My Favorite Fruits</h2>

  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>

</body>
</html>

In this example:

  • The <h2> tag provides a heading for the list.
  • The < ul > tags wrap the entire list.
  • Each fruit name is placed inside its own < li > tags, making it a distinct item with a bullet point next to it in the browser.

Styling Your Bulleted List

By default, browsers typically display unordered list items with a solid black circle bullet. However, you can easily change the appearance of the bullets (like using squares, circles, or even images) and the list spacing using Cascading Style Sheets (CSS). The reference includes a helpful tip: Use CSS to style lists.

You can apply styles directly using the style attribute (inline CSS), within <style> tags in the <head> section (internal CSS), or most commonly, in a separate .css file (external CSS).

<ul style="list-style-type: square;">
  <li>First Item</li>
  <li>Second Item</li>
</ul>

This inline CSS would change the bullet style to squares.

Bulleted Lists vs. Numbered Lists

It's important to note the difference between unordered (bulleted) lists and ordered (numbered) lists.

  • Unordered Lists (<ul>): Use bullets. The order doesn't matter.
  • Ordered Lists (<ol>): Use numbers, letters, or Roman numerals. The order is significant.

The reference highlights this distinction: For ordered lists, use the <ol tag. You use <li> tags inside both <ul and <ol> containers.

Creating a numbered list is just as simple, just substitute <ul with <ol:

<h2>Steps to Make Coffee</h2>

<ol>
  <li>Boil Water</li>
  <li>Add Coffee Grounds</li>
  <li>Pour Water</li>
  <li>Enjoy!</li>
</ol>

In summary, mastering the <ul> and <li> tags is the key to creating effective bulleted lists in HTML, and CSS provides the flexibility to style them according to your design needs.

Related Articles