HTML LISTS

Learn Simpli January 3, 2020 one Comments

Unordered HTML list: starts with <ul> tag and each item in the list start with <li> tag and, items are marked with bullets (small black dots)

Example:

<ul>
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ul>

you can select list style

Disc:

<ul style="list-style-type:disc;">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ul>

Circle:

<ul style="list-style-type:circle;">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ul>

Square:

<ul style="list-style-type:square;">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ul>

none:

<ul style="list-style-type:none;">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ul>

Ordered HTML List – The Type Attribute: The type an attribute of the <ol>the tag defines the type of the list item marker.

Numbers:

<ol type="1">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ol>

Uppercase Letters:

<ol type="A">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ol>

Lowercase Letters:

<ol type="a">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ol>

Uppercase Roman:

<ol type="I">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ol>

Lowercase Roman:

<ol type="i">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ol>

HTML Description Lists is a list of terms, with a description of each term.

<dl> tag defines the description list,
<dt>tag defines the term (name), and the
<dd>tag describes each term

<dl>
  <dt>Morning</dt>
  <dd>- Start of the day</dd>
  <dt>Evening</dt>
  <dd>- End of the day</dd>
</dl>

Nested Lists: the list under the other list and can be written as follows

<ul>
  <li>Day</li>
  <li>Morning
    <ul>
      <li>Breakfast</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Noon</li>
</ul>

Control List Counting: By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute

<ol start="50">
  <li>Morning</li>
  <li>Noon</li>
  <li>Evening</li>
</ol>

Horizontal List with CSS: HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu

<!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">Morning</a></li>
  <li><a href="#news">Noon</a></li>
  <li><a href="#contact">Evening</a></li>
  <li><a href="#about">Night</a></li>
</ul>

</body>
</html>

HTML LISTS

One thought on “HTML LISTS”