Skip to content
SQ/EN

7 min read

American Corners

Text, images and links

Beyond headings and paragraphs

You can already build the skeleton of a page. Now we fill it with the content people actually come for. Three kinds of element carry most of the weight on a real page: lists that organise items, images that show rather than tell, and links that turn a lone page into part of the web. None of them is hard. Each is a tag or two, and by the end of this lesson you can assemble a page that feels genuinely useful.

Lists: ordered and unordered

Whenever information is a set of items, a list makes it far easier to read than a wall of commas. HTML gives you two.

An unordered list uses <ul> and shows each item with a bullet. Reach for it when the order does not matter.

<ul>
  <li>Bread</li>
  <li>Olives</li>
  <li>Cheese</li>
</ul>

An ordered list uses <ol> and numbers the items automatically. Reach for it when the sequence matters, like the steps of a recipe.

<ol>
  <li>Boil the water</li>
  <li>Add the pasta</li>
  <li>Wait ten minutes</li>
</ol>

In both, each item is wrapped in <li>, short for list item. Switching a list from bullets to numbers is as small a change as <ul> to <ol>; the items stay exactly the same.

Images

An image is placed with <img>, one of those empty tags that needs no closing partner. It carries its instructions in attributes, which are extra settings written inside the opening tag as name="value".

<img src="garden.jpg" alt="Rows of young tomato plants">

The src attribute, short for source, says which file to show. If the image sits in the same folder as your page, the file name alone is enough. The alt attribute gives a short description in words. It is read aloud by screen readers for people who cannot see the image, and it shows if the file ever fails to load. Writing a real alt is not optional politeness; it is part of doing the job properly.

Links are what make it a web rather than a pile of separate pages. A link uses the <a> tag, short for anchor, and its href attribute holds the destination address.

<a href="https://example.org">Visit our page</a>

The text between the tags is what the visitor sees and clicks; the href is where the click sends them. You can link to another site, or to another file of your own by naming it, like href="about.html". Write link text that says where it goes: "read the full recipe" tells the reader far more than a bare "click here".

A worked example: a small recipe page

Let us pull all three together into one page for a simple lentil soup. It has an ordered list for the steps, an image of the finished dish, and a link out to where the reader can find more.

<html>
  <head>
    <title>Lentil Soup</title>
  </head>
  <body>
    <h1>Lentil soup for a cold day</h1>
    <img src="soup.jpg" alt="A bowl of lentil soup with bread">
    <h2>Steps</h2>
    <ol>
      <li>Soften an onion in oil</li>
      <li>Add lentils and water</li>
      <li>Simmer until soft</li>
    </ol>
    <p><a href="more-recipes.html">See more recipes</a></p>
  </body>
</html>

Read it top to bottom and it plays out in order: a heading, a picture, numbered steps, then a way to go further. That is a complete, honest little page, and every part of it is a tag you now recognise. Structure holds it up; this content is what people came for.

Try this now

Open a new file, save it as favourites.html, and build a tiny page about something you like: an <h1> heading, a <ul> list of three items, one <img> with a real alt description, and one <a> link out to a related page. Open it in a browser and check that the list shows bullets and the link goes where you meant.

Check yourself

  1. You are writing the assembly steps for a piece of furniture, where doing step three before step two would go wrong. Which list type fits, and why?
  2. What does the alt attribute on an image do, and name two different situations where it matters to a real visitor.
  3. In <a href="about.html">Learn about us</a>, which part is the destination and which part does the visitor actually see and click?

Where this lesson comes from

Built from

  • Data Structures and Algorithms: web development session

alphaPlan courses are built from taught programmes rather than invented for the web. Where a claim rests on an outside standard or a reported case, it is named above so you can check it rather than take our word for it.

This course was developed by alphaPlan Center from programs delivered in partnership with the American Corners network.

Found something unclear, outdated or improvable? Suggest an improvement