Links and attributes

Practice: connect your pages

Add a second page and connect it with relative links, a page fragment, an email link, and useful link text.

Your page needs somewhere to go.

Create about.html beside index.html. Give it the same complete document structure, then add a heading and one paragraph about why you are learning HTML.

Link the two pages:

<a href="about.html">About me</a>

On about.html, add the return link:

<a href="index.html">Back to the home page</a>

These are relative URLs. Both files live in the same folder, so the filename is enough.

Add a page fragment

Give the learning section on index.html an ID:

<h2 id="learning">What I am learning</h2>

Now link directly to it:

<a href="#learning">Jump to what I am learning</a>

Add an email link if you want visitors to contact you:

<a href="mailto:sam@example.net">Email me</a>

Use your real address only if you are comfortable publishing it.

Test every path

Click each link. Do not assume it works because the HTML looks correct.

Check the address bar when you move between pages. Notice how a relative URL becomes a complete URL after the browser resolves it.

Avoid link text such as “click here.” The text should describe the destination.

Copy the same header navigation markup onto both pages so visitors can move between them from anywhere. A working link buried at the bottom of one file is easy to forget on the second file.

When you test #learning, the address bar should show index.html#learning (or #learning if you are already on the home page). If nothing scrolls, check that the id on the heading matches the fragment exactly.

Email links open the visitor’s mail client. They are fine for contact pages, but bots scrape published addresses. Use them only when you accept that tradeoff.

You are done when you can move between both pages, jump to the learning section, and explain why each href has its current value.

Lesson completed