All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How Can You Make A Bulleted List In HTML

Last Updated : Mar 11, 2024

How Can You Make A Bulleted List In HTML

In this tutorial we will show you how can you make a bulleted list in HTML, in HTML, there is also a method with the help of which you are able to make a list. As we know list is of two types first one is ordered list and another is unordered list.

Here, today we come in touch with bulleted list that means it’s without numbers so it’s an unordered list.

There are also many types in unordered list like square, disc and circle whereas bulleted list is an unordered list of disc type.

Here, under we will help you to understand that how we are able to make a bulleted list in html.

Step By Step Guide On How Can You Make A Bulleted List In HTML :-

As, bulleted list is an unordered list. So, in HTML here we use unordered list tag and under this tag we give its type as disc, also if you not do this nothing happens because an unordered list usually use bullets to make a list.

Here is an example to show how we able to make a bulleted list in HTML.

Here we give an example of using unordered list with or without disc value and the result are same.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<ul>
        <li>
            apple
        </li>
        <li>
            banana
        </li>
        <li>
            grapes
        </li>
        <li>
            papaya
        </li>
    </ul>
    <ul type="disc">
        <li>
            this is a car
        </li>
        <li>
            this is a bike
        </li>
        <li>
            this is an aeroplane
        </li>
        <li>
            none of the above
        </li>
    </ul>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, we create two unordered lists by using ul tags, which are paired tag. So, it must have a closing tag.
  5. In ul we create li which means list, you can create list as much as you want, these are also paired tag and the content which you want to specify on screen must be written inside these tags.
  6. Now, from both lists the difference is that in first, we simply create an unordered list. But in second we specify types, this is because unordered list have some types like ordered list.
  7. But if you not specify any type, no worry, by default the list is automatically select disc style which is bullets style. Where for other style than bullets you have to specify the type name.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last, we are able to make a bulleted list with the help of unordered list tag. There are also many other types of unordered list style, that we will discuss in next further sessions.

I hope this tutorial on how can you make a bulleted list in HTML helps you and the steps and the method mentioned above are easy to follow and implement.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