📄 Web Development

HTML — Text, Lists, Images & Links

⏱ 3 hr3 topicsInteractive

🎯 By the end: You can write a valid HTML5 page, format text, build lists, place images, and create links to other pages and sites.

HTML (HyperText Markup Language) is the language of web pages. It uses tags in angle brackets — usually a pair like <p> ... </p>. Edit the live examples and press Run to see your page render instantly.

1Page skeleton & text formatting

Every HTML5 page has the same four-tag skeleton:

<html>
  <head><title>My Page</title></head>
  <body> ...visible content... </body>
</html>

Tag	Does
`<h1>`…`<h6>`	Headings (h1 largest → h6 smallest)
`<p>`	A paragraph
`<br>` / `<hr>`	Line break / horizontal rule
`<strong>`	Important text (bold)
`<em>`	Emphasised text (italic)

Try it — edit and Run:

Your first page▶ live preview

index.html

<html>
  <head><title>About Me</title></head>
  <body>
    <h1>Hello, Vidaara!</h1>
    <p>This is <strong>important</strong> and this is <em>emphasised</em>.</p>
    <hr>
    <p>Line one<br>Line two</p>
  </body>
</html>

Preview

Key points

The HTML skeleton is <html>, <head>, <title>, <body>.
Headings <h1>–<h6> (h1 largest); <p> for paragraphs; <br> line break; <hr> horizontal rule.
<strong> marks important text (bold); <em> marks emphasis (italic) — the modern HTML5 way.

2Lists

Two kinds of list, each holding items written with <li>:

Ordered list <ol> — numbered (1, 2, 3).
Unordered list <ul> — bulleted.

Edit the list below and Run:

Lists▶ live preview

index.html

<h3>Steps (ordered)</h3>
<ol>
  <li>Open the editor</li>
  <li>Write HTML</li>
  <li>Press Run</li>
</ol>

<h3>Subjects (unordered)</h3>
<ul>
  <li>Computers</li>
  <li>Maths</li>
</ul>

Preview

Key points

<ol> makes a numbered list; <ul> makes a bulleted list.
Each item is written with <li> ... </li>.
Use ordered lists when sequence matters, unordered when it doesn't.

3Images & links

The <img> tag inserts an image (it's an empty tag):

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

The anchor tag <a> makes a hyperlink:

External link — to another website: <a href="https://vidaara.org">
Internal link — to another page on your own site: <a href="about.html">

Run this to see an image and links:

Images & links▶ live preview

index.html

<p>Our logo:</p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='50'%3E%3Crect width='120' height='50' rx='8' fill='%23e67009'/%3E%3Ctext x='60' y='32' font-family='sans-serif' font-size='16' fill='white' text-anchor='middle'%3EVidaara%3C/text%3E%3C/svg%3E" alt="Vidaara logo" width="120" height="50">

<p>Visit <a href="https://vidaara.org" target="_blank">our website</a>.</p>

Preview

Key points

<img> inserts an image; src (the file) is required, plus alt, width, height.
<a href="..."> makes a hyperlink; the text/image between the tags is clickable.
External links go to another website; internal links go to another page on your own site.

★ Practical: a profile page

Build one HTML page with:

A title, an <h1> heading and two paragraphs using <strong> and <em>.
An ordered list and an unordered list.
An image with src, alt, width and height.
An external link that opens in a new tab.

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

Excel — Advanced Features

HTML Tables & Forms