HTML Links & Navigation: Free Practice Lesson

A link has a destination and a label.

An anchor element, a, connects one location to another. Its href attribute holds the destination; the text between its tags tells the reader what they will find.

<a href="about.html">About this notebook</a>

Here, the browser looks for a file named about.html relative to the current document. The visible label is “About this notebook.” A clear label is more useful than repeated “click here” links, especially when someone scans a page or navigates using assistive technology.

Links and buttons have different jobs.

Use a link to go somewhere: another page, a document, or a section of the current page. Use a button for an action such as submitting a form or opening an interactive menu. A button-shaped design does not change that underlying purpose.

Three destinations to understand.

href="about.html": A relative path: look beside the current document for about.html. Moving both files together keeps this connection intact.
href="https://webostics.com/resources": An absolute web address: open that resource page on the Webostics website. You need an internet connection to visit it.
href="#projects": A fragment: navigate to the element whose id is projects in the current document. The spelling must match the id.

Give a section an address.

<a href="#projects">My projects</a>

<section id="projects">
  <h2>My projects</h2>
  <p>A few things I want to build.</p>
</section>

Each id should identify one element within the page. A fragment may not visibly scroll if the target is already on screen or the document is too short; check that the address ends with #projects as well.

Watch the starting slash.

about.html is relative to the current directory. On a hosted website, /about.html starts at the domain root. Those are different locations when your site lives in a subdirectory. Keep the relative paths in this local exercise.

TWO FILES. A WORKING CONNECTION.

Build your project notebook.

Download both files into the same folder. Keep their names unchanged for the first test.

Download notebook ↓Download about page ↓

The files open locally without an account or server. Only the external resource link needs internet access.

Read the notebook starter

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My project notebook</title>
</head>
<body>
  <header>
    <h1>My project notebook</h1>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="#projects">My projects</a></li>
        <li><a href="about.html">About this notebook</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>A place to start</h2>
      <p>I am collecting ideas for websites I would like to build.</p>
      <p><a href="https://webostics.com/resources">Read Webostics building guides</a> for more ideas.</p>
    </section>
    <section id="projects">
      <h2>My projects</h2>
      <ul>
        <li>A personal introduction page</li>
        <li>A small business website</li>
        <li>A useful learning resource</li>
      </ul>
      <p>My next step is to choose one idea and write a short brief.</p>
    </section>
  </main>
  <footer><p>Built while learning with Webostics.</p></footer>
</body>
</html>

Open links-and-navigation.html in a browser and follow “About this notebook.”
Use “Return to my project notebook” on the second page. Confirm that you return to the first file.
Follow “My projects.” Check the #projects fragment in the address bar.
Change the project ideas and the about-page text using a plain-text editor.
Add a section with id="next-step" and an h2. Add a navigation link to #next-step.
Rename about.html to my-story.html, update the corresponding link, and test both directions again.

Give navigation a clear structure.

The starter places its main navigation inside nav and uses a list for related links. The aria-label names this navigation region. Your ordinary text links still work without JavaScript or a custom menu.

Test what a reader will do.

Press Tab to move through the links. Keep the browser’s visible focus indicator.
Press Enter on a focused link and confirm its destination.
Check that every navigation label describes the page or section it opens.
Test from both pages, not only from the first one.
If a local link fails, compare the folder, filename and capitalization with its href. Check that your editor has not added .txt.

Why does about.html work when both files are in one folder?

The browser resolves this relative path against the current document location. It looks in the same folder because the path contains only a filename.

Why might a fragment link appear to do nothing?

Its target might already be visible. Also check that the target id exists, is unique, and matches the fragment spelling.

Should every external link open a new tab?

Opening in the same tab is a predictable default. If you intentionally choose a new tab, make that behavior clear to the visitor.

Why can a link work locally but fail after upload?

The uploaded directory structure or filename capitalization may differ. Check the actual hosted path and test each link again after deployment.

Connect your pages. Guide your reader.