HTML ul tag

HTML ul tag (<ul>) can be used to create unordered list. It can contain multiple list items using tag li (<li>) and it can be styled using css. Also note that there can be nested lists (using ul and/or ol) also.

Attributes

  1. type (obsolete in HTML5)
  2. compact (obsolete in HTML5)

CSS properties specific to lists

  • list-style
  • list-style-image
  • list-style-type
  • list-style-position

Example – ul tag with default list-style-type

<style>
ul {
  background-color: lightgreen;
  width: 200px;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
refresh

Example – ul tag with circle list-style-type

<style>
ul {
  background-color: lightgreen;
  width: 200px;
  list-style-type: circle;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
refresh

Example – ul tag with outside list-style-position

Property list-style-position has default value outside.

<style>
ul {
  background-color: lightgreen;
  width: 200px;
  list-style-position: outside; /* default */
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
refresh

Example – ul tag with inside list-style-position

<style>
ul {
  background-color: lightgreen;
  width: 200px;
  list-style-position: inside;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
refresh

Example – ul tag with reduced left padding

<style>
ul {
  background-color: lightgreen;
  width: 200px;
  list-style-position: outside;
  padding: 0 0 0 20px;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments