The HTML <ul> tag is used to create an unordered list of text.
By default, browsers will render the <ul> elements with bullet points.
The following example code:
<body>
<h1>Web technologies</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
Will produce the following output:
If you want to render the list <li> elements above without the bullet points, you need to add some CSS code that will change the default styling from the browser.
First, you need to add the list-style-type:none style property to the <ul> element.
Note the style attribute of the <ul> tag below:
<body>
<h1>HTML list without bullets</h1>
<ul style="list-style-type:none;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
The <ul> tag also has a default padding-inline-start style with the value of 40px that gives indentation for the list item as shown below:
Since you’re not rendering any list style, you may also want to remove the padding CSS.
Here’s the full code to create an HTML list without bullet points:
<body>
<h1>HTML list without bullets</h1>
<ul style="list-style-type:none; padding-inline-start: 0px">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
Add the above code to your HTML document and save it.
When you open the browser, you should see the list rendered without bullet points and indentations as shown below:
Note that the padding-inline-start style is not supported by Internet Explorer and other old browsers.
If you need to create an HTML list without bullets in older browsers, you need to use a different style.
HTML list without bullets in older browsers
To create an HTML list without bullets that’s compatible with Internet Explorer and other old browsers, you need to replace the padding-inline-start style with the padding-left style.
The padding-left style will override the padding-inline-start style used by modern browsers and the default padding-left:40px style for <ul> implemented by Internet Explorer:
<ul style="list-style-type:none; padding-left: 0px"></ul>
You can extract the styles as a CSS class rule to reuse those styles in many <ul> tags:
ul.list-none {
list-style-type: none;
padding-left: 0px;
}
Next, just apply the class style-none to your <ul> tags to render the list without bullet points:
<body>
<style>
ul.list-none {
list-style-type: none;
padding-left: 0px;
}
</style>
<h1>HTML list without bullets</h1>
<ul class="list-none">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
And that’s how you can create HTML lists without bullets.
Feel free to use the code in this tutorial for your project. 😉
