HTML: Lists, Links and Images

A list is a set of items shown one below another, each carrying a marker such as a number or a bullet. HTML — HyperText Markup Language — gives you three kinds of list: the ordered list, the unordered list and the description list. This section deals with the first of them.

An ordered list is used when the order of the items carries meaning — the steps of a procedure, the positions in a merit list, the stages of booking a railway ticket. It is written with the container tag <ol> and closed with </ol>. Every item inside it is written with the list item tag <li> ... </li>. You never type the numbers yourself; the browser generates them.

<ol>
  <li>Open the IRCTC website</li>
  <li>Search for the train</li>
  <li>Enter the passenger details</li>
  <li>Pay using UPI or a debit card</li>
</ol>

This displays as items 1, 2, 3 and 4. Insert a new step in the middle or delete one, and the whole list renumbers itself. That automatic renumbering is the advantage an examiner expects you to state when asked why a list tag is better than typing numbers into a paragraph.

The type attribute changes the style of the marker. It is written inside the opening <ol> tag and applies to every item of that list. Its five values are: 1 for ordinary numbers (this is the default, used when you write no type at all), A for capital letters, a for small letters, I for capital Roman numerals and i for small Roman numerals. The letter values are case sensitive: type="A" produces A, B, C while type="a" produces a, b, c, and type="I" produces I, II, III while type="i" produces i, ii, iii. All five values above are valid; typing one of them in the wrong case simply gives the wrong style of marker, which is a common slip in the exam.

The start attribute tells the browser which value to begin counting from. Its value is always a plain number, even when the markers are letters or Roman numerals. So start="3" means the third marker of whichever style you chose — the numeral 3, the letter C, or the Roman numeral III. This is useful when a long list has been broken by a paragraph of explanation and the second part must carry on from where the first stopped.

<ol type="I" start="4">
  <li>Physics practical</li>
  <li>Chemistry practical</li>
  <li>Computer practical</li>
</ol>

Because the style is capital Roman and counting starts at 4, the three items are marked IV, V and VI. Note that start="IV" would be wrong; the number is what the attribute expects.

Two more points that examiners test. First, both attributes go on the opening <ol> tag, not on <li>. Second, an ordered list may hold ordinary text, other tags such as <strong>, images or even another list inside each <li>. A full-mark answer about ordered lists names the tag pair, says that each item is marked with <li>, names the attribute with its permitted values, and shows a two-line or three-line example.

An unordered list is used when the items belong together but no order is intended — the subjects offered by a school, the facilities in a computer lab, the documents needed for admission. It is written with the container tag <ul> ... </ul>, and once again each item is a <li> ... </li>. The browser places a bullet before every item.

<ul type="square">
  <li>Birth certificate</li>
  <li>Transfer certificate</li>
  <li>Two passport size photographs</li>
</ul>

The type attribute on <ul> chooses the bullet shape and takes three values: disc, a filled round bullet, which is the default when no type is written; circle, a hollow round bullet; and square, a small filled square. These values are written in small letters. Note that <ul> has no start attribute — there are no numbers to start from. Present-day practice is to control bullet shapes through style rules rather than the type attribute, and the exact size and shade of a bullet differs slightly from browser to browser, but the attribute is still understood by browsers and is part of what you are expected to know.

The third kind of list is the description list, called a definition list in older books and in many CBSE textbooks; both names refer to the same tags. It is used where every entry has two parts — a term and its explanation. A glossary of computer words, a fee table showing each head and what it covers, or a list of subjects with their descriptions all fit this pattern. Three tags work together:

• <dl> ... </dl> — the description list itself, the container.
• <dt> ... </dt> — the description term, the word being explained.
• <dd> ... </dd> — the description data, the meaning of that term.

<dl>
  <dt>LAN</dt>
  <dd>Local Area Network — a network within one building or campus.</dd>
  <dt>URL</dt>
  <dd>Uniform Resource Locator — the complete address of a page on the web.</dd>
</dl>

Browsers normally show the term at the left margin and indent the description below it, which is why a description list looks neater than a table for a short glossary. A single <dt> may be followed by more than one <dd> when a term has two meanings, and two <dt> tags may share one <dd> when two terms mean the same thing.

