Jump to content

HTML Lists ( HTML ایحاد لیست در )


Adrian
 Share

Recommended Posts

  • Author

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

  1. Ordered List or Numbered List (ol)
  2. Unordered List or Bulleted List (ul)
  3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List.


HTML Ordered List or Numbered List  ( لیست های مرتب )

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

<ol>

 <li>Aries</li>

 <li>Bingo</li>

 <li>Leo</li>

 <li>Oracle</li>

</ol>

Output:

  1. Aries
  2. Bingo
  3. Leo
  4. Oracle

 

HTML Unordered List or Bulleted List ( لیست های نامرتب )

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

<ul>

 <li>Aries</li>

 <li>Bingo</li>

 <li>Leo</li>

 <li>Oracle</li>

</ul>

Output:

  • Aries
  • Bingo
  • Leo
  • Oracle

HTML Description List or Definition List ( ایجاد لیست های توضیح دار )

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.

 

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

  1. <dl> tag defines the start of the list ( شروع لیست را تعریف می کند )
  2. <dt> tag defines a term ( اصطلاحی را تعریف می کند )
  3. <dd> tag defines the term definition (description). ( توضیحی بر اصطلاح )
  4.  
<dl>

  <dt>Aries</dt>

  <dd>-One of the ۱۲ horoscope sign.</dd>

  <dt>Bingo</dt>

  <dd>-One of my evening snacks</dd>

 <dt>Leo</dt>

 <dd>-It is also an one of the ۱۲ horoscope sign.</dd>

  <dt>Oracle</dt>

  <dd>-It is a multinational technology corporation.</dd>

</dl>

Output:

Aries

-One of the 12 horoscope sign.

Bingo

-One of my evening snacks

Leo

-It is also an one of the 12 horoscope sign.

Oracle

-It is a multinational technology corporation.

 

HTML Nested List  ( لیست تو در تو )

A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list

<!DOCTYPE html>

<html>

<head>

    <title>Nested list</title>

</head>

<body>

    <p>List of Indian States with thier capital</p>

<ol>

    <li>Delhi

        <ul>

            <li>NewDelhi</li>

        </ul>

    </li>

    <li>Haryana

        <ul>

            <li>Chandigarh</li>

        </ul>

    </li>

    <li>Gujarat

        <ul>

            <li>Gandhinagar</li>

        </ul>

    </li>

    <li>Rajasthan

        <ul>

            <li>Jaipur</li>

        </ul>

    </li>

    <li>Maharashtra

        <ul>

            <li>Mumbai</li>

        </ul>

    </li>

    <li>Uttarpradesh

        <ul>

            <li>Lucknow</li></ul>

    </li>

</ol>

</body>

</html>

Output:

image.png.257558c4de3c849465d3436b2226e84b.png

Link to comment
Share on other sites

  • Adrian changed the title to HTML Lists ( HTML ایحاد لیست در )
  • Author

HTML Ordered List | HTML Numbered List ( لیست مرتب و شماره گذاری شده )

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:

  • Numeric Number (1, 2, 3)
  • Capital Roman Number (I II III)
  • Small Romal Number (i ii iii)
  • Capital Alphabet (A B C)
  • Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
Type "1" This is the default type. In this type, the list items are numbered with numbers.
Type "I" In this type, the list items are numbered with upper case roman numbers.
Type "i" In this type, the list items are numbered with lower case roman numbers.
Type "A" In this type, the list items are numbered with upper case letters.
Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example

Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type="1" because it is the default type.

 
  1. <ol>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="I"

Let's see the example to display list in roman number uppercase.

 
  1. <ol type="I">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="i"

Let's see the example to display list in roman number lowercase.

 
  1. <ol type="i">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="A"

Let's see the example to display list in alphabet uppercase.

 
  1. <ol type="A">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="a"

Let's see the example to display list in alphabet lowercase.

 
  1. <ol type="a">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

start attribute

The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

 
  1. <ol type="i" start="5">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ol>  

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

reversed Attribute:

This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use the reversed attribute with

  1. tag then it will numbered the list in descending order (7, 6, 5, 4......1).

     

    Example:

     
    1. <ol reversed>  
    2. <li>HTML</li>  
    3. <li>Java</li>  
    4. <li>JavaScript</li>  
    5. <li>SQL</li>  
    6.  </ol>  
    Test it Now

    Output:

image.png.c61f13e777a583b07066aa8db25eb715.png

Link to comment
Share on other sites

  • Author

HTML Unordered List | HTML Bulleted List ( لیست نامرتب / بالت )

HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:

  • disc
  • circle
  • square
  • none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

نوع
این نوع سبک پیش فرض است و موارد لیست با دایره توپر (شبیه گلوله سیاه) مشخص می شود  “disc”
موارد لیست با حلقه یا دایره توخالی مشخص می شود  “circle”
موارد لیست با مربع مشخص می شود  “square”
موارد لیست هیچگونه علامتی ندارند  “none”
Type Description
Type "disc" This is the default style. In this style, the list items are marked with bullets.
Type "circle" In this style, the list items are marked with circles.
Type "square" In this style, the list items are marked with squares.
Type "none" In this style, the list items are not marked .

HTML Unordered List Example

 
  1. <ul>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  

 

Output:

  • HTML
  • Java
  • JavaScript
  • SQL

ul type="circle"

 
  1. <ul type="circle">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  

 

Output:

  • HTML
  • Java
  • JavaScript
  • SQL

ul type="square"

 
  1. <ul type="square">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  

 

Output:

  • HTML
  • Java
  • JavaScript
  • SQL

ul type="none"

 
  1. <ul type="none">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  

 

Output:

  • HTML
  • Java
  • JavaScript
  • SQL

Note: The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style-type. Following is the example to show the CSS property for ul tag.

 
  1. <ul style="list-style-type: square;">  
  2.     <li>HTML</li>  
  3.     <li>Java</li>  
  4.     <li>JavaScript</li>  
  5.     <li>SQL</li>  
  6.   </ul>  

Code:

 
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   </head>  
  5.  <body>  
  6.  <h2>The type attribute with CSS property</h2>  
  7.    <ul style="list-style-type: square;">  
  8.     <li>HTML</li>  
  9.      <li>Java</li>  
  10.            <li>JavaScript</li>  
  11.            <li>SQL</li>  
  12.     </ul>  
  13.  </body>  
  14. </html>     

 

Output:

HTML Unordered List | HTML Bulleted List 

 

image.png

Link to comment
Share on other sites

  • Author

HTML Description List | HTML Definition List ( لیست توضیحات / تعریف )

HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

  1. <dl> tag defines the description list.
  2. <dt> tag defines data term.
  3. <dd> tag defines data definition (description).
 
  1. <dl>  
  2.   <dt>HTML</dt>  
  3.   <dd>is a markup language</dd>  
  4.   <dt>Java</dt>  
  5.   <dd>is a programming language and platform</dd>  
  6.  <dt>JavaScript</dt>  
  7.  <dd>is a scripting language</dd>  
  8.   <dt>SQL</dt>  
  9.   <dd>is a query language</dd>   
  10. </dl>  

 

Output:

HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share

×
×
  • Create New...