Text, links, images, and lists · HTML and CSS

The everyday HTML elements, covering paragraphs and emphasis, links (absolute, relative, in-page and email), images with good alt text, and ordered, unordered and nested lists.

The idea

Most of any web page is made of a handful of elements: paragraphs, links, images and lists. Module 1 introduced them; this module covers how to use each one well, because small choices (a missing alt, a vague link text, a list built from line breaks) are the difference between a page that works for everyone and one that only looks right.

Text

Most of a page is plain text, and HTML gives you a few elements for marking up what that text is doing. Here's the top of Toko Kita's home page, using the ones you'll reach for most:

<h1>Toko Kita</h1>
<p>We roast <strong>every Monday</strong> and ship within <em>two working days</em>.</p>
<p>Questions? Our team replies within a day.<br>Monday to Friday, 09:00–17:00 WIB.</p>
<p>Prices include 11% VAT. <small>Shipping is calculated at checkout.</small></p>

 for paragraphs. Each one is a block with space around it.
 for importance,  for emphasis (the stress you'd put on a word when speaking).
  for a line break inside a paragraph, like lines of an address. Never use   to make space between paragraphs; that's CSS's job.
 for side comments and fine print.

Links

Links are what make the web a web. The same <a> (anchor) element can link to another website, another page on your own site, a section further down the same page, or even an email address or phone number. What changes is the address you put in href:

<p><a href="https://www.python.org">Python's website</a> (absolute: full address)</p>
<p><a href="/products">All products</a> (relative to the site root)</p>
<p><a href="about.html">About us</a> (relative to the current page)</p>
<p><a href="#shipping">Jump to shipping info</a> (a section on this page)</p>
<p><a href="mailto:[email protected]">Email us</a> · <a href="tel:+62211234567">Call us</a></p>

<h2 id="shipping">Shipping</h2>
<p>We ship to every province in Indonesia.</p>

Absolute URLs start with https:// and work from anywhere.
Relative URLs (/products, about.html) point within the same site, so they keep working if the domain changes.
#shipping jumps to the element with id="shipping" on the same page.
mailto: and tel: open an email app or a phone dialler.

Link text should make sense on its own. Screen reader users often jump from link to link, hearing only the link text. "Click here" tells them nothing; "Download the price list (PDF)" tells them everything.

To open a link in a new tab, add target="_blank". Use it sparingly (people can choose to open tabs themselves), and pair it with rel="noopener", which stops the new page from controlling yours.

Images

Toko Kita's home page needs a photo of a barista and one of this week's coffee beans. An image needs more than just the file to show, though: it needs a description for people who can't see it, and its size, so the page doesn't jump around while it loads:

<img src="https://picsum.photos/id/1060/400/250" alt="Barista pouring milk into a cup of latte" width="400" height="250">

<figure>
  <img src="https://picsum.photos/id/431/400/250" alt="Bags of roasted coffee beans on a wooden shelf" width="400" height="250">
  <figcaption>This week's roast: Arabica Gayo.</figcaption>
</figure>

src: the image file or URL.
alt: what the image shows, for people who can't see it (screen readers, slow connections, search engines). Describe the content and purpose, not "image of". For purely decorative images, use an empty alt="" so screen readers skip them.
width and height: the image's size. The browser reserves the space before the image loads, so the page doesn't jump around.
<figure> with <figcaption> groups an image with a visible caption.

Lists

Use lists whenever content is a list: navigation links, features, steps, ingredients.

<h2>Why Toko Kita?</h2>
<ul>
  <li>Freshly roasted every week</li>
  <li>Free shipping over Rp 300.000</li>
  <li>Beans from 12 Indonesian regions</li>
</ul>

<h2>Brewing with a French press</h2>
<ol>
  <li>Add 15 g of coarse ground coffee.</li>
  <li>Pour 250 ml of water at 93 °C.</li>
  <li>Wait 4 minutes, then press slowly.</li>
</ol>

<h2>Menu</h2>
<ul>
  <li>Coffee
    <ul>
      <li>Espresso</li>
      <li>Latte</li>
    </ul>
  </li>
  <li>Tea</li>
</ul>

<ul> (unordered): order doesn't matter. Bullets by default.
<ol> (ordered): order matters, like steps. Numbers by default.
Every item is an <li>, and only <li> elements go directly inside <ul> and <ol>.
A nested list goes inside an <li>, not between them.

Screen readers announce "list, 3 items", so users know what's coming. Lines separated by   don't get that.

Key idea

Choose elements by meaning: / for importance and emphasis, links with descriptive text, images with honest alt text and dimensions, and real <ul>/<ol> lists for anything that's a list.

Why this matters for clean code

The right element carries information for free: a list says "these items belong together", a link text says where it goes, an alt says what an image shows. Pages built that way need less CSS, less JavaScript and fewer fixes later, and they're accessible from the start instead of after an audit.

Recap

 paragraphs; , , ;   only for line breaks within a paragraph.
<a href>: absolute, relative, #id, mailto:, tel:. Link text must make sense alone.
<img src alt width height>; alt="" for decorative images; <figure> + <figcaption> for captions.
<ul> and <ol> with <li> items; nest lists inside an <li>.