Examiners like the comparison, so keep it ready. An ordered list numbers its items and is for sequences; an unordered list bullets its items and is for collections; a description list has no marker at all and is for term-and-meaning pairs. The item tag is <li> in the first two but <dt> and <dd> in the third — writing <li> inside <dl> is wrong. A frequent slip is to think that <dd> must go inside <dt>; the two are separate tags, one after the other, both directly inside <dl>.

Nesting means placing one list inside another so that the inner list becomes a set of sub-items under one item of the outer list. A school website uses this constantly: a menu of sections, each section holding its own set of pages; a syllabus with subjects, each subject holding its chapters.

There is one rule to remember, and it is the rule that carries the marks. The inner list is written inside an <li> of the outer list, before that <li> is closed. A list placed directly inside <ol> or <ul>, as a neighbour of the <li> tags rather than inside one of them, is incorrect HTML even though a browser may still display something.

<ol type="I">
  <li>Science
    <ul type="circle">
      <li>Physics</li>
      <li>Chemistry</li>
      <li>Biology</li>
    </ul>
  </li>
  <li>Commerce
    <ul type="circle">
      <li>Accountancy</li>
      <li>Business Studies</li>
    </ul>
  </li>
</ol>

Read that code slowly. The word Science and the whole inner <ul> together form item I; the closing </li> comes only after </ul>. The browser shows I. Science with three hollow bullets indented below it, then II. Commerce with two.

Any list may be nested inside any other. An unordered list may sit inside an ordered list, an ordered list inside an unordered list, and a description list may hold a list inside a <dd>. Nesting may go more than one level deep, though a page becomes hard to read beyond two or three levels.

Two points about how the result looks. The indentation you type in the code has no effect on the display; HTML ignores the extra spaces and new lines. Indent your code anyway, because a nested list that is not indented is very hard to check for missing closing tags, and neatness of code is part of what a practical examiner sees. Second, if you do not write a type attribute, most browsers change the bullet automatically at each level — commonly a filled disc at the first level, a hollow circle at the second and a square at the third — but this is a default built into the browser rather than a rule of HTML, so it can differ between browsers. If you need a particular bullet, state it with the type attribute instead of relying on the default.

The mistakes to avoid when a nested list appears in a question paper are usually the same three. Closing the outer <li> too early, so the inner list falls outside its parent item. Forgetting the closing </ul> or </ol> of the inner list, which makes the rest of the page part of that list. And crossing the tags — writing </li> before </ul> when the <ul> was opened inside that <li>. Tags must close in the reverse order in which they were opened, exactly like brackets in a mathematics expression.

A quick way to check your own answer is to count: every <ol>, <ul> and <li> you open must have one closing tag, and the innermost tag you opened must be the first one you close.

A hyperlink, usually shortened to link, is a piece of text or an image that takes the visitor to another document when it is clicked. Links are what turn a set of separate pages into a website, and the whole World Wide Web is built on them.

A link is written with the anchor tag, <a> ... </a>. The address of the destination is given by the href attribute, short for hypertext reference. Whatever you write between the opening and closing anchor tags is the link text — the part the visitor sees and clicks.

<a href="admission.html">Admission details</a>

By default browsers show link text underlined and in a different colour, and usually in another colour once the link has been visited. The exact colours are a browser setting and can be changed by the page author, so do not claim in an answer that links are always blue.

The address in href is a URL — Uniform Resource Locator, the complete address of a resource on the web. A full URL has a protocol, a domain name and a path, which may end in a file name, as in https://www.irctc.co.in/nget/booking. Here HTTPS is the protocol (HyperText Transfer Protocol Secure, the encrypted form of HTTP, the HyperText Transfer Protocol that carries web pages), www.irctc.co.in is the domain name and the rest is the path within that site.

An absolute link gives the complete URL, including the protocol and the domain name. It points at one fixed place on the internet and works from any page on any site. You must use an absolute link whenever the destination is on a different website.

<a href="https://www.irctc.co.in">Book a train ticket</a>

A relative link gives only the path from the folder of the current page to the destination file. It has no protocol and no domain name, so it can only reach files on the same site. Suppose a school website is arranged with index.html at the top, a folder pages holding fees.html and contact.html, and a folder images. Then, writing from index.html:

