what is HTML Lists? Full Details List

by

Hello friends, in today’s post, we are starting you about HTML(what is HTML Lists), what happens. How does the key work, so today you should tell about HTML.

HTML Lists

Now we have not given examples for everyone but will update soon

  HTML list example

Unordered list

  • item
  • item
  • item
  • item

Ordered list:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

Unordered HTML list

An unordered list starts with the <ul> tag. Each list item begins with a <li> tag.

The list items are marked with bullets (small black circles) by default:

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Unordered HTML List – Select List Item Marker

The CSS list-style-type property is used to define the list item marker style:

Valuedescription
discsets the list item marker for the disc bullet (the default is applied automatically if nothing is set)
circle sets the list item marker to a circle
squaresets the list item marker to a square
nonelist item will not be marked

Example – Disk

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

उदाहरण – Circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

उदाहरण – Square

<ul style="list-style-type:square;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

उदाहरण – None

<ul style="list-style-type:none;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Ordered HTML list

An ordered list starts with the <ol> tag. Each list item begins with a <li> tag.

list items are MARKED with NUMBERS by default:

Example

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Ordered HTML List – Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Typedescription
type=”1″list items will be numbered with number (default; defaults if nothing is set)
type=”A”list items will be numbered in uppercase letters
type=”a”list items will be numbered in lowercase letters
type=”I”list items will be numbered in uppercase roman numbers
type=”i”list items will be numbered in lowercase roman numbers

Numbers:

<ol type="1">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Uppercase Letters:

<ol type="A">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Lowercase Letters:

<ol type="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Uppercase Roman Numbers:

<ol type="I">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Lowercase Roman Numbers:

<ol type="i">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms with a description for each term.

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

Example

<dl>

  <dt>Coffee</dt>

  <dd>- काला गर्म पेय </dd>

  <dt>Milk</dt>

  <dd>- सफ़ेद ठंडा पेय </dd>

</dl>

Nested (fit (an object or objects) inside a larger one.)

HTML Lists

list can be nested (lists inside lists):

example

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Note: list items can contain new list and other HTML elements, such as images and links, etc.

More Topics See-

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:

Example

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Horizontal list with CSS

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

A popular way to create a navigation menu is to create a list horizontally:

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>

Tip: Most of the css usage is being seen here, so if you guys support us, we would like to bring css app soon. ,

Chapter Summary

  • Use HTML <ul> element for unordered list
  • Use CSS list-style-type property for list item marker
  • Use HTML <ol> element for ordered list
  • Use HTML type attribute for numbering type
  • Use HTML <li> element for list items
  • Use HTML <dl> element for description list
  • Use HTML <dt> element for description term
  • Use the HTML <dd> element to describe the term in the description list. To nest lists within lists
  • List items can contain other HTML elements
  • Use the CSS property float:left or display:inline to display the list horizontally.

HTML List Tags

Tagdetails
<ul>unordered list
<ol>unordered list
<li>Defines an ordered list
<dl>Defines a list item
<dt>Defines a description list
<dd>Defines a term in a description list

For a complete list of all available html tags, click HTML Tag Reference.

what is HTML Lists

reference- https://javahindi.com/html5-all-topics/

Request – If you found this post useful for you(what is HTML Lists), then do not limit it to yourself(what is HTML Lists), do share it

Leave a Comment