🔗 HTML

Lists, Images & Links

⏱ 2 hr3 topicsInteractive

🎯 By the end: You can build numbered and bulleted lists, place an image with proper attributes, and create links to other pages, to email and to new tabs.

Three things make web pages useful: lists organise information, images illustrate it, and links connect pages into a whole website. This chapter covers all three (CBSE 165).

1Ordered and unordered lists

HTML has two kinds of list, each holding list items written with <li>:

Ordered list <ol> — numbered (1, 2, 3 …). Attributes: type (1, A, a, I, i) and start (the first number).
Unordered list <ul> — bulleted. Attribute: type (disc, circle, square).

<ol type="A" start="3">
  <li>Item</li>
  <li>Item</li>
</ol>

Use an ordered list when sequence matters (steps in a recipe) and an unordered list when it doesn't (a shopping list).

Lists playground▶ live preview

index.html

<h3>To-do (ordered)</h3>
<ol type="1">
  <li>Read the chapter</li>
  <li>Try the playground</li>
  <li>Take the quiz</li>
</ol>

<h3>Subjects (unordered)</h3>
<ul type="square">
  <li>Computer Applications</li>
  <li>Mathematics</li>
</ul>

Preview

Key points

<ol> makes a numbered list; type can be 1, A, a, I or i and start sets the first number.
<ul> makes a bulleted list; type can be disc, circle or square.
Both contain list items written with <li> ... </li>.

2Inserting images

The <img> tag places an image. It is an empty tag (no closing tag) and relies on attributes:

Attribute	Meaning
`src`	The image file's address (path or URL) — required
`alt`	Alternate text shown if the image can't load (and read by screen readers)
`width`	Width in pixels
`height`	Height in pixels

<img src="logo.png" alt="Vidaara logo" width="120" height="80">

Always give a meaningful alt — it keeps your page usable when the image is missing or for visually-impaired users.

Key points

<img> is an empty tag; src (the file address) is required.
alt gives alternate text shown when the image can't load and read by screen readers.
width and height set the image size in pixels.

3Linking pages with the anchor tag

The anchor tag <a> creates a hyperlink. Its main attributes:

Attribute	Does
`href`	The destination — another page, a website, or a section
`target`	Where to open it; `_blank` opens a new tab

<a href="about.html">About us</a>
<a href="https://vidaara.org" target="_blank">Visit Vidaara</a>
<a href="mailto:help@vidaara.org">Email us</a>

A special form, href="mailto:...", opens the user's email app to write to that address. You can also wrap an image in an anchor to make the image clickable.

Links playground▶ live preview

index.html

<p>Go to the <a href="https://vidaara.org" target="_blank">Vidaara website</a>.</p>
<p><a href="mailto:help@vidaara.org">Send us an email</a></p>
<p>An image link:
  <a href="https://vidaara.org">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='40'%3E%3Crect width='110' height='40' rx='6' fill='%23e67009'/%3E%3Ctext x='55' y='25' font-family='sans-serif' font-size='14' fill='white' text-anchor='middle'%3EVidaara%3C/text%3E%3C/svg%3E" alt="Vidaara" width="110" height="40">
  </a>
</p>

Preview

Key points

<a href="..."> makes a hyperlink; the text (or image) between the tags is what you click.
target="_blank" opens the link in a new tab.
href="mailto:address" opens the email app to write to that address.

★ Practical: a mini links page

Build one page that contains:

An ordered list of three steps and an unordered list of three items.
An image with src, alt, width and height.
A link to another website that opens in a new tab.
A mailto link and one clickable image.

Ready for the chapter test?

Answer 5 questions. Score 60% or more to mark this chapter complete.

Start the test →

💡 Log in to save your progress and earn the certificate.

← Previous

HTML Structure & Text Formatting

Tables & Multimedia