Login With Github

HTML Lists

There are three types of lists in HTML. They are:

  1. Unordered list
  2. Ordered list
  3. Description list

HTML unordered list

The <ul> tag defines a set of an unordered list, and the <li> tag defines each of list items.

The items of an unordered list are marked with bold dots by default:

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

You can use the list-style-type attribute in CSS to define different list items. The list-style-type attribute values ​​are shown in the following table:

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

list-style-type:disc

<ul style="list-style-type:disc">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

list-style-type:circle

<ul style="list-style-type:circle">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

list-style-type:square

<ul style="list-style-type:square">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

list-style-type:none

<ul style="list-style-type:none">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

HTML ordered list

The ordered list is also composed of a set of list items. The <ol> tag defines the ordered list, and the <li> tag defines the list items of an ordered list.

The items of an ordered list are marked by numbers by default.

<ol>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ol>

You can use the type attribute to define the type of a list item, as shown in the following table:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Type of numbers

<ol type="1">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ol>

Uppercase type

<ol type="A">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ol>

Lowercase type

<ol type="a">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ol>

Uppercase Roman number type

<ol type="I">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ol>

Lowercase Roman number type

<ol type="i">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ol>

The ordered list starts from 1 by default. You can also use the start attribute to define the start of an ordered list. For example, the following list starts at 20:

<ol start="20">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ol>

HTML description list

Description list can not only define a set of list items, but also add description to each of list items.

The <dl> tag defines the description list. The <dt> tag defines the item of a description list . And the <dl> tag defines the description information of a list item.

<dl>
  <dt>Apple</dt>
  <dd>- Favorite fruit</dd>
  <dt>Orange</dt>
  <dd>- The least favorite fruit</dd>
</dl>

Nested list

Lists can be nested, which means that you can define another list in the list, for example:

<ul>
  <li>HTML</li>
  <li>CSS
    <ul>
      <li>CSS2.0</li>
      <li>CSS3.0</li>
    </ul>
  </li>
  <li>JavaScript</li>
</ul>

Horizontal list

The HTML list is displayed vertically by default. You can also customize the display by setting the CSS style.

You can use the <ul> tag and the <li> tag to create a horizontal menu list, for example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

0 Comment

temp