• <a href="about.html">About us</a> — a file in the same folder, named directly.
• <a href="pages/fees.html">Fee structure</a> — a file one folder down; the folder name and a forward slash come first.
• <a href="../index.html">Home</a> — written from inside pages, where ../ means go up one folder.
• <a href="/index.html">Home</a> — a leading forward slash means start at the top folder of this site.

Why prefer a relative link inside your own site? Because the whole site can be copied to another folder, another computer or another web server and every relative link still works, since the files keep the same positions with respect to each other. Absolute links would all have to be edited. Relative links are also shorter to type.

Three errors to avoid. Do not put a full path from your own computer, such as a drive letter and folder names, in href — that works only on the machine where the file was made and fails for every visitor. Do not leave out the closing </a>, or the rest of the page may become part of the link. And avoid spaces in file and folder names; use a hyphen instead, as in fee-structure.html. Remember also that path names are treated as case sensitive by many web servers, so Fees.html and fees.html may not be the same file once the site is published.

A link does not have to lead to a different page. It can jump to a chosen place on the same page, start an email, or hand over a file. All three are still written with <a href="...">; only the value inside href changes.

Linking to a section of the same page takes two steps. First, mark the destination by giving that element an id attribute — a name you invent, which must be unique on the page and should contain no spaces. Second, write a link whose href is a hash symbol followed by that id.

<p><a href="#fees">Go to fee structure</a></p>

<p id="fees"><strong>Fee structure</strong></p>
<ul>
  <li>Tuition fee: ₹1200 per month</li>
  <li>Bus fee: ₹600 per month</li>
</ul>

Clicking the link scrolls the page down to the paragraph whose id is fees, without loading anything new. Note carefully: the hash is written only in href, never in the id itself. Such a link is often called an internal link or a bookmark link, and a long page usually has a list of these at the top and a Back to top link at the bottom. In most browsers, <a href="#">Top</a> returns to the top of the page. Older pages used <a name="fees"></a> to mark the spot; the id attribute is the current way and works on any tag.

The same idea reaches a section of another page: put the file name first and the hash after it, as in <a href="fees.html#bus">Bus charges</a>. The browser loads fees.html and then scrolls to the element whose id is bus.

Linking to an email address uses the mailto: scheme inside href, followed by the address with no space after the colon.

<a href="mailto:office@school.edu.in">Write to the office</a>

Clicking it opens the mail program set as the default on that device, with the address already filled in. It does not send anything by itself, and if no mail program is configured the click may appear to do nothing — behaviour here depends on the device and the browser, so a page should also print the address as plain text. A subject line can be suggested by adding ?subject=Admission%20Enquiry after the address, where %20 stands for a space.

Linking to a file needs nothing special: point href at the file just as you would at a page.

<a href="files/fee-structure.pdf">Fee structure (PDF)</a>

Whether the file opens inside the browser or is saved to the device depends on the file type and on the browser's own settings; a PDF often opens in a built-in viewer, while a compressed file is normally downloaded. Because the visitor cannot tell in advance, name the file type in the link text.

The target attribute decides where the new document is displayed. It is written in the opening anchor tag and takes four standard values: _self, the default, which replaces the current page in the same window or tab; _blank, which opens the destination in a new tab or a new window — which of the two you get is decided by the browser and its settings; _parent, which loads it into the parent frame; and _top, which loads it into the full window, cancelling all frames. The last two matter only on pages built with frames. Every value begins with an underscore.

<a href="https://www.irctc.co.in" target="_blank">IRCTC</a>

The usual reason for target="_blank" is a link to somebody else's website: the visitor can look at it without losing your page.

An image is placed on a page with the image tag, <img>. It is an empty element, also called a void or single tag: it has no closing tag and no content between tags, because everything it needs is supplied by its attributes. In the XHTML style of writing it appears as <img ... />, with a slash before the closing angle bracket.

An important idea to state in an exam answer: the picture is not stored inside the HTML file. The HTML file holds only the address of the picture; when the page is opened, the browser fetches each image separately and places it where the tag appears. That is why a web page with many large images loads slowly, and why the images must be copied along with the HTML file when the site is moved.

<img src="images/annual-day.jpg" alt="Students at the annual day function"
     width="400" height="250">

