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.

15 minute lesson

~~~

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:[email protected]">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.

Done when

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

Lesson completed