HTML Lists, Images, and Links, CBSE Class 9 ICT Tutorial

Lists, images, and links are essential HTML elements that you will use in every web page. This chapter is important for both theory and practical exams in CBSE Class 9 ICT. Let us learn each one with complete examples and code.

HTML Lists

HTML provides three types of lists:

1. Ordered List (numbered)
2. Unordered List (bulleted)
3. Definition List (terms and definitions)

1. Ordered List (<ol>)

An ordered list displays items with numbers or letters. Each item is placed inside an <li> (list item) tag.

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Output:

1. First item
2. Second item
3. Third item

The type Attribute

The type attribute changes the numbering style:

<!-- Numbers (default) -->
<ol type="1">
    <li>Delhi</li>
    <li>Mumbai</li>
    <li>Kolkata</li>
</ol>

<!-- Uppercase letters -->
<ol type="A">
    <li>Physics</li>
    <li>Chemistry</li>
    <li>Biology</li>
</ol>

<!-- Lowercase letters -->
<ol type="a">
    <li>Red</li>
    <li>Blue</li>
    <li>Green</li>
</ol>

<!-- Uppercase Roman numerals -->
<ol type="I">
    <li>Chapter One</li>
    <li>Chapter Two</li>
    <li>Chapter Three</li>
</ol>

<!-- Lowercase Roman numerals -->
<ol type="i">
    <li>Introduction</li>
    <li>Body</li>
    <li>Conclusion</li>
</ol>

Type Value	Numbering Style	Example
1	Numbers (default)	1, 2, 3
A	Uppercase letters	A, B, C
a	Lowercase letters	a, b, c
I	Uppercase Roman	I, II, III
i	Lowercase Roman	i, ii, iii

The start Attribute

The start attribute sets the starting number:

<ol type="1" start="5">
    <li>This is item 5</li>
    <li>This is item 6</li>
    <li>This is item 7</li>
</ol>

Output:

5. This is item 5
6. This is item 6
7. This is item 7

2. Unordered List (<ul>)

An unordered list displays items with bullet points.

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
</ul>

Output:

- Apple
- Banana
- Mango

The type Attribute for Unordered Lists

<!-- Disc (default - filled circle) -->
<ul type="disc">
    <li>Item one</li>
    <li>Item two</li>
</ul>

<!-- Circle (hollow circle) -->
<ul type="circle">
    <li>Item one</li>
    <li>Item two</li>
</ul>

<!-- Square (filled square) -->
<ul type="square">
    <li>Item one</li>
    <li>Item two</li>
</ul>

Type Value	Bullet Style
disc	Filled circle (default)
circle	Hollow circle
square	Filled square

3. Nested Lists

You can place a list inside another list to create nested lists:

<ol>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Potato</li>
            <li>Onion</li>
            <li>Tomato</li>
        </ul>
    </li>
</ol>

Output:

1. Fruits
   - Apple
   - Banana
   - Mango
2. Vegetables
   - Potato
   - Onion
   - Tomato

Exam tip: Nested lists are a very common practical exam question. Practice writing them from memory.

4. Definition List (<dl>)

A definition list is used to display terms and their definitions.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - used to create web pages</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - used to style web pages</dd>

    <dt>URL</dt>
    <dd>Uniform Resource Locator - the address of a web page</dd>
</dl>

Tag	Purpose
<dl>	Definition list container
<dt>	Definition term (the word being defined)
<dd>	Definition description (the meaning)

HTML Images

The <img> tag is used to display images on a web page. It is a self-closing tag (no closing tag needed).

Basic Image Syntax

<img src="photo.jpg" alt="A beautiful photo">

Image Tag Attributes

Attribute	Purpose	Example
src	Source/path of the image (required)	src="images/logo.png"
alt	Alternative text (required)	alt="School Logo"
width	Width in pixels or percentage	width="300"
height	Height in pixels or percentage	height="200"
border	Border thickness in pixels	border="2"
align	Alignment of image	align="left"
hspace	Horizontal space around image	hspace="10"
vspace	Vertical space around image	vspace="10"

Image Examples

<!-- Basic image -->
<img src="flower.jpg" alt="Red Rose" width="400" height="300">

<!-- Image with border -->
<img src="logo.png" alt="Company Logo" border="3">

<!-- Image aligned to the right with spacing -->
<img src="nature.jpg" alt="Nature Scene" align="right" hspace="15" vspace="10">

<!-- Image from another folder -->
<img src="images/banner.jpg" alt="Website Banner" width="100%">

<!-- Image from the internet -->
<img src="https://www.example.com/photo.jpg" alt="Online Photo">

Image Formats

Format	Best For	File Size
JPEG (.jpg)	Photographs	Small
PNG (.png)	Graphics with transparency	Medium
GIF (.gif)	Simple animations	Small
BMP (.bmp)	Simple images	Large
SVG (.svg)	Scalable vector graphics	Very small

