HTML Part 3: List Element, Type Attribute of Ordered and Unordered List

Get unlimited access to the best preparation resource for UGC : Get detailed illustrated notes covering entire syllabus: point-by-point for high retention.

Discussion on HTML

  • List Element (Ordered List and Unordered List)

  • Video Tag

  • Summary Details

List Element

List element <li> is used to create a list of items.

List can be of two types:

  • Ordered List

  • Unordered List

Ordered List <ol>: This type of List can be used when ordered of items in the list is important. It can be created using <ol> tag.

Example:

  • Monday

  • Tuesday

  • Wednesday

  • Thursday

  • Friday

  • Saturday

  • Sunday

Type Attribute of Ordered List

This attribute is used to set the numbering type of the list

For Example:

  • If Numbering is 1, 2, 3… and so on then you can write type= “1”

  • If Numbering is A, B, C… and so on then you can write type= “A”

  • If Numbering is in Roman Numeral like I, II, III……… and so on, then you can write type= “I”

HTML Code to Create Ordered List

<ol type= “I”>

<li>Monday</li>

<li>Tuesday</li>

………………

<li>Sunday</li>

</ol>

Unordered List <ul>: This type of list is used when order of items in the list is not important. It can be created using <ul> tag.

Example: <ul type= “square”>

  • Sugar

  • Wheat

  • Rice

Type Attribute of Unordered List

In unordered list, type attribute is used to set the type of bullet.

  • type= “disc”

  • type= “circle”

  • Type= “square”

Html Code to Create Unordered List

  • <ul type= “square”>

  • <li>sugar </li>

  • <li> wheat</li>

  • <li> rice</li> </ul>

Code/Output

Coding

Code/Output: Coding

Code/Output: Coding

Loading image

Output

Unordered and Ordered List

Unordered and Ordered List

Loading image

Video Tag

  • To display the video like .mp4 file, we can use video tag.

  • The src i.e. source need to be given in the video tag

  • The alternative data or content also can be displayed at the beginning or ending of the video.

  • Lower versions of browsers sometimes unable to display the video.

  • Let us have the example.

Elements or attributes that can be used:

  • width

  • height

<!DOCTYPE html>

<html>

<body>

<h1>The video element</h1>

<video width= “320” height=“240” controls>

<source src= “earth.mp4” type= “video/mp4”>

Your browser does not support the video tag.

</video>

</body>

</html>

The Video Tag

The Video Tag

Loading image
The Video Element

The Video Element

Loading image

Summary Details

  • To show the summary details, we can use <p> as per our requirement.

  • To have perfect formatting, we can use css along with summary details

  • Css stands for Cascading Style Sheets.

  • Css is used for formatting and to give effective effects to the text or entire web page.

<!DOCTYPE html>

<html>

<head>

<style>

details > summary {

width: 300px.

background-colour: pink.

border: none.

cursor: pointer.

}

details > p {

background-colour: yellow.

padding: 4px.

margin: 0.

}

</style>

</head>

<body>

<h1>To show summary element</h1>

<details>

<summary>Summary Details of our website</summary>

<p>Uninitialized pointer in C is called wild pointer which points to a random memory location. It may cause a program to crash or behave wrongly. </p>

</details>

<p><b>Note:</b> Not supported in your browser, kindly use updated version. </p>

</body>

</html>

Just save the text document with abc.html and open with any browser (execute the program).

Output: Summary Tag

Output: Summary Tag

Output: Summary Tag

Loading image

MCQ

Q-1 Which tag is used to add element in the list?

1. <ul>

2. <ol>

3. <li>

4. <p>

Ans: 3. <li>

Q-2 Css is used for which of the following given purpose?

1. Underline the text

2. Highlight the content

3. Formatting effects

4. Outlines the entire web page of the website

Ans: 3. Formatting effects