Lists in HTML

Ordered List UnOrdered List Definition List
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
  5. Fifth Item
  • First Item
  • Second Item
  • Third Item
  • Fourth Item
  • Fifth Item
Item 1 or Name 1
Description of item 1
Item 2 or Name 2
Description of item 2
Item 3 or Name 3
Description of item 3
HTML lists are used to group related items together in a web page.
We can create list in HTML by using tags. For a set of items or data to display we can present as a list of items than writing them as line text.

Unordered lists

Unordered lists are used to display items in no particular order. They are typically used for bulleted lists, such as lists of features or benefits. Unordered lists are created using the `<ul>` tag. Each item in the list is created using the `<li>` tag.
We can list out different types of Scripts used in creating a web site.
  • PHP
  • JSP
  • ASP
  • JavaScript
<ul>
<li>PHP</li>
<li>JSP</li>
<li>ASP</li>
<li>JavaScript</li>
</ul>
Unordered List

Order List

Ordered lists are used to display items in a specific order. They are typically used for numbered lists, such as steps in a process or items in a sequence. Ordered lists are created using the `<ol>` tag. Each item in the list is created using the `<li>` tag.
Now let us rank students according to their mark they got in examination.
  1. Ronald
  2. Rajiv
  3. Alex
  4. Smith
<OL type="1" start="5">
<li>Ronald </li>
<li>Rajiv</li>
<li>Alex </li>
<li>Smith </li>
</OL>
Ordered List in HTML

Defination List

The `<dd>` (definition) tag is used in conjunction with the `<dl>` (definition list) tag to define a term. A definition list is a list of terms and their definitions. Let us try to display some steps involved in creating a website.
Buy a domain name
Develop pages
Buy hosting account
Upload and set up the site.
<dl>
<dd>Buy a domain name</dd>
<dd>Develop pages </dd>
<dd>Buy hosting account</dd>
<dd>Upload and set up the site. </dd>
</dl>
While definition lists and HTML lists can both be used to display information, they are used for different purposes. Definition lists are used to define terms, while HTML lists are used to group related items.
Defination List

Styling HTML lists

HTML lists can be styled using CSS. For example, you can change the font, color, and size of the list items. You can also change the style of the bullets or numbers.

Example:

<html>
<head>
<title>HTML List style </title>
<META NAME="DESCRIPTION" CONTENT="List style ">
<META NAME="KEYWORDS" CONTENT="HTML list style "> 
<style>
ol {
  list-style-type: upper-roman;
}
ul {
  list-style-type: square;
}
li {
  font-size: 1.2em;
  color: #333;
}
ul,ol {
margin-left: 15px;
}
</style>
</head>
<body>

<ul>
<li>PHP</li>
<li>JSP</li>
<li>ASP</li>
<li>JavaScript</li>
</ul>

<OL  start="5">
<li>Ronald </li>
<li>Rajiv</li>
<li>Alex </li>
<li>Smith </li>
</OL>

</body>
</html>
This CSS will style the ordered list with uppercase Roman numerals and the unordered list with square bullets. It will also make the list items larger and darker.

Questions


Unordered List Ordered List in HTML Defination List

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer