Content updated
By the end, you can…
- Create a link with a destination and meaningful text.
- Choose an image path and a suitable text alternative.
One idea at a time
An anchor element, a, connects a reader to another location. Its href attribute stores the destination; the text between its tags names the link. An attribute supplies extra information in the opening tag. Put attribute values in quotes so the boundaries stay clear.
A URL is a web address, such as https://example.com/about.html. A full URL can point to another website. A relative path points from the current file to another file. If about.html sits beside index.html, the path about.html is enough. A link beginning with # points to an element with a matching id in the current page. id gives an element a name that must be unique within that page; the part after # is called a fragment.
An img element brings an image into the page. Its src identifies the file, while alt supplies a text alternative when the image is unavailable or cannot be seen. Describe the meaning the image contributes in this context. A purely decorative image should have an empty alt value rather than missing the attribute.
Walk through an example
<h1>My plant notebook</h1>
<p><a href="#care">Read the care notes</a></p>
<img src="plant.jpg" alt="Basil seedlings growing in three small pots">
<h2 id="care">Care notes</h2>
<p>Keep the soil slightly damp.</p>
<p><a href="about.html">About this notebook</a></p>Save a suitable photo as plant.jpg beside your HTML file, or change src to your actual filename. Create a second file called about.html for the final link. The first link moves to the Care notes heading because href="#care" matches id="care". The image has no closing tag: like meta, img is a void element. The sample photo is something you supply, not a file included by Tuklas.
See it happen: try a small change
Follow the link inside this preview. Then compare an image with its text alternative.
Code to notice
<a href="#supplies">See supplies</a>
<!-- later on the same page -->
<h2 id="supplies">Supplies</h2>Live result
What changed: The #supplies fragment matches an element's id. Click the link to jump to that section.
Read a destination before following it
An attribute adds information to an opening tag. In <a href="about.html">About my garden</a>, href supplies the destination and the words between the tags name the link. A complete https:// address points to a website; about.html points to a neighboring file; #care points to an id within the current page.
Click Read care notes in both versions. Watch whether the preview moves to Care notes.
Code to notice
<a href="#tips">Read care notes</a>
<h2 id="care">Care notes</h2>Live result
What changed: The link asks for tips, but no element has that id. The URL fragment can change without reaching the intended heading.
For an image that is also a link, choose alternative text that explains the destination, such as Garden club home. A decorative image can use alt="". An informative image needs text describing what it contributes. Width and height attributes can reserve image space; later, CSS will help images adapt to different screens.
Open links in the current tab by default. If you deliberately use target="_blank", tell readers that the link opens a new tab. In this lesson's embedded examples, navigation stays inside the preview.
Try it in your browser
Keep index.html and the about.html from lesson 2 in the same folder. Put your chosen image beside them and set src to its exact filename, including the extension. Save and refresh, then test the page link and the #care jump separately. If you have no image yet, complete both link tests and return to the image step later.
A common wrong turn
A broken image often means its filename or folder does not match src. Check capitalization too: a deployed server may distinguish Plant.jpg from plant.jpg. Avoid link text such as click here when you can name the destination instead. Someone scanning links should understand where each one goes without reading the whole paragraph.
Change one thing
Temporarily change the image filename in src to a file that does not exist. Inspect the result and think about whether the alternative text still communicates the important information. Restore the path afterward. Try changing the heading id without changing href: the jump stops finding its intended destination.
Your turn: connect a page and describe an image
Create a small book recommendation with a main heading and a link to a Notes heading in the same page. If you have a suitable image, add it with alternative text that explains its meaning. Otherwise, complete the link and write the intended image description in your notes until you have a file.
Try this in your own HTML file, then open the page in a browser. There is no separate checked practice for this task yet.
- Create the HTML page using your existing document structure. Add an image file you have permission to use if one is available.
- Add and test the #notes link. If you have an image, match its filename in src; otherwise write its intended description in your notes.
- Follow the link to the Notes heading. If you added an image, temporarily break its path to inspect the alternative text, then restore it.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.