HTML - List

Ad Code

HTML - List

RK Tutorials July 23, 2023


 HTML - Lists


HTML provides three ways for specifying lists of information.
Unordered List(Bullet)

It is collection of related items without any sequence. It is created by using <ul> tag with <li> (List items).

Example

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Bullet List Example</title>
   </head>
   <body>
     <ul>
       <li>List item 1</li>
       <li>List item 2</li>
       <li>List item 3</li>
       <li>List item 4</li>
    </ul>
   </body>
</html>

Output

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Type Attribute

We can use type attribute for <ul> tag to specify the type of bullet.

Example

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

HTML Ordered Lists

If we are required to put our items in a numbered list, then use <ol> tag with list item tag <li>.

Example:


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Ordered List Example</title>
   </head>
   <body>
      <ol>
         <li>Analog Computer</li>
         <li>Hybrid Computer</li>
         <li>Digital Computer</li>
      </ol>
   </body>
</html>

Output

  1. Analog Computer
  2. Hybrid Computer
  3. Digital Computer

Type Attribute

We can use type attribute for <ol> tag to specify the type of numbering sytle.

Example

<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.



Definition Lists

Definition lists is used where entries are listed like in a dictionary. It has following three tags.
  • <dl> − Defines the start of the list
  • <dt> − A term
  • <dd> − Term definition
  • </dl> − Defines the end of the list

Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Definition List</title>
   </head>
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>URL</b></dt>
         <dd>This stands for Uniform Resource Locator</dd>
      </dl>
   </body>	
</html>

Output

HTML
This stands for Hyper Text Markup Language
URL
This stands for Uniform Resource Locator


Example of a sample web page

<!DOCTYPE html>
<html>
<head><title>This is my first html page</title></head>
<body bgcolor="gray">
<center>
<h1>My first web page</h1></center>
<hr width="75%" color="#ff0000" size="4"/>
<p align="justify"> This is justify align text. This is justify align text. This is justify align text. This is justify align text. This is justify align text. This is justify align text. This is justify align text. This is justify align text.</p> <br>
<b>Bold Text</b> <u>Under Line</u> <iItalic>/i> <del>deleted text</del><br>
A<sup>2</sup>+B<sup>2</sup>   H<sub>2</sub>O<br>
<table><tr><td><b>Numbered list</b>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol></td><td>
<b>Number list with type</b>
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol></td><td>
<b>Bullet list</b>
<ul type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul></td></tr>
</table>
<table bgcolor="black" width="100%"><tr><td><center><font color="white"><b>©All Rights Reseved</b> | Designed by: Your Name
</body>
</html>

Output





RK Tutorials

Posted by RK Tutorials

Post a Comment

0 Comments

Ad Code