Types of Lists

Index

  1. List
  2. Unordered List
  3. Ordered List
  4. Definition List

List

In HTML, we can give numbers, unnumbered, and lists to the different text using simple tags. We can also use nested lists with a list. HTML editor automatically takes the space between the bullet or list number in a text, we do not need to mention it. Neither (as yet) do we have control over what type of bullet will be used as each browser is different.

Unordered lists

<ul> tag is used to Unordered any list followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul> The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:

  • 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
Example: 
<!DOCTYPE html>
<html>
  <body>
    <h2>Unordered List with Disc Bullets</h2>
    <ul style="list-style-type:disc;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  
    <h2>Unordered List with Circle Bullets</h2>
    <ul style="list-style-type:circle;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  
    <h2>Unordered List with Square Bullets</h2>
    <ul style="list-style-type:square;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <h2>Unordered List without Bullets</h2>
    <ul style="list-style-type:none;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul> 
  </body>
</html>
Output:

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default: The type attribute of the <ol> tag defines the type of the list item marker:

  • 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
Example: 
<!DOCTYPE html>
<html>
  <body>
    <h2>Ordered List with Numbers</h2>
    <ol type="1" start="50">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>  
    <h2>Ordered List with Letters</h2>
    <ol type="A">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>  
    <h2>Ordered List with Lowercase Letters</h2>
    <ol type="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol> 
    <h2>Ordered List with Roman Numbers</h2>
    <ol type="I">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>  
    <h2>Ordered List with Lowercase Roman Numbers</h2>
    <ol type="i">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>  
  </body>
</html>
Output:

Definition Lists

A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h2>A Description List</h2>
    <dl>
      <dt>Coffee</dt>
      <dd>- black hot drink</dd>
      <dt>Milk</dt>
      <dd>- white cold drink</dd>
    </dl>
  </body>
</html>
Output:

Comments

Post a Comment

Popular posts from this blog

Adding Graphics to HTML Documents

Image
Index Graphics to HTML Img in HTML Img Attributes Border Attribute Width and Height Attribute Aligh Attribute Alt Attribute Graphics to HTML In the beginning, graphics was not supported by the web pages only texts are used. But later on images and other types of multimedia files are embedded with web pages. Img in HTML The graphics are embedded in a HTML pages using a simple tag which is represented by <IMG>. We can also embed the images inside other elements such as anchors. When embedded inside an anchor, then the user left clicks on the image, they will go to the designated link (rather, their browser will load a file from the designated link). The <IMG> element has no ending tag. IMG Attributes ...
Read more

Table

Image
Index HTML Table Html Table Tags Width and Border Cell padding Cell spacing BGCOLOR COLSPAN and ROWSPAN HTML Table An HTML <table> tags are used to create different table in our web pages. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. Html Table Tags Tag Description <table> Displays a table <th> Represents a header cell in a table <tr> ...
Read more

Introduction to HTML

Image
Index Web Server Web Client/Browser Hyper Text Markup Language - HTML HTML Tags Types of Tags in HTML (Paired and Singular tags) Commonly used HTML Commands Title Footer Text Formatting Web Server Web server is dedicated computers that uses HTTP to serve web pages. the web server has an IP address and a domain name. By entering URL https:www.mk7college.com/index.html in the browser, it requests to the webserver having a domain name, "mk7college.com". The server in response fetches the page named index.html to the browser. Any computer can act as a web server after installing server software on it There are many web server software, like public domain software and commercial packages. Web server working The web server responds to the client's re...
Read more