src — short for source — is the compulsory attribute that gives the address of the image file. Without it there is nothing to show. The address follows the same rules as a link: it may be relative, such as logo.png or images/logo.png or ../images/logo.png, or it may be an absolute URL pointing at an image on another site. Keeping all pictures in one folder named images is the usual arrangement. If the path is wrong or the file has been renamed, the browser cannot find the picture and shows a broken-image marker along with the alt text.

alt — short for alternative text — is a short description of the picture in words. It is displayed in place of the image when the image cannot be shown, and it is read aloud by screen-reading software.

width and height set the displayed size of the image, measured in pixels (a pixel is one dot of the screen). Give both and the browser reserves exactly that much space before the picture arrives, so the text does not jump about while the page loads. If you set only one of the two, current browsers scale the other to keep the original proportion. If you set both carelessly, the picture is stretched or squashed: to enlarge or reduce an image without distortion, change width and height in the same ratio. Note also that these attributes change only the size on screen — the file that has to travel over the connection is just as big, so a large photograph should be resized in an image editor rather than shrunk with width and height.

align positions the image with respect to the text around it. The values left and right push the image to that side and let the text flow around it; top, middle and bottom line up a single line of neighbouring text with the top, centre or base of the image. This is a legacy attribute: newer standards expect the same effects to be produced by style rules, and how faithfully it is honoured can differ between browsers, so treat align as something to recognise and explain rather than to rely on.

A full-mark answer on the image tag says that <img> is an empty tag, names src as compulsory, names alt and explains it, and gives width and height in pixels — supported by one correct line of code.

Why the alt attribute matters is a favourite question, and it has four separate answers. Give more than one and the answer is complete.

• If the image cannot be displayed — a wrong path, a deleted file, a slow or interrupted connection, or a browser set to load no images — the alt text appears in its place, so the visitor still knows what was meant to be there.
• A visitor who cannot see the screen uses a screen reader, software that reads a page aloud. It cannot describe a picture, so it reads the alt text. Without alt, that part of the page is simply silent.
• Search engines read text, not pictures. The alt text tells them what the image shows, which helps the page be found.
• Alt text is also shown by some browsers as a small label, and writing it is part of correct, valid HTML.

Good alt text is short and describes the content or purpose of the image: alt="School bus in the front porch", not alt="image1" or alt="photo". For a purely decorative picture such as a divider line, an empty alt="" is correct, because then a screen reader knows to skip it.

An image can be used as a link. Place the <img> tag between the opening and closing anchor tags; the whole picture then becomes clickable. This is how the logo at the top of nearly every site returns you to the home page.

<a href="index.html">
  <img src="images/logo.png" alt="School home page"
       width="150" height="60">
</a>

Two points for marks. The alt text of a linked image should say where the link goes, not merely what the picture looks like, because that is what a screen reader announces. And an image link may use every anchor attribute, so target="_blank" works here exactly as it does with text. Some older browsers drew a coloured border around a linked image, which was removed with border="0"; current browsers generally do not add such a border.

Image file formats. Different formats store pictures in different ways, and choosing correctly keeps a page both clear and quick to load.

• JPEG or JPG (Joint Photographic Experts Group) — for photographs. It handles a very large number of colours and compresses strongly, but the compression is lossy: some detail is thrown away each time the file is saved. It supports neither transparency nor animation.
• PNG (Portable Network Graphics) — for logos, screenshots, diagrams and anything with sharp edges or text. Its compression is lossless, so no detail is lost, and it supports a transparent background. Photographs saved as PNG are usually much larger than the same photograph as JPEG.
• GIF (Graphics Interchange Format) — for small, simple graphics and short animations. It is limited to 256 colours, which makes it unsuitable for photographs, but it supports simple transparency and is the traditional format for a moving icon.
• SVG (Scalable Vector Graphics) — for logos, icons and diagrams drawn from lines and shapes. It stores instructions rather than dots, so it stays perfectly sharp at any size.
• BMP (Bitmap) — a plain, largely uncompressed format. The files are very large, so it is avoided on web pages.

So a photograph of the annual day goes in as JPEG, the school badge with a transparent background as PNG or SVG, and a small blinking icon as GIF. When a question asks you to justify a choice, name the format and give the property that decides it — colours, transparency, animation, sharpness or file size.