Using an Image as a Link

You can make an image clickable by wrapping it inside an anchor tag:

<a href="https://www.google.com">
    <img src="google-logo.png" alt="Google" width="200" border="0">
</a>

When users click the image, they will be taken to google.com.

HTML Links (Anchor Tag)

The <a> (anchor) tag creates hyperlinks that connect one page to another.

Basic Link Syntax

<a href="URL">Link Text</a>

Types of Links

1. External Links (to other websites)

<a href="https://www.google.com">Visit Google</a>
<a href="https://www.wikipedia.org">Visit Wikipedia</a>

2. Internal Links (to other pages on your site)

<a href="about.html">About Us</a>
<a href="contact.html">Contact Page</a>
<a href="pages/gallery.html">Photo Gallery</a>

3. Email Links

<a href="mailto:student@gmail.com">Send me an email</a>
<a href="mailto:info@school.com?subject=Admission Inquiry">
    Email for Admission
</a>

4. Links to Sections on the Same Page (Bookmarks)

First, create a bookmark with the id attribute:

<!-- Create bookmarks -->
<h2 id="top">Top of Page</h2>
...lots of content...
<h2 id="chapter2">Chapter 2</h2>
...more content...

<!-- Link to bookmarks -->
<a href="#top">Go to Top</a>
<a href="#chapter2">Go to Chapter 2</a>

Link Attributes

Attribute	Purpose	Values
href	Destination URL	Any URL or file path
target	Where to open the link	_blank, _self, _parent, _top
title	Tooltip text on hover	Any text

<!-- Open in new tab -->
<a href="https://www.google.com" target="_blank">
    Open Google in New Tab
</a>

<!-- Open in same tab (default) -->
<a href="page2.html" target="_self">
    Open in Same Tab
</a>

<!-- Link with tooltip -->
<a href="help.html" title="Click for help">
    Help
</a>

Target Attribute Values

Value	Opens Link In
_blank	New tab or window
_self	Same tab (default)
_parent	Parent frame
_top	Full browser window

Complete Example: A Web Page with Lists, Images, and Links

Here is a complete HTML page that uses all three elements together:

<!DOCTYPE html>
<html>
<head>
    <title>My School - Home Page</title>
</head>
<body bgcolor="#f0f0f0">
    <center>
        <img src="school-logo.png" alt="School Logo" width="150">
        <h1>Welcome to ABC Public School</h1>
    </center>

    <h2>Our Departments</h2>
    <ol type="I">
        <li>Science Department
            <ul type="circle">
                <li>Physics</li>
                <li>Chemistry</li>
                <li>Biology</li>
            </ul>
        </li>
        <li>Commerce Department</li>
        <li>Arts Department</li>
    </ol>

    <h2>Quick Links</h2>
    <ul>
        <li><a href="admission.html">Admissions</a></li>
        <li><a href="results.html">Results</a></li>
        <li><a href="mailto:info@abcschool.com">Contact Us</a></li>
        <li><a href="https://www.cbse.gov.in" target="_blank">CBSE Website</a></li>
    </ul>

    <h2>Campus Photos</h2>
    <a href="gallery.html">
        <img src="campus.jpg" alt="School Campus" width="400" border="1">
    </a>
    <p>Click the image above to see more photos.</p>

    <hr>
    <center>
        <p><small>Copyright 2026 ABC Public School</small></p>
    </center>
</body>
</html>

Important Questions

Q1. Differentiate between ordered and unordered lists in HTML.

An ordered list (<ol>) displays items with numbers, letters, or Roman numerals in a specific order. An unordered list (<ul>) displays items with bullet points without any specific order. Both use <li> tags for individual list items.

Q2. Write HTML code to create a nested list showing subjects and their topics.

See the nested list example above. Use <ol> for the outer list and <ul> inside <li> for the inner list.

Q3. What is the alt attribute in the <img> tag? Why is it important?

The alt attribute provides alternative text that is displayed when the image cannot be loaded. It is important for accessibility (screen readers read it for visually impaired users) and for SEO. It is a required attribute.

Q4. What is the difference between _blank and _self in the target attribute?

_blank opens the linked page in a new browser tab or window, while _self opens the linked page in the same tab, replacing the current page. _self is the default behavior.

Quick Revision

• Ordered list (<ol>), numbered items, type can be 1, A, a, I, i
• Unordered list (<ul>), bulleted items, type can be disc, circle, square
• Definition list (<dl>), uses <dt> for term and <dd> for definition
• Image tag (<img>), self-closing, must have src and alt
• Anchor tag (<a>), uses href for destination, target for where to open
• target="_blank" opens in new tab, _self opens in same tab, Wrap <img> inside <a> to make a clickable image