HTML <ul> Tag

Last Updated On Monday 23rd May 2022

html ul

Definition

HTML lists will allow us to group a set of related items into a list.

For example, if we wish to break the content into list of items, we can do this in two ways.

  • With <ol> ordered list
  • With <ul> unordered list

The <ul> tag defines an unordered (bulleted) list.Use the <ul> tag together with the <li> tag to create unordered lists. To create unordered lists, we need to use <ul> and </ul> tags.

	<h4>Web Development Languages & Frameworks</h4>
<ul>
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
  <li>Tailwind CSS</li>
  <li>UNOCSS</li>
  <li>React</li>
  <li>Angular</li>
  <li>Svelte JS</li>
  <li>Vue JS</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Perl</li>
</ul>
	

html ul tag

A nested list

	<h4>Web Development Languages & Frameworks</h4>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <ul>
    <li>Tailwind CSS</li>
    <li>UNOCSS</li>
  </ul>
  <li>JavaScript</li>
  <ul>
    <li>Svelte JS</li>
    <li>Vue JS</li>
    <li>React</li>
    <li>Angular</li>
  </ul>
  <li>Python</li>
  <li>PHP</li>
  <li>Perl</li>
</ul>
	

html tags ul

For both list types, each of the list items will be in a separate line or under each other.

Browser Support

Element Chrome Edge Firefox Safari Opera
<ul> Yes Yes Yes Yes Yes

Default CSS Settings

Most browsers will display the <ul> element with the following default values.

	ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
	
html tag ul
html ul li
bulleted list in html
html ul type
list html
list in html
lists in html
html lists
lists html
html list
html unordered list
html bullet points
html for bullet points
bullet list html
html bullet list
bullet html
html tags ul
html bullet
html for bulleted list
bullet points html